'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-51e8292e.js');

function GetSelectOptionId(questionId, index) {
  return "question-" + questionId + "-option-" + index;
}

const sparkleQuizFeedbackCss = ":host{display:block}";

const SparkleQuizFeedback = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.quizFeedbackChange = index.createEvent(this, "quizFeedbackChange", 7);
    this.displayOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  }
  render() {
    return (index.h(index.Host, { class: "quiz__feedback" }, index.h("div", { class: "question-container" }, index.h("div", { class: "question-text" }, this.question.questionText), index.h("div", null, this.displayOptions.map((option, index$1) => index.h("div", { class: "option" }, index.h("input", { type: "radio", id: GetSelectOptionId(this.question.questionId, index$1), name: "question-" + this.question.questionId, value: option, onChange: (e) => this.quizFeedbackChange.emit({ value: e.target.value, question: this.question }) }), index.h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index$1) }, index.h("span", { class: "number" }, this.displayOptions[index$1]), " ", option), index.h("br", null)))))));
  }
};
SparkleQuizFeedback.style = sparkleQuizFeedbackCss;

const sparkleQuizInputCss = ":host{display:block}";

const SparkleQuizInput = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.quizInputChange = index.createEvent(this, "quizInputChange", 7);
  }
  render() {
    return (index.h(index.Host, { class: "quiz__input" }, index.h("div", { class: "question-container" }, index.h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), index.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 }) }))));
  }
};
SparkleQuizInput.style = sparkleQuizInputCss;

const sparkleQuizOpinionCss = "sparkle-quiz-opinion .scale{display:flex;justify-content:space-between}sparkle-quiz-opinion .scale>p{margin:0}sparkle-quiz-opinion .scale>p.selected{color:var(--ion-color-primary)}sparkle-quiz-opinion ion-icon{font-size:30px}sparkle-quiz-opinion .icon-group{min-width:70px;text-align:right;padding-right:10px}";

const SparkleQuizOpinion = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.quizOpinionChange = index.createEvent(this, "quizOpinionChange", 7);
    this.fivePointsDisplayOptions = ['Strongly agree', 'Agree', 'Not sure', 'Disagree', 'Strongly disagree'];
    this.tenPointsDisplayOptions = ["Never",
      "Never",
      "Sometimes",
      "Sometimes",
      "Half of the time",
      "Half of the time",
      "Most of the time",
      "Most of the time",
      "Always",
      "Always",
      "Always"];
    this.tenPointsDefaultValue = 5;
  }
  optionChanged(index, answer) {
    this.selectedIndex = index;
    this.quizOpinionChange.emit({ value: answer, question: this.question });
  }
  renderFivePointScale() {
    return (this.fivePointsDisplayOptions.map((option, index$1) => index.h("div", { class: "option" }, index.h("input", { id: GetSelectOptionId(this.question.questionId, index$1), type: "radio", name: "question-" + this.question.questionId, value: option, onChange: (e) => this.optionChanged(index$1, this.fivePointsDisplayOptions[index$1]) }), index.h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index$1) }, index.h("span", { class: "number" }, index$1 + 1), option), index.h("br", null))));
  }
  renderTenPointScale() {
    return (index.h("div", null, index.h("ion-item", null, index.h("ion-range", { class: "opinion-range", onIonChange: (e) => this.optionChanged(+e.detail.value, this.tenPointsDisplayOptions[+e.detail.value]), min: 0, max: 10, value: this.tenPointsDefaultValue, step: 1, pin: true, snaps: true }, index.h("ion-icon", { size: "small", slot: "start", name: "star-outline" }), index.h("ion-icon", { slot: "end", name: "star" }))), index.h("div", { class: "scale" }, index.h("p", null, "Never"), index.h("p", { class: "selected" }, this.tenPointsDisplayOptions[this.selectedIndex] || this.tenPointsDisplayOptions[this.tenPointsDefaultValue]), index.h("p", null, "Always")), index.h("br", null), index.h("hr", null)));
  }
  render() {
    return (index.h(index.Host, { class: "quiz__opinion" }, index.h("div", { class: "opinion-container" }, index.h("div", { class: "question-text" }, this.question.questionText), index.h("div", null, this.question.scale == "FIVE-POINTS" && this.renderFivePointScale(), this.question.scale == "TEN-POINTS" && this.renderTenPointScale()))));
  }
  get el() { return index.getElement(this); }
};
SparkleQuizOpinion.style = sparkleQuizOpinionCss;

const sparkleQuizPollCss = ":host{display:block}";

const SparkleQuizPoll = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.quizInputChange = index.createEvent(this, "quizInputChange", 7);
  }
  render() {
    return (index.h(index.Host, { class: "quiz__input" }, index.h("div", { class: "question-container" }, index.h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), index.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 }) }))));
  }
};
SparkleQuizPoll.style = sparkleQuizPollCss;

const sparkleQuizSelectCss = ":host{display:block}";

const SparkleQuizSelect = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.quizSelectChange = index.createEvent(this, "quizSelectChange", 7);
    this.allowMultiple = false;
    this.values = [];
    this.displayOptions = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  }
  optionChanged(e) {
    if (e.target.checked) {
      this.values = [...this.values, e.target.value];
    }
    else {
      this.values = this.values.filter(x => x !== e.target.value);
    }
    this.quizSelectChange.emit({ value: this.values, question: this.question });
  }
  render() {
    return (index.h(index.Host, { class: "quiz__select" }, index.h("div", { class: "question-container" }, index.h("div", { class: "question-text" }, this.question.questionText), index.h("div", null, this.question.options.map((option, index$1) => index.h("div", { class: "option" }, index.h("input", { type: this.allowMultiple ? "checkbox" : "radio", id: GetSelectOptionId(this.question.questionId, index$1), name: "question-" + this.question.questionId, value: option.option, onChange: (e) => this.optionChanged(e) }), index.h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index$1) }, index.h("span", { class: "number" }, this.displayOptions[index$1]), option.option), index.h("br", null)))))));
  }
};
SparkleQuizSelect.style = sparkleQuizSelectCss;

exports.sparkle_quiz_feedback = SparkleQuizFeedback;
exports.sparkle_quiz_input = SparkleQuizInput;
exports.sparkle_quiz_opinion = SparkleQuizOpinion;
exports.sparkle_quiz_poll = SparkleQuizPoll;
exports.sparkle_quiz_select = SparkleQuizSelect;
