@sparkle-learning/core 0.0.57 → 0.0.59

package/dist/esm/sparkle-poll.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';
+
+const sparklePollCss = ":host{display:block}";
+
+const SparklePoll = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+SparklePoll.style = sparklePollCss;
+
+export { SparklePoll as sparkle_poll };

package/dist/esm/sparkle-quiz-container.entry.js

@@ -0,0 +1,43 @@
+import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';
+
+const sparkleQuizContainerCss = ":host{display:block}";
+
+const SparkleQuizContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showInstantResult = false;
+    this.submitted = false;
+    this.answers = {};
+  }
+  //TODO: not working
+  pageDidLoadHandler($event) {
+    if ($event) {
+      this.pageInfo = $event.detail.pageInfo;
+      console.log("pageInfo", this.pageInfo);
+    }
+  }
+  updateQuizAnswerModelHandler(obj) {
+    if (obj.detail.question) {
+      this.answers[obj.detail.question.questionId] = {
+        question: obj.detail.question,
+        answer: obj.detail.answer
+      };
+    }
+    console.log(this.answers);
+  }
+  submitQuiz() {
+    this.submitted = true;
+    let model = {
+      pageInfo: this.pageInfo,
+      quiz: this.answers
+    };
+    console.log(model);
+    //post api
+  }
+  render() {
+    return (h(Host, null, this.questionIds && this.questionIds.split(",").map((id => h("sparkle-quiz-v1", { questionId: +id, submitted: this.submitted, showInstantResult: this.showInstantResult }))), h("ion-button", { slot: "end", onClick: () => this.submitQuiz() }, "Submit")));
+  }
+};
+SparkleQuizContainer.style = sparkleQuizContainerCss;
+
+export { SparkleQuizContainer as sparkle_quiz_container };

package/dist/esm/sparkle-quiz-feedback_5.entry.js

