import { Component, Host, Prop, Event, h } from '@stencil/core';
export class SparkleQuizPoll {
  render() {
    return (h(Host, { class: "quiz__input" },
      h("div", { class: "question-container" },
        h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText),
        h("input", { type: "text", class: "form-control", id: "question-" + this.question.questionId, name: "question-" + this.question.questionId, onInput: (e) => this.quizInputChange.emit({ value: e.target.value, question: this.question }) }))));
  }
  static get is() { return "sparkle-quiz-poll"; }
  static get originalStyleUrls() { return {
    "$": ["sparkle-quiz-poll.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sparkle-quiz-poll.css"]
  }; }
  static get properties() { return {
    "question": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SparkleQuizQuestion",
        "resolved": "SparkleQuizQuestion",
        "references": {
          "SparkleQuizQuestion": {
            "location": "import",
            "path": "../../../models/quiz.model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get events() { return [{
      "method": "quizInputChange",
      "name": "quizInputChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ value: string, question: SparkleQuizQuestion }",
        "resolved": "{ value: string; question: SparkleQuizQuestion; }",
        "references": {
          "SparkleQuizQuestion": {
            "location": "import",
            "path": "../../../models/quiz.model"
          }
        }
      }
    }]; }
}
