'use strict';

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

const index = require('./index-b55be5aa.js');
const lang = require('./lang-cdf2d463.js');
const index$1 = require('./index-b31fbbfb.js');
const helpers = require('./helpers-d38772ff.js');

const styleCss = "x-quantity.invalid x-chip{border-color:var(--color-danger, #DC3545) !important;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-danger-rgb, 220, 53, 69), 0.3) !important;box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(var(--color-danger-rgb, 220, 53, 69), 0.3) !important}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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.onSubInputEvent = index.createEvent(this, "sub", 3);
        this.onSumInputEvent = index.createEvent(this, "sum", 3);
        this.onValidateInputEvent = index.createEvent(this, "validated", 3);
        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 = undefined;
        this.max = undefined;
        this.value = 1;
        this.required = undefined;
        this.number = undefined;
        this.isValid = true;
        this.isDisabled = undefined;
    }
    /**
     * Watch changes in value property
     */
    watchValue(value) {
        var _a;
        this.number = typeof value === 'number' ? value : parseInt(value);
        this.internals.setFormValue(this.number.toString());
        this.el.dispatchEvent(new InputEvent('input', { bubbles: false }));
        this.formValidateCallback(true);
        (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new InputEvent('input', { bubbles: false }));
    }
    /**
     * 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.value = 0;
    }
    /**
     * This is called when the input is validated
     */
    formValidateCallback(dispatchValidation) {
        if (this.required && Number.isNaN(this.value)) {
            this.internals.setValidity({ valueMissing: true }, lang.Lang.get('fields.validation.value-missing'));
        }
        else if (!Number.isNaN(this.max) && this.value > this.max) {
            this.internals.setValidity({ rangeOverflow: true }, lang.Lang.get('fields.validation.range-overflow', { max: this.max }));
        }
        else if (!Number.isNaN(this.min) && this.value < this.min) {
            this.internals.setValidity({ rangeUnderflow: true }, lang.Lang.get('fields.validation.range-underflow', { min: this.min }));
        }
        else {
            this.internals.setValidity({});
        }
        if (dispatchValidation) {
            this.isValid = this.internals.validity.valid;
            this.onValidateInputEvent.emit(this.internals);
        }
    }
    /**
     * On component will load action
     */
    componentWillLoad() {
        if (this.min && this.min > this.value) {
            this.value = this.min;
        }
        this.number = this.value;
    }
    /**
     * This is called on component did load
     */
    componentDidLoad() {
        index$1.IMask(this.input, { mask: Number });
        setTimeout(() => this.formValidateCallback(), 0);
    }
    /**
     * This called on input field is unfocused
     */
    onBlurInput() {
        setTimeout(() => this.formValidateCallback(true), 50);
    }
    /**
     * On element change input value
     *
     * @param event
     */
    handleChange(event) {
        const input = event.target;
        this.value = parseInt(input.value);
    }
    /**
     * Increment number value
     *
     * @returns
     */
    onPlusClick() {
        if (!Number.isNaN(this.number) && this.number + 1 > this.max) {
            return;
        }
        this.number++;
        this.value = 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.value = this.number;
        this.onSubInputEvent.emit(this.number);
    }
    /**
     * Render element
     */
    render() {
        return index.h(index.Host, { key: 'd7f7edcfcda8197101484dce6ed797dd03e868d4', class: helpers.cls({
                'invalid': !this.isValid,
                'disabled': this.isDisabled,
                'required': this.required,
            }), "data-for": this.name }, index.h("x-chip", { key: '104713aaa7a8bf74adc8ca364bb7395ee0e358d8', hoverable: true }, index.h("x-button", { key: '5922991128250e2f4226e0d307bc9b00c5af232c', icon: "plus", tabindex: "-1", onClick: this.onPlusClick.bind(this) }), index.h("input", { key: '7d3acbda8e80a2ce96a9c1440b7b69ecb7956e47', ref: el => this.input = el, min: this.min, max: this.max, required: this.required, inputMode: "numeric", value: this.number, onInput: (e) => this.handleChange(e) }), index.h("x-button", { key: 'c3d45c2406d6d752455c0b3047576fdc1e7ae191', icon: "minus", tabindex: "-1", onClick: this.onMinusClick.bind(this) })));
    }
    static get formAssociated() { return true; }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "value": ["watchValue"]
    }; }
};
XQuantity.style = XQuantityStyle0;

exports.x_quantity = XQuantity;
