import { h } from "@stencil/core";
import { guid } from "../../utils";
export class DgaNumberInput {
    constructor() {
        this.placeholder = '0000';
        this.size = 'lg';
        this.variant = 'default';
        this.error = false;
        this.helperText = '';
        this.disabled = false;
        this.readonly = false;
        this.required = false;
        this.fullwidth = false;
        this.name = guid();
        this.value = 0;
        this.isActive = false;
        this.isFocused = false;
        this.handleIncrement = () => {
            if (!this.disabled && !this.readonly) {
                this.value += 1;
                if (this.onChange) {
                    this.onChange({ target: { value: this.value } });
                }
            }
        };
        this.handleDecrement = () => {
            if (!this.disabled && !this.readonly) {
                this.value -= 1;
                if (this.onChange) {
                    this.onChange({ target: { value: this.value } });
                }
            }
        };
    }
    render() {
        return (h("div", { key: '13a7ea55ca0edcafa135ed856265b9eb06149f78', class: "dga-form-control" }, this.label && h("dga-label", { key: '7a300fd7c93d76edf165424a9ea74a1a96a754d5', label: this.label, size: this.size, required: this.required, disabled: this.disabled }), h("div", { key: 'edf7ededa853c74331ec1ea7854194b28e8309c4', class: `dga-number-input dga-number-input--${this.size} ${this.error ? 'dga-number-input--error' : ''} ${this.fullwidth ? 'dga-number-input--full-width' : ''} ${this.variant !== 'default' ? `dga-number-input--${this.variant}` : ''} ${this.isActive ? 'active' : ''} ${this.isFocused ? 'focus' : ''} ${this.disabled ? 'dga-number-input--disabled' : ''} ${this.readonly ? 'readOnly' : ''}`, ref: el => (this.inputContainerRef = el) }, h("button", { key: '1730409d871f313c25c83da25762bdfa0cd84de4', class: `dga-number-input__prefix`, onClick: this.handleIncrement, disabled: this.disabled || this.readonly }, h("span", { key: 'b1f9c0de4cc76ac18798b09f5be9a8e0ed1f6feb', class: "dga-number-input__prefix-icon" }, h("dga-icon", { key: 'a1f7ecf0328fbe48e09d5176de95dd766a3b5e5c', icon: "plus-sign", variant: "stroke", type: "rounded" }))), h("input", { key: '7f021ca8bb2f62bf7634751041abbe9209eb3d61',
            // id={id}
            value: this.value, name: this.name, type: 'number', onFocus: () => (this.isFocused = true), onBlur: e => {
                this.isFocused = false;
                this.onBlur(e);
            }, class: "dga-number-input__field", placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, onMouseDown: () => (this.isActive = true), onMouseUp: () => (this.isActive = false), onMouseOut: () => (this.isActive = false), onChange: this.onChange, onInput: this.onInput }), h("button", { key: '2d0f44e53f5f6553cbeb6085e7a9026966eff5fc', class: `dga-number-input__suffix`, onClick: this.handleDecrement, disabled: this.disabled || this.readonly }, h("span", { key: '7b6b8a2f95ff2c2ee9f2a25fe66b1ce45c41448d', class: "dga-number-input__suffix-icon" }, h("dga-icon", { key: 'bbb69650dfba948cca8208443ec4c4e4ad1ac23c', icon: "minus-sign", variant: "stroke", type: "rounded" })))), this.helperText && h("dga-helper-text", { key: '4f82c4d702eab422ab73d098f4da261bf4b7da9d', helperText: this.helperText, helperTextIcon: this.helperTextIcon, error: this.error })));
    }
    static get is() { return "dga-number-input"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-number-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-number-input.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "'0000'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'md' | 'lg'",
                    "resolved": "\"lg\" | \"md\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'lg'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'lighter' | 'darker'",
                    "resolved": "\"darker\" | \"default\" | \"lighter\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'default'"
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "error",
                "reflect": false,
                "defaultValue": "false"
            },
            "helperTextIcon": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Icon",
                    "resolved": "Icon",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../dga-featured-icon/dga-featured-icon",
                            "id": "src/components/dga-featured-icon/dga-featured-icon.tsx::Icon"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false,
                "defaultValue": "''"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "fullwidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "fullwidth",
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false,
                "defaultValue": "guid()"
            },
            "value": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false,
                "defaultValue": "0"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event?: any) => void",
                    "resolved": "(event?: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onInput": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event?: any) => void",
                    "resolved": "(event?: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onBlur": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event?: any) => void",
                    "resolved": "(event?: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "isActive": {},
            "isFocused": {}
        };
    }
}
//# sourceMappingURL=dga-number-input.js.map