@@ -0,0 +1,109 @@
+import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+
+function GetSelectOptionId(questionId, index) {
+  return "question-" + questionId + "-option-" + index;
+}
+
+const sparkleQuizFeedbackCss = ":host{display:block}";
+
+const SparkleQuizFeedback = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizFeedbackChange = createEvent(this, "quizFeedbackChange", 7);
+    this.displayOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  }
+  render() {
+    return (h(Host, { class: "quiz__feedback" }, h("div", { class: "question-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.displayOptions.map((option, index) => h("div", { class: "option" }, h("input", { type: "radio", id: GetSelectOptionId(this.question.questionId, index), name: "question-" + this.question.questionId, value: option, onChange: (e) => this.quizFeedbackChange.emit({ value: e.target.value, question: this.question }) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, this.displayOptions[index]), " ", option), h("br", null)))))));
+  }
+};
+SparkleQuizFeedback.style = sparkleQuizFeedbackCss;
+
+const sparkleQuizInputCss = ":host{display:block}";
+
+const SparkleQuizInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizInputChange = createEvent(this, "quizInputChange", 7);
+  }
+  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 }) }))));
+  }
+};
+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) {
+    registerInstance(this, hostRef);
+    this.quizOpinionChange = 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) => h("div", { class: "option" }, h("input", { id: GetSelectOptionId(this.question.questionId, index), type: "radio", name: "question-" + this.question.questionId, value: option, onChange: (e) => this.optionChanged(index, this.fivePointsDisplayOptions[index]) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, index + 1), option), h("br", null))));
+  }
+  renderTenPointScale() {
+    return (h("div", null, h("ion-item", null, 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 }, h("ion-icon", { size: "small", slot: "start", name: "star-outline" }), h("ion-icon", { slot: "end", name: "star" }))), h("div", { class: "scale" }, h("p", null, "Never"), h("p", { class: "selected" }, this.tenPointsDisplayOptions[this.selectedIndex] || this.tenPointsDisplayOptions[this.tenPointsDefaultValue]), h("p", null, "Always")), h("br", null), h("hr", null)));
+  }
+  render() {
+    return (h(Host, { class: "quiz__opinion" }, h("div", { class: "opinion-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.question.scale == "FIVE-POINTS" && this.renderFivePointScale(), this.question.scale == "TEN-POINTS" && this.renderTenPointScale()))));
+  }
+  get el() { return getElement(this); }
+};
+SparkleQuizOpinion.style = sparkleQuizOpinionCss;
+
+const sparkleQuizPollCss = ":host{display:block}";
+
+const SparkleQuizPoll = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizInputChange = createEvent(this, "quizInputChange", 7);
+  }
+  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 }) }))));
+  }
+};
+SparkleQuizPoll.style = sparkleQuizPollCss;
+
+const sparkleQuizSelectCss = ":host{display:block}";
+
+const SparkleQuizSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizSelectChange = 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 (h(Host, { class: "quiz__select" }, h("div", { class: "question-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.question.options.map((option, index) => h("div", { class: "option" }, h("input", { type: this.allowMultiple ? "checkbox" : "radio", id: GetSelectOptionId(this.question.questionId, index), name: "question-" + this.question.questionId, value: option.option, onChange: (e) => this.optionChanged(e) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, this.displayOptions[index]), option.option), h("br", null)))))));
+  }
+};
+SparkleQuizSelect.style = sparkleQuizSelectCss;
+
+export { SparkleQuizFeedback as sparkle_quiz_feedback, SparkleQuizInput as sparkle_quiz_input, SparkleQuizOpinion as sparkle_quiz_opinion, SparkleQuizPoll as sparkle_quiz_poll, SparkleQuizSelect as sparkle_quiz_select };

package/dist/esm/sparkle-quiz-old.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, i as createEvent, h, e as getElement } from './index-c04b9ed5.js';
+
+const sparkleQuizOldCss = "sparkle-quiz-old{display:block;font-family:var(--font-family);--sparkle-quiz-question-container-padding:10px 0px;--sparkle-quiz-question-container-margin:0px;--sparkle-quiz-question-text-padding:10px 0px;--sparkle-quiz-option-border:2px solid var(--line-rule-color);--sparkle-quiz-selected-option-border:2px solid var(--text-color--dark);--sparkle-quiz-option-border-radius:4px;--sparkle-quiz-option-padding:5px 10px;--sparkle-quiz-option-width:100%;--sparkle-quiz-error-bg-color:#fbaeae;--sparkle-quiz-success-bg-color:#fbaeae;padding:var(--sparkle-quiz-question-container-padding);margin:var(--sparkle-quiz-question-container-margin)}.question-text{padding:var(--sparkle-quiz-question-text-padding)}.option{padding:5px 0px}.number{padding:0px 14px;border:1px solid #ebebeb;border-radius:4px;margin-right:10px;font-size:14px;width:14px;display:inline-flex;justify-content:center}.feedback-container{padding:10px;border-radius:4px}.incorrect .feedback-container{background-color:var(--sparkle-quiz-error-bg-color, #fbaeae)}.correct .feedback-container{background-color:var(--sparkle-quiz-success-bg-color, #fbaeae)}";
+
+const SparkleQuizOld = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizAnswerChanged = createEvent(this, "quizAnswerChanged", 7);
+    this.type = 'TEXT';
+    this.scale = 'FIVE-POINTS';
+    this.options = [];
+  }
+  //   private pageInfo: any;
+  //   @Watch('questionId')
+  //   async loadQuestion() {
+  //     if (this.quizData) {
+  //       this.question = this.quizData[+this.questionId];
+  //     }
+  //   }
+  //@State() question: SparkleQuizQuestion;
+  //@State() quizData: { [key: string]: SparkleQuizQuestion };
+  async componentWillLoad() { }
+  async componentDidLoad() {
+    this.options = [];
+    if (this.el.querySelector("[slot='options']")) {
+      Array.from(this.el.querySelector("[slot='options']").querySelectorAll('option')).forEach(el => {
+        this.options = [...this.options, { option: el.innerText }];
+      });
+      console.log(this.questionText, this.options);
+    }
+    this.quizAnswerChanged.emit({
+      question: null,
+      answer: '1',
+    });
+  }
+  quizInputChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizFeedbackChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizSelectChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizOpinionChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  getQuestionFeedback() {
+    if (this.type == 'MULTIPLE-CHOICE') {
+      //   const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
+      //   return feedbacks.length > 0 && feedbacks.map(feedback => <small>{feedback}</small>);
+      return h("small", null);
+    }
+    else if (this.type == 'FEEDBACK' || this.type == 'TEXT') {
+      return this.feedback && h("small", null, " ", this.feedback);
+    }
+  }
+  showAnswerStatus() {
+    return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
+  }
+  renderQuestion() {
+    var question = {
+      questionId: this.questionId,
+      questionText: this.questionText,
+      questionType: this.type,
+      scale: this.scale,
+      showOptionNumber: this.showOptionNumber,
+      options: this.options,
+      //options: Array<SparkleQuizQuestionOption>;
+      feedback: this.feedback,
+    };
+    if (this.type == 'MULTIPLE-CHOICE') {
+      return h("sparkle-quiz-select", { question: question, allowMultiple: true });
+    }
+    else if (this.type == 'FEEDBACK') {
+      return h("sparkle-quiz-feedback", { question: question });
+    }
+    else if (this.type == 'TEXT') {
+      return h("sparkle-quiz-input", { question: question });
+    }
+    else if (this.type == 'OPINION') {
+      return h("sparkle-quiz-opinion", { question: question });
+    }
+    else if (this.type == 'POLL') {
+      return h("sparkle-quiz-poll", { question: question });
+    }
+  }
+  render() {
+    if (this.questionText) {
+      let classes = {
+        correct: this.submitted && this.correct,
+        incorrect: this.submitted && !this.correct,
+      };
+      return (h("div", { class: classes, ref: el => (this.containerRef = el) }, h("div", { hidden: true }, h("slot", null)), this.renderQuestion(), this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
+    }
+    else {
+      return h("p", null, "No question found.");
+    }
+  }
+  get el() { return getElement(this); }
+};
+SparkleQuizOld.style = sparkleQuizOldCss;
+
+export { SparkleQuizOld as sparkle_quiz_old };

package/dist/esm/sparkle-quiz.entry.js

@@ -0,0 +1,99 @@
+import { r as registerInstance, i as createEvent, h, e as getElement } from './index-c04b9ed5.js';
+import { A as AssetsService } from './assets.service-def1d63c.js';
+import { E as EnvironmentConfigService } from './environment-config.service-b191f276.js';
+
+const sparkleQuizCss = "sparkle-quiz-v1{display:block;font-family:var(--font-family);--sparkle-quiz-question-container-padding:10px 0px;--sparkle-quiz-question-container-margin:0px;--sparkle-quiz-question-text-padding:10px 0px;--sparkle-quiz-option-border:2px solid var(--line-rule-color);--sparkle-quiz-selected-option-border:2px solid var(--text-color--dark);--sparkle-quiz-option-border-radius:4px;--sparkle-quiz-option-padding:5px 10px;--sparkle-quiz-option-width:100%;--sparkle-quiz-error-bg-color:#fbaeae;--sparkle-quiz-success-bg-color:#fbaeae;padding:var(--sparkle-quiz-question-container-padding);margin:var(--sparkle-quiz-question-container-margin)}.question-text{padding:var(--sparkle-quiz-question-text-padding)}.option{padding:5px 0px}.number{padding:0px 14px;border:1px solid #ebebeb;border-radius:4px;margin-right:10px;font-size:14px;width:14px;display:inline-flex;justify-content:center}.feedback-container{padding:10px;border-radius:4px}.incorrect .feedback-container{background-color:var(--sparkle-quiz-error-bg-color, #fbaeae)}.correct .feedback-container{background-color:var(--sparkle-quiz-success-bg-color, #fbaeae)}";
+
+const SparkleQuiz = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizAnswerChanged = createEvent(this, "quizAnswerChanged", 7);
+  }
+  async loadQuestion() {
+    if (this.quizData) {
+      this.question = this.quizData[+this.questionId];
+    }
+  }
+  async componentWillLoad() { }
+  async componentDidLoad() {
+    const config = EnvironmentConfigService.getInstance().get('sparkle');
+    this.quizData = await AssetsService.getInstance().loadJsonFile(config.quizPath);
+    await this.loadQuestion();
+    this.quizAnswerChanged.emit({
+      question: null,
+      answer: '1',
+    });
+  }
+  quizInputChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizFeedbackChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizSelectChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizOpinionChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  getQuestionFeedback() {
+    if (this.question.questionType == 'MULTIPLE-CHOICE') {
+      const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
+      return feedbacks.length > 0 && feedbacks.map(feedback => h("small", null, feedback));
+    }
+    else if (this.question.questionType == 'FEEDBACK' || this.question.questionType == 'TEXT') {
+      return this.question.feedback && h("small", null, " ", this.question.feedback);
+    }
+  }
+  showAnswerStatus() {
+    return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
+  }
+  renderQuestion() {
+    if (this.question.questionType == 'MULTIPLE-CHOICE') {
+      return h("sparkle-quiz-select", { question: this.question, allowMultiple: true });
+    }
+    else if (this.question.questionType == 'FEEDBACK') {
+      return h("sparkle-quiz-feedback", { question: this.question });
+    }
+    else if (this.question.questionType == 'TEXT') {
+      return h("sparkle-quiz-input", { question: this.question });
+    }
+    else if (this.question.questionType == 'OPINION') {
+      return h("sparkle-quiz-opinion", { question: this.question });
+    }
+    else if (this.question.questionType == 'POLL') {
+      return h("sparkle-quiz-poll", { question: this.question });
+    }
+  }
+  render() {
+    if (this.question) {
+      let classes = {
+        correct: this.submitted && this.correct,
+        incorrect: this.submitted && !this.correct,
+      };
+      return (h("div", { class: classes }, this.renderQuestion(), this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
+    }
+    else {
+      return h("p", null, "No question found.");
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "questionId": ["loadQuestion"]
+  }; }
+};
+SparkleQuiz.style = sparkleQuizCss;
+
+export { SparkleQuiz as sparkle_quiz };

package/dist/esm/sparkle-select.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, i as createEvent, h, H as Host } from './index-c04b9ed5.js';
+
+const selectCss = ".Select{cursor:pointer;display:inline-block;font-weight:500}.Select .Dropdown-button{align-items:center;border:solid 1px #dee3ea;border-radius:6px;display:inline-flex;justify-content:space-between;min-width:100px;padding:0.5em 1em}.Select .Dropdown-panel{padding:0.5em 0}.Select .Dropdown-arrow{margin-left:0.5em}.Select-option{--bg-alpha:0;background-color:rgba(0, 0, 0, var(--bg-alpha));padding:0.5em 1.5em}.Select-option:focus{--bg-alpha:0.025;outline:none}.Select-option--selected{--bg-alpha:0.05}.Select-option--selected:focus{--bg-alpha:0.075}@media (hover: hover){.Select-option:hover{--bg-alpha:0.025}.Select-option--selected:hover{--bg-alpha:0.075}}";
+
+const SparkleSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selection = createEvent(this, "selection", 7);
+    this.optionRenderer = (option) => option;
+    this.select = (option) => {
+      this.selected = option;
+    };
+    this.toOption = (option) => {
+      const isSelected = this.selected === option;
+      const classNames = {
+        'Select-option': true,
+        'Select-option--selected': isSelected
+      };
+      const handleClick = () => {
+        this.select(option);
+        this.dropdown.close();
+      };
+      const handleKeyUp = (event) => {
+        if (event.key === 'Enter') {
+          this.select(option);
+          this.dropdown.focus();
+        }
+      };
+      return (h("div", { class: classNames, role: "menuitemradio", "aria-checked": isSelected ? 'true' : 'false', tabindex: "0", onClick: handleClick, onKeyUp: handleKeyUp }, this.optionRenderer(option)));
+    };
+  }
+  handleSelect(option) {
+    this.selection.emit(option);
+  }
+  componentWillLoad() {
+    this.selected = typeof this.initializer === 'function'
+      ? this.initializer(this.options)
+      : this.options[0];
+  }
+  hostData() {
+    return {
+      class: {
+        'Select': true
+      }
+    };
+  }
+  __stencil_render() {
+    return (h("sparkle-dropdown", { ref: el => { this.dropdown = el; }, label: this.optionRenderer(this.selected) }, this.options.map(this.toOption)));
+  }
+  static get watchers() { return {
+    "selected": ["handleSelect"]
+  }; }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleSelect.style = selectCss;
+
+export { SparkleSelect as sparkle_select };

