import { r as registerInstance, h, H as Host } from './core-5b8f6a07.js';

const CcInput = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.color = "primary";
        this.type = "text";
        this.disabled = false;
        this.error = false;
        this.success = false;
        this.bgField = "";
        this.autocomplete = "";
        this.focusInput = () => {
            this.inputEl.focus();
        };
        this.setInputRef = (el) => {
            this.inputEl = el;
            if (this.inputRef) {
                this.inputRef(this.inputEl);
            }
        };
    }
    render() {
        return (h(Host, { class: {
                input: true,
                "input--primary": this.color === "primary",
                "input--secondary": this.color === "secondary",
                "input--success": this.success && !this.error && !this.disabled,
                "input--error": this.error && !this.success && !this.disabled,
                "input--disabled": this.disabled
            }, "data-testid": "cc-input" }, this.label && (h("label", { class: "input__label", onClick: this.focusInput }, this.label)), h("div", { class: "input__wrapper" }, h("input", { class: `input__field ${this.iconName ? "input__field--icon" : ""} ${this.bgField || "input__field--default-bg"}`, type: this.type, placeholder: this.placeholder, disabled: this.disabled, name: this.name, value: this.value, ref: this.setInputRef, autocomplete: this.autocomplete, maxLength: this.maxLength }), this.iconName && (h("cc-icon", { class: {
                input__icon: true,
                "input__icon--primary": this.color === "primary",
                "input__icon--secondary": this.color === "secondary"
            }, name: this.iconName }))), this.helperText && this.error && !this.success && !this.disabled && (h("span", { class: "input__helperText", onClick: this.focusInput }, this.helperText))));
    }
    static get style() { return ".input{display:block}.input__wrapper{position:relative}.input__icon{position:absolute;right:0;margin-right:.8rem;display:-webkit-box;display:-ms-flexbox;display:flex;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.input__icon--primary{color:var(--primary)}.input__icon--secondary{color:var(--secondary)}.input__field{width:100%;border-radius:.4rem;border-width:1px;border-color:var(--neutral-02);padding-left:1.6rem;padding-right:1.6rem;padding-top:.8rem;padding-bottom:.8rem;font-size:1.4rem;display:block;line-height:2.4rem}.input__field:disabled{border-color:var(--disabled-background)}.input--success .input__field{border-color:var(--success)}.input--error .input__field{border-color:var(--error)}.input__field:focus{outline:0}.input--primary .input__field:focus{border-color:var(--primary)}.input--secondary .input__field:focus{border-color:var(--secondary)}.input--success .input__field:focus{border-color:var(--success)}.input--error .input__field:focus{border-color:var(--error)}.input__field--default-bg{background-color:var(--neutral-04)}.input__field--icon{padding-right:3.8rem}.input__helperText{display:block;font-size:1.1rem;margin-top:.4rem;color:var(--error)}.input__label{display:block;padding-top:.4rem;padding-bottom:.4rem;font-size:1.1rem;font-weight:900;color:var(--neutral-03)}.textarea--disabled .input__label{color:var(--disabled-text)}"; }
};

export { CcInput as cc_input };
