import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6191c26c.js';
import { L as Lang } from './lang-3a0141b1.js';
import { I as IMask } from './index-1207b1f1.js';
import { c as cls } from './helpers-7608753a.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) {
        registerInstance(this, hostRef);
        this.onSubInputEvent = createEvent(this, "sub", 3);
        this.onSumInputEvent = createEvent(this, "sum", 3);
        this.onValidateInputEvent = 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.get('fields.validation.value-missing'));
        }
        else if (!Number.isNaN(this.max) && this.value > this.max) {
            this.internals.setValidity({ rangeOverflow: true }, 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.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() {
        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 h(Host, { key: '3fbb825ddea2e3c6c097e1a4a8fd05a95a12a04c', class: cls({
                'invalid': !this.isValid,
                'disabled': this.isDisabled,
                'required': this.required,
            }), "data-for": this.name }, h("x-chip", { key: '13613220bb2d055c6fc681dc38300dfb727f8d07', hoverable: true }, h("x-button", { key: '1f0a28f39bb41b0928f708fe8d928f783dd885d7', icon: "plus", tabindex: "-1", onClick: this.onPlusClick.bind(this) }), h("input", { key: '962eb7c5cd812ca0b18d8a2314ff7650a888f6dc', ref: el => this.input = el, min: this.min, max: this.max, required: this.required, inputMode: "numeric", value: this.number, onInput: (e) => this.handleChange(e) }), h("x-button", { key: '9d1a3ba0bb32682750904f7dff47163ea963880b', icon: "minus", tabindex: "-1", onClick: this.onMinusClick.bind(this) })));
    }
    static get formAssociated() { return true; }
    get el() { return getElement(this); }
    static get watchers() { return {
        "value": ["watchValue"]
    }; }
};
XQuantity.style = XQuantityStyle0;

export { XQuantity as x_quantity };