package/dist/esm/sparkle-sidebar.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, e as getElement } from './index-c04b9ed5.js';
+
+const sidebarCss = "sparkle-sidebar{--sparkle-spacing-size-lg:1rem;--sparkle-transition-med:0.5s;--sparkle-color-dark-lighter:89, 109, 127;--sparkle-font-size-md:1.25rem;--sparkle-spacing-size-none:0;--sparkle-spacing-size-xxxs:0.0625rem;--sparkle-color-light-base:1197, 209, 218;--sparkle-font-size-lg:1.5rem;--sparkle-color-dark-base:55, 68, 79}.sparkle-sidebar{height:100%;max-width:90%;position:fixed;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;background-color:#fff;padding:var(--sparkle-spacing-size-lg);-webkit-transition:all var(--sparkle-transition-med) ease-in-out;transition:all var(--sparkle-transition-med) ease-in-out}.sparkle-sidebar.left{border-right:var(--sparkle-spacing-size-xxxs) solid rgba(var(--sparkle-color-dark-lighter), 1)}.sparkle-sidebar.left.size-sm{width:16rem;left:-16rem}.sparkle-sidebar.left.size-md{width:22.5rem;left:-22.5rem}.sparkle-sidebar.left.size-lg{width:30rem;left:-30rem}.sparkle-sidebar.left.size-xl{width:45rem;left:-45rem}.sparkle-sidebar.left.show{visibility:visible;left:0}.sparkle-sidebar.right{border-right:var(--sparkle-spacing-size-xxxs) solid rgba(var(--sparkle-color-dark-lighter), 1)}.sparkle-sidebar.right.size-sm{width:16rem;right:-16rem}.sparkle-sidebar.right.size-md{width:22.5rem;right:-22.5rem}.sparkle-sidebar.right.size-lg{width:30rem;right:-30rem}.sparkle-sidebar.right.size-xl{width:45rem;right:-45rem}.sparkle-sidebar.right.show{visibility:visible;right:0}.sparkle-sidebar .drawer-header{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:center;align-content:center;border-bottom:var(--sparkle-spacing-size-xxxs) solid rgba(var(--sparkle-color-light-base), 1);font-size:var(--sparkle-font-size-lg);color:rgba(var(--sparkle-color-dark-base), 1)}.sparkle-sidebar .drawer-header .drawer-title{line-height:1}.sparkle-sidebar .drawer-header .drawer-close .ks-button .button{padding:var(--sparkle-spacing-size-none)}.sparkle-sidebar .drawer-header .drawer-close .ks-button .button .button-text{display:-ms-inline-flexbox;display:inline-flex}.sparkle-sidebar .drawer-header .drawer-close .ks-button .button .icon{font-size:var(--sparkle-font-size-md)}.sparkle-sidebar .drawer-body{padding-top:var(--sparkle-spacing-size-lg);padding-bottom:var(--sparkle-spacing-size-lg)}";
+
+const SparkleSideBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.position = 'left';
+    this.size = 'sm';
+  }
+  async hide() {
+    this.isShowing = false;
+    await this.$overlay.hide();
+  }
+  async show() {
+    await this.$overlay.show();
+    this.isShowing = true;
+  }
+  componentDidRender() {
+    const $scrim = this.$overlay.querySelector('.scrim');
+    $scrim.addEventListener('click', () => this.hide());
+  }
+  overlayHiddenHandler() {
+    this.isShowing = false;
+  }
+  render() {
+    let classes = {
+      'sparkle-sidebar': true,
+      [`size-${this.size}`]: true,
+      [this.position]: true,
+      'show': this.isShowing
+    };
+    return (h("sparkle-overlay", { onHidden: () => this.overlayHiddenHandler(), ref: el => this.$overlay = el }, h("aside", { class: classes, ref: el => this.$drawer = el }, h("header", { class: "drawer-header" }, h("h3", { class: "drawer-title" }, this.headerText), h("ion-button", { onClick: () => this.hide(), class: "drawer-close", color: "dark" }, h("ion-icon", { name: "close-outline" }))), h("div", { class: "drawer-body" }, h("slot", null)))));
+  }
+  get $el() { return getElement(this); }
+};
+SparkleSideBar.style = sidebarCss;
+
+export { SparkleSideBar as sparkle_sidebar };

