<template>
  <div class="form-group">
    <h5 :style="{'color' : widget.style.headingColor}">{{widget.text.heading}}</h5>
    <span :style="{'color' : widget.style.textcolor}">{{widget.text.subheading}}</span>
    <!-- <b-form-input
      :style="{'border-radius' : widget.style.borderRadius+'px', 'border' : widget.style.formBody.borderWidth+'px '+ widget.style.formBody.borderType+' '+widget.style.formBody.borderColor+' !important'}"
      v-model="inputText"
      :placeholder="widget.text.InputPlaceholder"
      v-on:input="$emit('typedText', inputText)"
      :size="widget.style.size"
    ></b-form-input>-->

    <div class="form-group">
      <input
        type="email"
        class="form-control"
        aria-describedby="emailHelp"
        :style="{'border-radius' : widget.style.borderRadius+'px', 'border' : widget.style.formBody.borderWidth+'px '+ widget.style.formBody.borderType+' '+widget.style.formBody.borderColor+' !important'}"
        v-model="widget.value"
        :placeholder="widget.text.InputPlaceholder"
        :size="widget.style.size"
      />
    </div>
    <!--   v-on:input="$emit('typedText', inputText)" -->
    <!-- <input
        :type="NewText.type"
        :placeholder="NewText.InputPlaceholder"
        class="form-control"
        v-model="inputText"
        v-on:input="$emit('typedText', inputText)"
        size="sm"
    >-->
  </div>
</template>

<script>
export default {
  name: "single_input",
  data: function() {
    return {
      inputText: "",
      hover: false,
      highlight: false,
      top: false,
      bottom: false
    };
  },
  props: {
    widget: Object
  }
};
</script>