import { h } from "@stencil/core";
import { BigNumber } from "bignumber.js";
export class PaginationEllipsisForm {
    constructor() {
        this.pageValue = '';
        this.isVisible = false;
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleKeyDown = this.handleKeyDown.bind(this);
        this.handleInputReference = this.handleInputReference.bind(this);
    }
    handleInputReference(inputElement) {
        this.inputElement = inputElement;
    }
    handleKeyDown(event) {
        if (['Equal', 'Minus', 'Period', 'KeyE', 'Comma'].includes(event.code)) {
            event.preventDefault();
            return;
        }
    }
    handleChange(event) {
        const input = event.target;
        const valueBigNumber = new BigNumber(input.value);
        const isBelowMax = valueBigNumber.isLessThanOrEqualTo(this.maxPageToSearchFor);
        if (valueBigNumber.isNaN() || isBelowMax) {
            this.pageValue = valueBigNumber.toString();
        }
    }
    handleSubmit(event) {
        if (!this.pageValue) {
            return;
        }
        event.preventDefault();
        this.search.emit(parseInt(this.pageValue === '0' ? '1' : this.pageValue));
    }
    handleVisibilityChange(newValue) {
        if (newValue && this.inputElement) {
            this.inputElement.focus();
        }
    }
    render() {
        return (h("form", { key: '8054d355208a90ec26488fc9b635f4dc54a1c391', class: "pagination-ellipsis-form", onSubmit: this.handleSubmit, onClick: (event) => event.stopPropagation() }, h("label", { key: 'd3230c71ba7cbe64fcd50a8984d731097e92e818', htmlFor: "paginationSearch", class: "pagination-ellipsis-form-field-label" }, "Page"), h("div", { key: '17d9851668a6c9f62cf78e8c617f6ec4bf84f16c', class: "pagination-ellipsis-form-field" }, h("input", { key: '6622e54eee275c8cc1969cef8dcaecc69e9d7b7f', type: "number", autoFocus: true, autoComplete: "off", id: "paginationSearch", value: this.pageValue, name: "paginationSearch", onInput: this.handleChange, onKeyDown: this.handleKeyDown, ref: this.handleInputReference, class: "pagination-ellipsis-form-field-input" }), h("div", { key: '011ac76668041ad1b94cf9497173798e3c83280c', class: "pagination-ellipsis-form-button", onClick: this.handleSubmit }, h("mvx-magnifying-glass-icon", { key: '21ccc387fa815d3b0e66b03000f965892269f692', class: "pagination-ellipsis-form-button-icon" })))));
    }
    static get is() { return "mvx-pagination-ellipsis-form"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pagination-ellipsis-form.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pagination-ellipsis-form.css"]
        };
    }
    static get properties() {
        return {
            "maxPageToSearchFor": {
                "type": "number",
                "attribute": "max-page-to-search-for",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "isVisible": {
                "type": "boolean",
                "attribute": "is-visible",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "pageValue": {}
        };
    }
    static get events() {
        return [{
                "method": "search",
                "name": "search",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "isVisible",
                "methodName": "handleVisibilityChange"
            }];
    }
}
//# sourceMappingURL=pagination-ellipsis-form.js.map
