@sparkle-learning/core 0.0.26 → 0.0.29

package/dist/cjs/{feed.service-518d18fd.js → util-b0e2ec9f.js}

@@ -1,7 +1,5 @@
 'use strict';
 
-const auth_store = require('./auth.store-aba3d22f.js');
-
 var MILLISECONDS_IN_MINUTE = 60000;
 
 /**
@@ -5667,127 +5665,11 @@ class SparkleGlobal {
 SparkleGlobal.MY_GOALS_APP_ID = 1;
 SparkleGlobal.MY_HEALTH_APP_ID = 2;
 SparkleGlobal.MY_MOOD_APP_ID = 3;
+SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE = "SPARKLE_CLASSROOM_MODE";
 function date(date) {
   return dateFns.format(new Date(date), 'DD MMM YYYY');
 }
 
-const { state, onChange } = auth_store.createStore({
-  goals: [],
-  goalsLoading: false,
-  goalLoading: false
-});
-const goalStore = { state, onChange };
-
-class AppDataService {
-  constructor() { }
-  static getInstance() {
-    if (!AppDataService.instance) {
-      AppDataService.instance = new AppDataService();
-    }
-    return AppDataService.instance;
-  }
-  async getAllAppData(appId) {
-    let result = await auth_store.HttpService.http.get(`api/v1/AppData/${appId}`);
-    return result;
-  }
-  async createAppData(payload) {
-    let result = await auth_store.HttpService.http.post(`api/v1/AppData/`, payload);
-    return result;
-  }
-  async updateAppData(payload) {
-    let result = await auth_store.HttpService.http.put(`api/v1/AppData/${payload.Id}`, payload);
-    return result;
-  }
-  async getAllGoals() {
-    goalStore.state.goalsLoading = true;
-    let result = await this.getAllAppData(SparkleGlobal.MY_GOALS_APP_ID);
-    if (result) {
-      goalStore.state.goals = result.Data.map(item => {
-        return Object.assign(Object.assign({}, item), { AppData: JSON.parse(item.AppJsonData) });
-      });
-      goalStore.state.goalsLoading = false;
-    }
-    return result;
-  }
-  async createGoal(payload) {
-    goalStore.state.goalLoading = true;
-    let result = await this.createAppData(payload);
-    if (result) {
-      result.Data.AppData = JSON.parse(result.Data.AppJsonData);
-      goalStore.state.goals = [...goalStore.state.goals, result.Data];
-      goalStore.state.goalLoading = false;
-    }
-    return result;
-  }
-  async updateGoal(payload) {
-    goalStore.state.goalLoading = true;
-    let result = await this.updateAppData(payload);
-    if (result) {
-      result.Data.AppData = JSON.parse(result.Data.AppJsonData);
-      goalStore.state.goals = goalStore.state.goals.map(item => {
-        if (item.Id == result.Data.Id) {
-          return Object.assign(Object.assign({}, result.Data), { AppData: JSON.parse(result.Data.AppJsonData) });
-        }
-        return item;
-      });
-      goalStore.state.goalLoading = false;
-    }
-    return result;
-  }
-}
-
-const { state: state$1, reset } = auth_store.createStore({
-  posts: [],
-  postsLoading: false,
-  createPostLoading: false,
-  postIdLoading: null
-});
-const feedStore = { state: state$1, reset };
-
-class FeedService {
-  constructor() { }
-  static getInstance() {
-    if (!FeedService.instance) {
-      FeedService.instance = new FeedService();
-    }
-    return FeedService.instance;
-  }
-  async getAllPosts() {
-    feedStore.state.postsLoading = true;
-    let result = await auth_store.HttpService.http.get(`api/v1/Feed/GetAll`);
-    if (result) {
-      feedStore.state.posts = result.Data;
-      feedStore.state.postsLoading = false;
-    }
-    return result;
-  }
-  async createPost(payload) {
-    feedStore.state.createPostLoading = true;
-    let result = await auth_store.HttpService.http.post(`api/v1/Feed/PostFeed`, payload);
-    if (result) {
-      feedStore.state.posts = [result.Data, ...feedStore.state.posts];
-      feedStore.state.createPostLoading = false;
-    }
-    return result;
-  }
-  async createPostComment(payload) {
-    feedStore.state.postIdLoading = payload.PostId;
-    let result = await auth_store.HttpService.http.post(`api/v1/Feed/Comment`, payload);
-    if (result) {
-      feedStore.state.posts = feedStore.state.posts.map((item) => {
-        if (item.Id == result.Data.ClassFeedPostId) {
-          return Object.assign(Object.assign({}, item), { Comments: [...item.Comments, result.Data] });
-        }
-        return item;
-      });
-      feedStore.state.postIdLoading = null;
-    }
-    return result;
-  }
-}
-
-exports.AppDataService = AppDataService;
-exports.FeedService = FeedService;
 exports.GetGoalAppData = GetGoalAppData;
 exports.MyGoalTemplate = MyGoalTemplate;
 exports.MyGoalTemplateJSON = MyGoalTemplateJSON;
@@ -5797,6 +5679,4 @@ exports.MyMoodTemplate = MyMoodTemplate;
 exports.MyMoodTemplateJSON = MyMoodTemplateJSON;
 exports.SparkleGlobal = SparkleGlobal;
 exports.date = date;
-exports.feedStore = feedStore;
-exports.goalStore = goalStore;
 exports.sample = sample;

package/dist/collection/collection-manifest.json

@@ -21,6 +21,7 @@
     "./components/mini-apps/sparkle-mood/sparkle-mood.js",
     "./components/modal-image/modal-image.js",
     "./components/sparkle-animation-player/sparkle-animation-player.js",
+    "./components/sparkle-character-intro/sparkle-character-intro.js",
     "./components/sparkle-compass/sparkle-compass.js",
     "./components/sparkle-compass/sparkle-compass-post/sparkle-compass-post.js",
     "./components/sparkle-course-root/sparkle-course-root.js",

package/dist/collection/components/sparkle-animation-player/sparkle-animation-player.js

@@ -1,29 +1,35 @@
-import { Component, State, Prop, Method, Element, getAssetPath, Listen, h } from "@stencil/core";
-import { CaptionParser } from "./caption-parser";
+import { Component, State, Prop, Method, Element, getAssetPath, Listen, h } from '@stencil/core';
+import { get } from '../../services/core/localstorage.service';
+import { SparkleGlobal } from '../../util';
+import { CaptionParser } from './caption-parser';
 export class SparkleAnimationPlayer {
   constructor() {
     this.showCaption = false;
     this.paused = true;
     this.dataLoaded = false;
     this.currentProgressWidth = 0;
-    this.captionText = "";
-    this.firstFramePath = "";
+    this.captionText = '';
+    this.firstFramePath = '';
     this.isBusy = false;
-    this.animationVideoProgress = "0";
+    this.animationVideoProgress = '0';
     this.captionData = {};
   }
   closedCaptionChange(event) {
     this.showCaption = !this.showCaption;
   }
+  onClassRoomModeChanged(event) {
+    this.classMode = event.detail;
+  }
   componentWillLoad() {
     // if (!this.isScriptLoaded(this.src)) {
-    this.classMode = this.initialClassMode;
-    const script = document.createElement("script");
-    this.firstFramePath = this.src.replace(".js", ".png");
+    this.classMode = get(SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE);
+    //this.classMode = this.initialClassMode;
+    const script = document.createElement('script');
+    this.firstFramePath = this.src.replace('.js', '.png');
     script.src = this.src;
     //script.async = true;
     document.body.appendChild(script);
-    this.readTextFile(this.src.replace(".js", ".srt"));
+    this.readTextFile(this.src.replace('.js', '.srt'));
     this.rergisterSoundControls();
     // }
     // else {
@@ -33,7 +39,7 @@ export class SparkleAnimationPlayer {
   readTextFile(fileName) {
     let that = this;
     var rawFile = new XMLHttpRequest();
-    rawFile.open("GET", fileName, false);
+    rawFile.open('GET', fileName, false);
     rawFile.onreadystatechange = function () {
       if (rawFile.readyState === 4) {
         if (rawFile.status === 200 || rawFile.status == 0) {
@@ -55,15 +61,15 @@ export class SparkleAnimationPlayer {
     return false;
   }
   rergisterSoundControls() {
-    window["playSound"] = (id, loop) => {
+    window['playSound'] = (id, loop) => {
       if (this.sound) {
         this.sound.stop();
       }
       this.sound = createjs.Sound.play(id, { interrupt: createjs.Sound.INTERRUPT_EARLY, loop: 0, volume: 1 });
       return this.sound;
     };
-    window["resetToStart"] = () => {
-      console.log("reset");
+    window['resetToStart'] = () => {
+      console.log('reset');
       this.rewindAnimationToStart();
     };
   }
@@ -78,15 +84,13 @@ export class SparkleAnimationPlayer {
   }
   handleFileLoad(evt) {
     var images = this.comp.getImages();
-    if (evt && (evt.item.type == "image")) {
+    if (evt && evt.item.type == 'image') {
       images[evt.item.id] = evt.result;
     }
   }
   handleQueueProgress(that) {
-    return (progress) => {
-      this.animationVideoProgress = progress.loaded
-        ? (progress.loaded * 100).toFixed(0)
-        : "0";
+    return progress => {
+      this.animationVideoProgress = progress.loaded ? (progress.loaded * 100).toFixed(0) : '0';
       if (progress.loaded == 1) {
         this.doneLoading();
       }
@@ -98,18 +102,20 @@ export class SparkleAnimationPlayer {
     //var lib = this.comp.getLibrary();
     var ssMetadata = this.library.ssMetadata;
     for (var i = 0; i < ssMetadata.length; i++) {
-      ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames });
+      ss[ssMetadata[i].name] = new createjs.SpriteSheet({ images: [queue.getResult(ssMetadata[i].name)], frames: ssMetadata[i].frames });
     }
     var jsFileName = this.src.substring(this.src.lastIndexOf('/') + 1, this.src.lastIndexOf('.'));
-    this.exportRoot = new this.library[jsFileName];
+    this.exportRoot = new this.library[jsFileName]();
     this.stage = new this.library.Stage(this.canvas);
     this.makeResponsive(true, 'both', false, 1);
     AdobeAn.compositionLoaded(this.library.properties.id);
     this.stage.addChild(this.exportRoot);
     createjs.Ticker.framerate = this.library.properties.fps;
     createjs.Ticker.paused = false;
-    createjs.Ticker.addEventListener("tick", this.stage);
-    createjs.Ticker.addEventListener("tick", (evt) => { this.tickHandler(evt); });
+    createjs.Ticker.addEventListener('tick', this.stage);
+    createjs.Ticker.addEventListener('tick', evt => {
+      this.tickHandler(evt);
+    });
     console.log(createjs.Ticker);
   }
   loadAnimation() {
@@ -117,23 +123,27 @@ export class SparkleAnimationPlayer {
     if (!createjs.Sound.initializeDefaultPlugins()) {
       return;
     }
-    this.canvas = this.el.querySelector(".video-canvas");
-    this.anim_container = this.el.querySelector(".canvas-container");
+    this.canvas = this.el.querySelector('.video-canvas');
+    this.anim_container = this.el.querySelector('.canvas-container');
     this.comp = AdobeAn.getComposition(this.composition);
-    this.canvas.style.width = "100%";
+    this.canvas.style.width = '100%';
     console.log(this.canvas.offsetWidth);
-    this.canvas.style.height = this.canvas.offsetWidth + "px";
-    this.anim_container.style.height = this.canvas.offsetWidth + "px";
+    this.canvas.style.height = this.canvas.offsetWidth + 'px';
+    this.anim_container.style.height = this.canvas.offsetWidth + 'px';
     this.library = this.comp.getLibrary();
     this.loader = new createjs.LoadQueue(false);
     this.loader.setMaxConnections(3);
     this.loader.maintainScriptOrder = true;
     this.loader.installPlugin(createjs.Sound);
-    this.loader.addEventListener("complete", (evt) => { this.handleComplete(evt); });
-    this.loader.addEventListener("fileload", (evt) => { this.handleFileLoad(evt); });
-    this.loader.addEventListener("progress", this.handleQueueProgress(this));
+    this.loader.addEventListener('complete', evt => {
+      this.handleComplete(evt);
+    });
+    this.loader.addEventListener('fileload', evt => {
+      this.handleFileLoad(evt);
+    });
+    this.loader.addEventListener('progress', this.handleQueueProgress(this));
     //TODO :can't figure out https://github.com/CreateJS/SoundJS/issues/283
-    this.loader.loadManifest(this.library.properties.manifest, true, this.src.substring(0, this.src.lastIndexOf("/") + 1));
+    this.loader.loadManifest(this.library.properties.manifest, true, this.src.substring(0, this.src.lastIndexOf('/') + 1));
   }
   playButtonAction() {
     if (!this.dataLoaded) {
@@ -163,7 +173,7 @@ export class SparkleAnimationPlayer {
         st.paused = newState;
       }
       createjs.Ticker.paused = newState;
-      createjs.Ticker.addEventListener("tick", this.stage);
+      createjs.Ticker.addEventListener('tick', this.stage);
       this.paused = newState;
       // let stage = this.stage.children[0];
       // stage.gotoAndStop(0);
@@ -181,7 +191,7 @@ export class SparkleAnimationPlayer {
         st.paused = newState;
       }
       createjs.Ticker.paused = newState;
-      createjs.Ticker.removeEventListener("tick", this.stage);
+      createjs.Ticker.removeEventListener('tick', this.stage);
       this.paused = newState;
     }
   }
@@ -239,16 +249,16 @@ export class SparkleAnimationPlayer {
         sRatio = Math.max(xRatio, yRatio);
       }
     }
-    var anim_container = this.el.querySelector(".canvas-container");
+    var anim_container = this.el.querySelector('.canvas-container');
     // this.canvas.width = w * pRatio * sRatio;
     // this.canvas.height = h * pRatio * sRatio;
     // this.canvas.style.width = this.dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px';
     // this.canvas.style.height = anim_container.style.height = this.dom_overlay_container.style.height = h * sRatio + 'px';
     this.canvas.width = w * pRatio * sRatio;
     this.canvas.height = h * pRatio * sRatio;
-    this.canvas.style.width = "100%";
-    this.canvas.style.height = this.canvas.offsetWidth + "px";
-    anim_container.style.height = this.canvas.offsetWidth + "px";
+    this.canvas.style.width = '100%';
+    this.canvas.style.height = this.canvas.offsetWidth + 'px';
+    anim_container.style.height = this.canvas.offsetWidth + 'px';
     this.stage.scaleX = pRatio * sRatio;
     this.stage.scaleY = pRatio * sRatio;
     lastW = iw;
@@ -256,7 +266,7 @@ export class SparkleAnimationPlayer {
     lastS = sRatio;
     var newWidth = this.canvas.offsetWidth;
     this.sizeOfCanvas = newWidth;
-    var progressBar = this.el.querySelector(".progressBar");
+    var progressBar = this.el.querySelector('.progressBar');
     this.sizeofProgressBar = progressBar.offsetWidth;
     this.stage.tickOnUpdate = false;
     this.stage.update();
@@ -265,14 +275,12 @@ export class SparkleAnimationPlayer {
   tickHandler(event) {
     if (!event.paused) {
       let stage = this.stage.children[0];
-      this.timeline = stage["timeline"];
+      this.timeline = stage['timeline'];
       if (this.captionData[Math.floor(this.timeline.position / this.library.properties.fps)]) {
         this.captionText = this.captionData[Math.floor(this.timeline.position / this.library.properties.fps)];
       }
       if (this.timeline.position % 10 == 0) {
-        this.currentProgressWidth = parseFloat((this.timeline.position /
-          this.timeline.duration *
-          this.sizeofProgressBar).toFixed(0));
+        this.currentProgressWidth = parseFloat(((this.timeline.position / this.timeline.duration) * this.sizeofProgressBar).toFixed(0));
       }
     }
   }
@@ -282,7 +290,7 @@ export class SparkleAnimationPlayer {
       st.paused = true;
     }
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     if (newPosition < 0) {
       newPosition = 0;
     }
@@ -308,7 +316,7 @@ export class SparkleAnimationPlayer {
   rewindAnimationToStart() {
     this.paused = true;
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     let newPosition = 0;
     // var soundPosition = this.sound.position + 5000;
     // console.log("video", newPosition / 1000);
@@ -337,8 +345,8 @@ export class SparkleAnimationPlayer {
   rewindAnimation(event) {
     event.stopPropagation();
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
-    let newPosition = Math.round(event.offsetX / this.sizeofProgressBar * timeline.duration);
+    let timeline = stage['timeline'];
+    let newPosition = Math.round((event.offsetX / this.sizeofProgressBar) * timeline.duration);
     // var soundPosition = this.sound.position + 5000;
     // console.log("video", newPosition / 1000);
     // console.log("sound", soundPosition / 1000);
@@ -347,7 +355,7 @@ export class SparkleAnimationPlayer {
   rewind5Sec() {
     let fps = this.library.properties.fps;
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     let newPosition = timeline.position - fps * 5;
     //var soundPosition = this.sound.position - 5000;
     this.rewindAnimationTo(newPosition);
@@ -355,7 +363,7 @@ export class SparkleAnimationPlayer {
   fastForward5Sec() {
     let fps = this.library.properties.fps;
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     let newPosition = timeline.position + fps * 5;
     // var soundPosition = this.sound.position + 5000;
     this.rewindAnimationTo(newPosition);
@@ -387,39 +395,37 @@ export class SparkleAnimationPlayer {
       h("div", { class: "canvas-container", id: "canvas-container" },
         !this.classMode ? (h("div", null,
           h("canvas", { class: "video-canvas", onClick: () => this.playButtonAction() }),
-          this.showCaption ?
-            h("div", { class: "caption" }, this.captionText) : "")) : (""),
-        !this.dataLoaded ? (h("img", { class: "frame-img", src: this.firstFramePath })) : (""),
-        this.classMode ? (h("img", { class: "overlay-img", src: getAssetPath(`./assets/play-button-disabled-overlay.png`) })) : (""),
-        !this.classMode && this.paused ? (h("img", { class: "overlay-img", onClick: () => this.playButtonAction(), src: getAssetPath(`./assets/play-button-overlay.png`) })) : (""),
+          this.showCaption ? h("div", { class: "caption" }, this.captionText) : '')) : (''),
+        !this.dataLoaded ? h("img", { class: "frame-img", src: this.firstFramePath }) : '',
+        this.classMode ? h("img", { class: "overlay-img", src: getAssetPath(`./assets/play-button-disabled-overlay.png`) }) : '',
+        !this.classMode && this.paused ? h("img", { class: "overlay-img", onClick: () => this.playButtonAction(), src: getAssetPath(`./assets/play-button-overlay.png`) }) : '',
         this.isBusy ? (h("div", { class: "loading-container" },
           h("div", { class: "uil-ring-css" },
             h("div", null),
             h("a", null,
               "Loading ",
               this.animationVideoProgress,
-              "%")))) : ("")),
+              "%")))) : ('')),
       this.dataLoaded ? (h("div", { class: "navControls" },
-        h("div", { class: "progressBar", onClick: (ev) => this.rewindAnimation(ev) },
-          h("div", { class: "currentProgress", style: { width: this.currentProgressWidth + "px" } })),
+        h("div", { class: "progressBar", onClick: ev => this.rewindAnimation(ev) },
+          h("div", { class: "currentProgress", style: { width: this.currentProgressWidth + 'px' } })),
         h("div", { class: "button-panel" },
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.rewind5Sec() },
-            " ",
+            ' ',
             h("ion-icon", { name: "play-back-outline" }),
-            " "),
+            ' '),
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.playButtonAction() },
-            " ",
+            ' ',
             this.paused ? (h("ion-icon", { name: "pause-outline" })) : (h("ion-icon", { name: "play-outline" })
             // <ion-icon src="/assets/img/play-symbol.svg"></ion-icon>
             )),
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.fastForward5Sec() },
-            " ",
-            h("ion-icon", { name: "play-forward-outline" }))))) : (""),
-      (this.dataLoaded && this.captionText) ?
-        h("div", { class: "closed-caption" },
-          h("ion-item", { lines: "none" },
-            h("ion-label", null, "Closed Caption"),
-            h("ion-toggle", { slot: "end", color: "primary", checked: this.showCaption }))) : ""));
+            ' ',
+            h("ion-icon", { name: "play-forward-outline" }))))) : (''),
+      this.dataLoaded && this.captionText ? (h("div", { class: "closed-caption" },
+        h("ion-item", { lines: "none" },
+          h("ion-label", null, "Closed Caption"),
+          h("ion-toggle", { slot: "end", color: "primary", checked: this.showCaption })))) : ('')));
   }
   static get is() { return "sparkle-animation-player"; }
   static get originalStyleUrls() { return {
@@ -569,5 +575,11 @@ export class SparkleAnimationPlayer {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "classRoomModeChanged",
+      "method": "onClassRoomModeChanged",
+      "target": "body",
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.css

@@ -0,0 +1,67 @@
+sparkle-character-intro {
+  --sparkle-character-background-color: #e7e7e7;
+}
+sparkle-character-intro .character-phrase-block {
+  display: flex;
+  width: 100%;
+  min-height: 200px;
+  align-items: center;
+  padding: 20px;
+}
+sparkle-character-intro .character-phrase-block.right {
+  justify-content: flex-end;
+}
+sparkle-character-intro .character-phrase-block.left {
+  justify-content: flex-start;
+}
+sparkle-character-intro .character-phrase-block.left .character-box {
+  order: 2;
+}
+sparkle-character-intro .character-phrase-block.left .character-image-block {
+  order: 1;
+}
+sparkle-character-intro .character-box {
+  min-width: 300px;
+  border-radius: 15px;
+  background: var(--sparkle-character-background-color);
+  color: var(--text-color);
+  padding: 20px;
+  text-align: center;
+  position: relative;
+  box-shadow: 0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);
+}
+sparkle-character-intro .character-box.right:before {
+  content: "";
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  border-left: 15px solid var(--sparkle-character-background-color);
+  border-right: 15px solid transparent;
+  border-top: 15px solid var(--sparkle-character-background-color);
+  border-bottom: 15px solid transparent;
+  right: -16px;
+  top: 0px;
+}
+sparkle-character-intro .character-box.left:before {
+  content: "";
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  border-left: 15px solid transparent;
+  border-right: 15px solid var(--sparkle-character-background-color);
+  border-top: 15px solid var(--sparkle-character-background-color);
+  border-bottom: 15px solid transparent;
+  left: -16px;
+  top: 0px;
+}
+sparkle-character-intro img {
+  max-width: 100%;
+  border: 0;
+}
+sparkle-character-intro .character-image-block {
+  float: left;
+  width: 20%;
+}
+sparkle-character-intro .character-image-block.right {
+  transform: rotateY(180deg);
+}

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.js

@@ -0,0 +1,64 @@
+import { Component, Element, Prop, getAssetPath, h } from '@stencil/core';
+export class SparkleCharacterIntro {
+  constructor() {
+    this.character = 'jen';
+    this.position = 'right';
+  }
+  componentDidLoad() {
+    console.log(this.character);
+  }
+  render() {
+    return (h("div", { class: `character-phrase-block ${this.position}` },
+      h("div", { class: `character-box ${this.position}` },
+        h("slot", null)),
+      h("div", { class: `character-image-block ${this.position}` },
+        h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') }))));
+  }
+  static get is() { return "sparkle-character-intro"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-character-intro.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-character-intro.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "character": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "character",
+      "reflect": false,
+      "defaultValue": "'jen'"
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'right'",
+        "resolved": "\"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "'right'"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}