/*!
 * Custom elements for Nanopore-Digital Web applications
 */
'use strict';

var index = require('./index-DGttnXif.js');
var renderer = require('./renderer-jVpDRMfV.js');

const incrementCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:inline-block}.root{display:grid;grid-template-columns:min-content auto 1fr;grid-template-rows:max-content max-content;align-items:stretch}::slotted(*){text-align:center}nano-icon-button{background:var(--nano-color-base-0);color:var(--nano-color-primary-1000);display:flex;border-radius:var(--nano-border-radius-pill);position:relative;z-index:1;inline-size:fit-content;block-size:100%}nano-icon-button:hover{background:var(--nano-color-primary-100)}nano-icon-button:active{background:var(--nano-color-primary-300)}nano-icon-button::part(base){border:1px solid var(--nano-color-neutral-300)}nano-icon-button::part(base):focus-visible{outline:var(--nano-focus-ring-color) solid 3px;outline-offset:-2px}.minus{grid-column:1;grid-row:1}.minus nano-icon-button{--padding:0.4375em 0.625em 0.4375em 1.125em;border-start-end-radius:0;border-end-end-radius:0}.minus nano-icon-button::part(base){border-inline-end:none}.plus{grid-column:3;grid-row:1}.plus nano-icon-button{--padding:0.4375em 1.125em 0.4375em 0.625em;border-start-start-radius:0;border-end-start-radius:0}.plus nano-icon-button::part(base){border-inline-start:none}";

const NanoIncrement = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get host() { return index.getElement(this); }
    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 (renderer.h(index.Host, { key: '14c12f59b2f00d22bc58fb5ca64616a0a6b19749', class: "nano-increment" }, renderer.h("div", { key: '77800505fe9e0d79fda864dc48cb199e6ea611c7', class: "root" }, renderer.h("div", { key: '01576d846ca2708319d9faf1c7a0a25169f6c3f4', class: "minus" }, renderer.h("nano-icon-button", { key: 'a6b30034c64de602ac504a882aa3ff7c5a933083', iconName: "light/minus", label: "Decrement", onClick: this.handleMinus })), renderer.h("slot", { key: 'f04566d5f4a52f23a36bfb1c86a8dadfa3638d66', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '4f1e183e7d547d5f72154115300d14cfbbe3d62b', class: "plus" }, renderer.h("nano-icon-button", { key: '20af1b2a19cd8c9264e6375f4a5c05b9f917d979', iconName: "light/plus", label: "Increment", onClick: this.handlePlus })))));
    }
    static get watchers() { return {
        "inputElement": ["inputElementChanged"]
    }; }
};
NanoIncrement.style = incrementCss;

exports.nano_increment = NanoIncrement;
