import { Host, h } from "@stencil/core";
import { hasValue } from '../../utils/utils';
export class NumberStepper {
    componentDidLoad() {
        this.input = this.element.parentElement;
    }
    static toNumber(value) {
        const parsed = Number(value);
        return isNaN(parsed) ? 0 : parsed;
    }
    onIncrement(event, direction) {
        event.preventDefault();
        event.stopPropagation();
        this.input.setFocus();
        const increment = (this.input.step ? NumberStepper.toNumber(this.input.step) : 1) * direction;
        const value = NumberStepper.toNumber(this.input.value);
        this.input.value = increment > 0 ? this.increase(value, increment) : this.decrease(value, increment);
    }
    decrease(value, increment) {
        if (!hasValue(this.input.min)) {
            return value + increment;
        }
        const min = NumberStepper.toNumber(this.input.min);
        return value + increment < min ? min : value + increment;
    }
    increase(value, increment) {
        if (!hasValue(this.input.max)) {
            return value + increment;
        }
        const max = NumberStepper.toNumber(this.input.max);
        return value + increment > max ? max : value + increment;
    }
    render() {
        return (h(Host, { slot: "end" },
            h("svg", { class: "toggle-icon", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", onMouseDown: ev => this.onIncrement(ev, 1) },
                h("path", { fill: "currentColor", d: "M9 6l-4.5 4.5 1.06 1.06L9 8.12l3.44 3.44 1.06-1.06z" })),
            h("svg", { class: "toggle-icon", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", onMouseDown: ev => this.onIncrement(ev, -1) },
                h("path", { fill: "currentColor", d: "M12.44 6.44L9 9.88 5.56 6.44 4.5 7.5 9 12l4.5-4.5z" }))));
    }
    static get is() { return "anj-number-stepper"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["number-stepper.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["number-stepper.css"]
    }; }
    static get elementRef() { return "element"; }
}
