import { Host, h } from "@stencil/core";
export class EzpStepper {
    constructor() {
        /** Description... */
        this.label = 'Label';
        /** Description... */
        this.min = 1;
        /**
         *
         * States
         *
         */
        /** Description... */
        this.canDecrease = true;
        /** Description... */
        this.canIncrease = true;
        /** Description... */
        this.focused = false;
        /** Description... */
        this.value = 1;
        /**
         *
         * Private methods
         *
         */
        this.handleDecrease = () => {
            const newValue = this.value - 1;
            // Only decrease if within safe range and above minimum
            if (newValue >= Number.MIN_SAFE_INTEGER && (this.min === undefined || newValue >= this.min)) {
                this.value = newValue;
            }
        };
        this.handleIncrease = () => {
            const newValue = this.value + 1;
            const effectiveMax = this.max !== undefined ? Math.min(this.max, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER;
            // Only increase if within safe range and below maximum
            if (newValue <= Number.MAX_SAFE_INTEGER && newValue <= effectiveMax) {
                this.value = newValue;
            }
        };
        this.handleInput = () => {
            if (!this.input)
                return;
            let inputString = this.input.value.trim();
            // If the input is empty, set the value to the minimum
            if (inputString === '') {
                this.value = this.min;
                this.input.value = this.value.toString();
                return;
            }
            // Remove all non-digit characters, keep only numbers
            const cleanedInput = inputString.replace(/\D/g, '');
            // If nothing remains after cleaning, revert to the last valid value
            if (cleanedInput === '') {
                this.input.value = this.value.toString();
                return;
            }
            // Limit input length to prevent precision loss (MAX_SAFE_INTEGER has 16 digits)
            const maxDigits = Number.MAX_SAFE_INTEGER.toString().length;
            const truncatedInput = cleanedInput.slice(0, maxDigits);
            let inputValue = Number(truncatedInput);
            // Safety check: ensure the number is within safe integer range
            if (inputValue > Number.MAX_SAFE_INTEGER) {
                inputValue = Number.MAX_SAFE_INTEGER;
            }
            // Ensure the value is between min and max
            if (this.min !== undefined && inputValue < this.min)
                inputValue = this.min;
            const effectiveMax = this.max !== undefined ? Math.min(this.max, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER;
            if (inputValue > effectiveMax)
                inputValue = effectiveMax;
            // Update component state and input field
            this.value = inputValue;
            this.input.value = inputValue.toString();
        };
        this.setFocus = () => {
            this.input.focus();
        };
        this.handleBlur = () => {
            this.focused = false;
        };
        this.handleFocus = () => {
            this.focused = true;
        };
        this.handleKeyDown = (event) => {
            // If key is allowed or a Ctrl/Cmd combination, do nothing
            if (EzpStepper.ALLOWED_KEYS.includes(event.key) ||
                ((event.ctrlKey || event.metaKey) && EzpStepper.CTRL_CMD_KEYS.includes(event.key.toLowerCase()))) {
                return;
            }
            // If the key is not a digit, prevent default behavior (block input)
            const isDigit = /^\d$/.test(event.key);
            if (!isDigit) {
                event.preventDefault();
            }
        };
    }
    /**
     *
     * Watchers
     *
     */
    watchValue() {
        const effectiveMax = this.max !== undefined ? Math.min(this.max, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER;
        this.canIncrease = this.value < effectiveMax;
        this.canDecrease = this.min !== undefined ? this.value > this.min : true;
        this.stepperChanged.emit(this.value);
    }
    /**
     *
     * Lifecycle methods
     *
     */
    componentWillLoad() {
        this.watchValue();
    }
    /**
     *
     * Render method
     *
     */
    render() {
        return (h(Host, { key: 'c38bfbfc2ec2a7151bb04240c2eee1b8ad3ec613', class: `${this.focused ? 'focused' : ''} ${this.icon ? 'has-icon' : ''}` }, h("div", { key: '0f4546db4e6004561114c6073672160c4cebe01b', id: "toggle", onClick: this.setFocus }), this.icon ? h("ezp-icon", { id: "icon", name: this.icon }) : null, h("ezp-label", { key: '74bd616d5336895a33b54668c3641e23267427d8', id: "label", noWrap: true, text: this.label }), h("input", { key: '612cbac350e67e5915e3bd2b68beef61d87d65f4', id: "input", type: "number", ref: (input) => (this.input = input), min: this.min.toString(), max: this.max !== undefined ? this.max.toString() : undefined, value: this.value.toString(), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("div", { key: '7b20d44d0fef4c6d206acba4ba7a5b545cefe437', class: "buttons" }, h("button", { key: 'b71ead9b92eef6e56638073d5e9e39e0f3460618', class: "button", disabled: !this.canDecrease, onClick: this.handleDecrease }, h("ezp-icon", { key: 'd2fc6589d1044644da2c40f85ad67f5a4c1aecdd', name: "minus" })), h("button", { key: 'ea7d7c6f9064c03d3a8ea2434fe26dd7f964b4d4', class: "button", disabled: !this.canIncrease, onClick: this.handleIncrease }, h("ezp-icon", { key: '5c4d5c89e329a7af4bf7cc5afd0b4b6f97ff4b3b', name: "plus" })))));
    }
    static get is() { return "ezp-stepper"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ezp-stepper.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ezp-stepper.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IconNameTypes",
                    "resolved": "\"account\" | \"checkmark\" | \"checkmark-alt\" | \"close\" | \"color\" | \"copies\" | \"dark\" | \"drag-drop\" | \"duplex\" | \"exclamation-mark\" | \"expand\" | \"height\" | \"help\" | \"light\" | \"logo\" | \"logout\" | \"menu\" | \"minus\" | \"orientation\" | \"paper_range\" | \"plus\" | \"printer\" | \"quality\" | \"question-mark\" | \"size\" | \"system\" | \"trays\" | \"width\"",
                    "references": {
                        "IconNameTypes": {
                            "location": "import",
                            "path": "../../shared/types",
                            "id": "src/shared/types.d.ts::IconNameTypes",
                            "referenceLocation": "IconNameTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "'Label'"
            },
            "max": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max"
            },
            "min": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Description..."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "min",
                "defaultValue": "1"
            }
        };
    }
    static get states() {
        return {
            "canDecrease": {},
            "canIncrease": {},
            "focused": {},
            "value": {}
        };
    }
    static get events() {
        return [{
                "method": "stepperChanged",
                "name": "stepperChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\nEvents"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "watchValue"
            }];
    }
}
EzpStepper.ALLOWED_KEYS = [
    'Backspace',
    'Delete',
    'Tab',
    'Escape',
    'Enter',
    'ArrowLeft',
    'ArrowUp',
    'ArrowRight',
    'ArrowDown',
];
EzpStepper.CTRL_CMD_KEYS = ['a', 'c', 'v', 'x'];
