import { r as registerInstance, h, H as Host, c as getElement } from './core-1db051ba.js';
import { j as hasValue } from './utils-3aef1637.js';

const NumberStepper = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    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" }))));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-number-stepper-h {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  color: var(--anj-neutral-light);\n  height: 28px;\n  padding-right: 1.5rem;\n  width: 19px;\n}\n.sc-anj-number-stepper-h, .sc-anj-number-stepper-h::before, .sc-anj-number-stepper-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-number-stepper-h:focus, .sc-anj-number-stepper-h:active, .sc-anj-number-stepper-h *.sc-anj-number-stepper:focus, .sc-anj-number-stepper-h *.sc-anj-number-stepper:active {\n  outline: none;\n}\n.sc-anj-number-stepper-h .toggle-icon.sc-anj-number-stepper {\n  display: block;\n  line-height: 1;\n  margin: -1px auto;\n  -webkit-transition: color 0.2s ease;\n  transition: color 0.2s ease;\n  text-align: center;\n}\n.sc-anj-number-stepper-h .toggle-icon.sc-anj-number-stepper:first-child {\n  position: relative;\n  margin-bottom: -7px;\n  z-index: 1;\n}\n.sc-anj-number-stepper-h .toggle-icon.sc-anj-number-stepper:last-child {\n  margin-top: -3px;\n}\n.sc-anj-number-stepper-h .toggle-icon.sc-anj-number-stepper:hover {\n  color: var(--anj-neutral);\n}\n.sc-anj-number-stepper-h .toggle-icon.sc-anj-number-stepper:active {\n  color: var(--anj-highlight);\n}\n\ntd.sc-anj-number-stepper-h, td .sc-anj-number-stepper-h {\n  margin-top: -3px;\n}"; }
};

export { NumberStepper as anj_number_stepper };
