import { h, Host } from "@stencil/core";
import { alert_exclamation_circle } from "pn-design-assets/pn-assets/icons.js";
export class PnMarketwebInput {
    constructor() {
        this.disabled = false;
        this.error = '';
        this.invalid = false;
        this.helpertext = '';
        this.label = '';
        this.placeholder = '';
        this.inputid = `${Math.random()}`;
        this.name = '';
        this.required = false;
        this.type = 'text';
        this.autocomplete = '';
        this.valid = null;
        this.value = '';
        this.maxlength = '';
        this.min = '';
        this.max = '';
        this.step = '';
        this.pattern = '';
        this.showText = false;
    }
    getTextMessage() {
        if (this.error)
            return this.error;
        if (this.helpertext)
            return this.helpertext;
        return null;
    }
    toggleTextVisibility() {
        this.showText = !this.showText;
    }
    getInputType() {
        let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];
        return types.includes(this.type) && !this.showText ? this.type : 'text';
    }
    setVal(e) {
        const target = e.composedPath?.()[0];
        this.value = target.value;
    }
    getClassNames() {
        let classNames = 'pn-input ';
        if (this.error.length > 0 || this.invalid)
            classNames += 'error ';
        if (this.valid)
            classNames += 'valid ';
        if (this.type === 'password')
            classNames += 'password ';
        if (this.error || this.invalid || this.valid)
            classNames += 'icon ';
        return classNames;
    }
    render() {
        return (h(Host, { key: 'd53d34768ce8cac2294dde02d5bd9fdf60548508', class: this.getClassNames() }, (this.label || this.maxlength) && (h("div", { key: '000eb02be394dd255a428ddaeca5cda08fec17d2', class: "label-container" }, this.label && h("label", { key: '4754455bb69d68064707c1223f41e47f3e3860bd', htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && (h("label", { key: '49121d10d9d303fe632b3a8e837b988d16c4a6c4', class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)))), h("div", { key: '0132c366e62de325ee8d624e1732d5338a80099d', class: "input-container" }, h("input", { key: '4b55002c92fd8f1e28286a6a63b8fba5e2c8e97c', type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, onInput: e => this.setVal(e), maxlength: this.maxlength ? this.maxlength : null, min: this.min ? this.min : null, max: this.max ? this.max : null, step: this.step ? this.step : null, pattern: this.pattern ? this.pattern : null }), h("svg", { key: '9b232b0b110584f2d45858a09101a852387cb1ab', class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'bdba76200d58e859fa22613f88bff66934f69290', class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === 'password' && !this.disabled && h("button", { key: '75d4504bb40c624abe4fbc40c1e1bda486caa425', onClick: () => this.toggleTextVisibility() }, "Show")), this.getTextMessage() && (h("small", { key: '554324fcf8463e75e525ed8c48e1b6a434e69214' }, this.error && h("pn-icon", { key: 'c06d11b0517d69c763d58a2bf074e73aafb63d47', icon: alert_exclamation_circle, small: true, color: "warning" }), this.getTextMessage()))));
    }
    static get is() { return "pn-marketweb-input"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-marketweb-input.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-marketweb-input.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically)"
                },
                "attribute": "error",
                "reflect": false,
                "defaultValue": "''"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error state without message (If you want to control the error messaging on your own)"
                },
                "attribute": "invalid",
                "reflect": false,
                "defaultValue": "false"
            },
            "helpertext": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text message placed underneath the input field"
                },
                "attribute": "helpertext",
                "reflect": false,
                "defaultValue": "''"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text label placed above the input field"
                },
                "attribute": "label",
                "reflect": false,
                "defaultValue": "''"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "''"
            },
            "inputid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "inputid",
                "reflect": false,
                "defaultValue": "`${Math.random()}`"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "name",
                "reflect": false,
                "defaultValue": "''"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'text'"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "autocomplete",
                "reflect": false,
                "defaultValue": "''"
            },
            "valid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "valid",
                "reflect": false,
                "defaultValue": "null"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "value",
                "reflect": false,
                "defaultValue": "''"
            },
            "maxlength": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The maximum number of characters the user should be able to add, also adds a visible counter"
                },
                "attribute": "maxlength",
                "reflect": false,
                "defaultValue": "''"
            },
            "min": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "min",
                "reflect": false,
                "defaultValue": "''"
            },
            "max": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "max",
                "reflect": false,
                "defaultValue": "''"
            },
            "step": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "step",
                "reflect": false,
                "defaultValue": "''"
            },
            "pattern": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "pattern",
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get states() {
        return {
            "showText": {}
        };
    }
}
//# sourceMappingURL=pn-marketweb-input.js.map
