/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
/**
 * Increments and decrements a value using an [input](/components/input).
 *
 * @status new
 * @version 8.2.0
 */
export class NanoIncrement {
    host;
    inputElement;
    ignoreInputChange = false;
    inputElementChanged(_newValue, oldValue) {
        if (oldValue) {
            oldValue.removeEventListener('nanoChange', this.inputChangeHandler);
        }
        if (this.inputElement) {
            this.inputElement.label = this.inputElement.label || 'Increment value';
            this.inputElement.hideLabel = true;
            this.inputElement.type = 'number';
            this.inputElement.max = this.inputElement.max || '10';
            this.inputElement.min = this.inputElement.min || '0';
            this.inputElement.step = this.inputElement.step || '1';
            this.inputElement.value = this.inputElement.value || '0';
            this.inputElement.addEventListener('nanoChange', this.inputChangeHandler);
        }
    }
    inputChangeHandler = () => {
        if (!this.ignoreInputChange) {
            this.ignoreInputChange = true;
            let value = Number(this.inputElement.value);
            value = isNaN(value) ? 0 : value;
            value = Math.max(value, parseFloat(this.inputElement.min) || 0);
            value = Math.min(value, parseFloat(this.inputElement.max) || Infinity);
            this.inputElement.value = value.toString();
            requestAnimationFrame(() => {
                this.ignoreInputChange = false;
            });
        }
    };
    handleSlotChange = () => {
        this.inputElement = this.host.querySelector('nano-input');
    };
    handleMinus = () => {
        if (this.inputElement) {
            const currentValue = parseFloat(this.inputElement.value) || 0;
            const step = parseFloat(this.inputElement.step) || 1;
            const newValue = Math.max(currentValue - step, parseFloat(this.inputElement.min) || 0);
            this.ignoreInputChange = true;
            this.inputElement.value = newValue.toString();
            this.ignoreInputChange = false;
        }
    };
    handlePlus = () => {
        if (this.inputElement) {
            const currentValue = parseFloat(this.inputElement.value) || 0;
            const step = parseFloat(this.inputElement.step) || 1;
            const newValue = Math.min(currentValue + step, parseFloat(this.inputElement.max) || Infinity);
            this.ignoreInputChange = true;
            this.inputElement.value = newValue.toString();
            this.ignoreInputChange = false;
        }
    };
    componentWillLoad() {
        this.handleSlotChange();
    }
    render() {
        return (h(Host, { key: '14c12f59b2f00d22bc58fb5ca64616a0a6b19749', class: "nano-increment" }, h("div", { key: '77800505fe9e0d79fda864dc48cb199e6ea611c7', class: "root" }, h("div", { key: '01576d846ca2708319d9faf1c7a0a25169f6c3f4', class: "minus" }, h("nano-icon-button", { key: 'a6b30034c64de602ac504a882aa3ff7c5a933083', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), h("slot", { key: 'f04566d5f4a52f23a36bfb1c86a8dadfa3638d66', onSlotchange: this.handleSlotChange }), h("div", { key: '4f1e183e7d547d5f72154115300d14cfbbe3d62b', class: "plus" }, h("nano-icon-button", { key: '20af1b2a19cd8c9264e6375f4a5c05b9f917d979', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
    }
    static get is() { return "nano-increment"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["increment.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["increment.css"]
        };
    }
    static get states() {
        return {
            "inputElement": {}
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "inputElement",
                "methodName": "inputElementChanged"
            }];
    }
}