package/dist/esm/sparkle-tab.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';
+
+const SparkleTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selected = false;
+  }
+  hostData() {
+    return {
+      role: 'tabpanel',
+      class: {
+        'Tabs-tab': true
+      }
+    };
+  }
+  __stencil_render() {
+    return h("slot", null);
+  }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+
+export { SparkleTab as sparkle_tab };

package/dist/esm/sparkle-table-of-contents.entry.js

@@ -0,0 +1,67 @@
+import { r as registerInstance, h } from './index-c04b9ed5.js';
+
+const tableOfContentsCss = "sparkle-table-of-contents{display:block;font-size:13px;margin-bottom:2rem}sparkle-table-of-contents .Nav-header{color:var(--text-color--lighter);font-size:0.75em;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding-left:0}sparkle-table-of-contents ul{padding:0;list-style:none;line-height:1.23em}sparkle-table-of-contents .Nav-link{padding-left:0;margin-left:0}sparkle-table-of-contents a{color:inherit;display:inline-block;transition:.2s color, .3s transform ease-out}sparkle-table-of-contents .Nav-link.selected a{color:var(--accent-color);transform:translateX(2px)}";
+
+const SparkleTableOfContents = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.links = [];
+    this.label = 'Contents';
+    this.basepath = '';
+    this.itemOffsets = [];
+    this.selectedId = null;
+    this.pageWidth = document.body.offsetWidth;
+    this.toItem = ({ text, href }) => {
+      return (h("li", null, h("stencil-route-link", { url: `${this.basepath}${href}`, class: `Nav-link ${this.selectedId === href ? 'selected' : ''}` }, text)));
+    };
+  }
+  function() {
+    if (this.pageWidth < 1234) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      const itemIndex = this.itemOffsets.findIndex(item => item.topOffset > window.scrollY);
+      if (itemIndex === 0 ||
+        // tslint:disable-next-line
+        this.itemOffsets[this.itemOffsets.length - 1] === undefined) {
+        this.selectedId = null;
+      }
+      else if (itemIndex === -1) {
+        this.selectedId = this.itemOffsets[this.itemOffsets.length - 1].id;
+      }
+      else {
+        this.selectedId = this.itemOffsets[itemIndex - 1].id;
+      }
+    });
+  }
+  updateItemOffsets() {
+    requestAnimationFrame(() => {
+      this.pageWidth = document.body.offsetWidth;
+      this.itemOffsets = this.links.map(link => {
+        const item = document.getElementById(link.href.substring(1));
+        return {
+          id: link.href,
+          topOffset: item.getBoundingClientRect().top + window.scrollY
+        };
+      });
+    });
+  }
+  componentDidLoad() {
+    this.updateItemOffsets();
+  }
+  render() {
+    if (this.links.length < 1) {
+      return null;
+    }
+    return [
+      h("strong", { class: "Nav-header" }, this.label),
+      h("nav", null, h("ul", { class: "Nav-subnav" }, this.links.map(this.toItem)))
+    ];
+  }
+  static get watchers() { return {
+    "links": ["updateItemOffsets"]
+  }; }
+};
+SparkleTableOfContents.style = tableOfContentsCss;
+
+export { SparkleTableOfContents as sparkle_table_of_contents };

