import { r as registerInstance, h, d as Host } from './index-c0a4d8bd.js';
import { a as alert_exclamation_circle } from './alert_exclamation_circle-f0fe7c7b.js';

const pnMarketwebInputCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}pn--marketweb-input{display:inline-flex;flex-direction:column}pn-marketweb-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}pn-marketweb-input input::placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-marketweb-input input:hover{border:0.1rem solid #00a0d6}pn-marketweb-input input:disabled{background:#f3f2f2;border:none}pn-marketweb-input>.input-container{position:relative}pn-marketweb-input>.input-container>button{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005d92;padding:0.6rem;border-radius:0.8rem;outline:none;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-marketweb-input>.input-container>button:focus{border:0.1rem solid #005d92}pn-marketweb-input>.input-container>button:hover{background:#e0f8ff}pn-marketweb-input>.input-container>button:active{background:#005d92;color:white}pn-marketweb-input>.input-container>svg{position:absolute;right:0.75em;top:50%;transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-marketweb-input>.input-container>svg polyline{stroke-linecap:round;transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-marketweb-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005e41;stroke-dashoffset:23;stroke-dasharray:23}pn-marketweb-input .label-container{margin-bottom:0.4rem;color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-marketweb-input .label-container label{cursor:pointer;transition:color 0.2s}.label-container label.char-count{flex-shrink:0;padding-left:0.5em}pn-marketweb-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5e554a}pn-input.error{color:#a70707}pn-input.error label{color:#a70707}pn-input.error small{color:#a70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #a70707}pn-input.error input:focus{border:0.1rem solid #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-input.error input:hover{border:0.1rem solid #f06365}pn-input.valid{color:#005e41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005e41}pn-input.valid input{border:0.1rem solid #005e41}pn-input.valid input:focus{border:0.1rem solid #005e41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41}pn-input.valid input:hover{border:0.1rem solid #5ec584}pn-marketweb-input.password input{padding-right:4em}pn-marketweb-input.icon input{padding-right:2.3em}";
const PnMarketwebInputStyle0 = pnMarketwebInputCss;

const PnMarketwebInput = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        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()))));
    }
};
PnMarketwebInput.style = PnMarketwebInputStyle0;

export { PnMarketwebInput as pn_marketweb_input };

//# sourceMappingURL=pn-marketweb-input.entry.js.map