package/dist/esm/sparkle-tabs.entry.js

@@ -0,0 +1,62 @@
+import { r as registerInstance, h, e as getElement, H as Host } from './index-c04b9ed5.js';
+
+const tabsCss = ".Tabs,.Tabs-tab{display:block}.Tabs-tab:not([selected]){display:none}.Tabs-header{border-bottom:solid 1px rgba(0, 32, 88, 0.1);white-space:nowrap}.Tabs-button{--bg-alpha:0;appearance:none;background-color:rgba(0, 0, 0, var(--bg-alpha));border:none;color:var(--text-color--light);cursor:pointer;font-family:inherit;font-size:10px;font-weight:600;letter-spacing:0.04em;padding:1rem;text-transform:uppercase;transform:translateY(1px)}.Tabs-button:first-child{border-top-left-radius:6px}.Tabs-button:last-child{border-top-right-radius:6px}.Tabs-button:focus{outline:none}.Tabs-button:focus{--bg-alpha:0.015}@media (hover: hover){.Tabs-button:hover{--bg-alpha:0.015}}.Tabs-button:active{--bg-alpha:0.03}.Tabs-button.is-selected{border-bottom:solid 1px currentColor;color:var(--accent-color)}.Tabs-tab sparkle-code pre{margin-top:0}";
+
+const SparkleTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selected = null;
+    this.tabs = [];
+    this.toTabButton = (tab) => {
+      const label = tab.getAttribute('tab');
+      const isSelected = this.selected === tab;
+      const buttonClass = {
+        'Tabs-button': true,
+        'is-selected': isSelected
+      };
+      return (h("button", { role: "tab", "aria-selected": isSelected ? 'true' : 'false', onClick: () => this.select(tab), class: buttonClass }, label));
+    };
+  }
+  // if an event with a name that matches the 'listenFor' property is heard,
+  // check the tabs to see if the event has a value that matches a tab title
+  // The original purpose for this is the Framework Selection dropdown
+  listenForFrameworkSelection(event) {
+    if (typeof this.listenFor !== 'undefined' && event.detail.key === this.listenFor) {
+      this.tabs.forEach(tab => {
+        if (tab.tab.toLowerCase() === event.detail.value.toLowerCase()) {
+          this.select(tab);
+        }
+      });
+    }
+  }
+  componentDidLoad() {
+    this.tabs = Array.from(this.el.querySelectorAll('sparkle-tab'));
+    this.select(this.tabs.find(t => t.hasAttribute('selected')) || this.tabs[0]);
+  }
+  select(tab) {
+    if (this.selected !== null) {
+      this.selected.removeAttribute('selected');
+    }
+    this.selected = tab;
+    this.selected.setAttribute('selected', '');
+  }
+  hostData() {
+    return {
+      role: 'tablist',
+      class: {
+        'Tabs': true
+      }
+    };
+  }
+  __stencil_render() {
+    return [
+      h("header", { class: "Tabs-header" }, this.tabs.map(this.toTabButton)),
+      h("slot", null)
+    ];
+  }
+  get el() { return getElement(this); }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleTabs.style = tabsCss;
+
+export { SparkleTabs as sparkle_tabs };

package/dist/esm/sparkle-video-player.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h } from './index-c04b9ed5.js';
+
+const sparkleVideoPlayerCss = "";
+
+const SparkleVideoPlayer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.type = 'video/mp4';
+    this.width = 400;
+    this.controls = true;
+  }
+  render() {
+    return (h("video", { width: this.width, controls: this.controls, preload: "metadata" }, h("source", { src: this.src, type: this.type })));
+  }
+};
+SparkleVideoPlayer.style = sparkleVideoPlayerCss;
+
+export { SparkleVideoPlayer as sparkle_video_player };