@sparkle-learning/core 0.0.32 → 0.0.33

package/dist/cjs/sparkle-feedback.cjs.entry.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-bae2a754.js');
-const student_service = require('./student.service-744c3155.js');
+const student_service = require('./student.service-7af424fe.js');
 const overlays = require('./overlays-0a748609.js');
 require('./auth.store-ff3fda09.js');
 require('./environment-config.service-0e02b049.js');
+require('./user.store-3d29139d.js');
 require('./ionic-global-878073d1.js');
 require('./hardware-back-button-f7b5d99e.js');
 require('./helpers-7e28976c.js');

package/dist/cjs/sparkle-goal-progress.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bae2a754.js');
+
+const sparkleGoalProgressCss = ":host{display:block}.progress-container{padding:4px;display:flex;align-items:center}.progress-container>.progress{padding-left:6px}#progress-bar{background:#ccc;border-radius:12px;height:10px;width:100%;padding:0px;margin:0 auto}#progress-bar:after{content:'';display:block;background:var(--ion-color-primary);width:var(--p);height:100%;border-radius:9px}.percentage{padding-left:10px}";
+
+const SparkleGoalProgress = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "progress-container" }, index.h("div", { id: "progress-bar", style: { "--p": this.percentage + "%" } }), index.h("strong", { class: "percentage" }, this.percentage, "%"))));
+  }
+};
+SparkleGoalProgress.style = sparkleGoalProgressCss;
+
+exports.sparkle_goal_progress = SparkleGoalProgress;

package/dist/cjs/sparkle-gww-item.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bae2a754.js');
+const overlays = require('./overlays-0a748609.js');
+const util = require('./util-d383acb8.js');
+require('./ionic-global-878073d1.js');
+require('./hardware-back-button-f7b5d99e.js');
+require('./helpers-7e28976c.js');
+
+var PostVisibility;
+(function (PostVisibility) {
+  PostVisibility[PostVisibility["Private"] = 0] = "Private";
+  PostVisibility[PostVisibility["Public"] = 1] = "Public";
+})(PostVisibility || (PostVisibility = {}));
+
+const sparkleGwwItemCss = ":host{display:block}.Card{background-color:var(--background);border-radius:4px;box-shadow:rgb(2 8 20 / 10%) 0px 0.175em 0.5em, rgb(2 8 20 / 8%) 0px 0.085em 0.175em;color:var(--text-color--light);display:flex;flex-direction:column;font-size:inherit;font-weight:normal;justify-content:flex-start;line-height:1.6;transition:box-shadow 150ms ease 0s, transform 150ms ease 0s, -webkit-box-shadow 150ms ease 0s, -webkit-transform 150ms ease 0s;width:100%;overflow:hidden;margin-bottom:20px;height:auto !important}.footer ion-item ion-avatar{width:30px;height:30px}.comment-overview{padding:0px 16px;text-align:right;cursor:pointer}";
+
+const SparkleGwwItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  async presentModal(comments) {
+    const modal = await overlays.modalController.create({
+      component: "sparkle-gww-comment-list",
+      componentProps: { comments: comments }
+    });
+    await modal.present();
+  }
+  clearCommentField() {
+    this.comment = "";
+  }
+  renderMyMoodTemplate(data) {
+    return (index.h("div", null, index.h("b", null, "Mood:"), " ", data.Mood, index.h("br", null), index.h("b", null, "Level:"), " ", data.Level, index.h("br", null), index.h("img", { src: data.MoodImage }), "`"));
+  }
+  renderMyHealthTemplate(data) {
+    return (index.h("div", null, index.h("b", null, "Heart rate:"), " ", data.HeartRate, " bpm "));
+  }
+  renderMyGoalTemplate(data) {
+    return (index.h("div", null, index.h("b", null, "Goal: "), " ", data.GoalTitle, " ", index.h("br", null), index.h("b", null, "Update Text: "), " ", data.GoalText, " ", index.h("br", null), index.h("sparkle-goal-progress", { percentage: data.GoalProgress })));
+  }
+  renderTemplate() {
+    if (this.post.PostTextJSON) {
+      var parseData = JSON.parse(this.post.PostTextJSON);
+      if (this.post.MiniAppId == util.SparkleGlobal.MY_GOALS_APP_ID) {
+        return this.renderMyGoalTemplate(parseData);
+      }
+      else if (this.post.MiniAppId == util.SparkleGlobal.MY_HEALTH_APP_ID) {
+        return this.renderMyHealthTemplate(parseData);
+      }
+      else if (this.post.MiniAppId == util.SparkleGlobal.MY_MOOD_APP_ID) {
+        return this.renderMyMoodTemplate(parseData);
+      }
+    }
+    else {
+      return ([
+        index.h("div", { innerHTML: this.post.PostText }),
+        this.post.ExternalResourceUrl && index.h("div", null, index.h("img", { src: this.post.ExternalResourceUrl, class: "external-src-image" }))
+      ]);
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'Card': true,
+      } }, index.h("ion-item", { class: "header-item" }, index.h("ion-avatar", { class: "header-avatar", slot: "start" }, index.h("img", { src: this.post.ProfileImageUrl ? this.post.ProfileImageUrl : index.getAssetPath("/assets/img/user.png") })), index.h("div", null, index.h("strong", { class: "requester-name", "text-capitalize": true }, this.post.Name), index.h("div", null, index.h("small", null, " ", util.date(this.post.CreatedOn)))), index.h("div", { slot: "end" }, index.h("ion-icon", { color: "primary", name: this.post.PostVisibility == PostVisibility.Public ? "globe-outline" : "eye-outline" }))), index.h("div", { class: "ion-padding" }, this.renderTemplate()), index.h("div", { class: "footer" }, this.post.Comments.length > 0 &&
+      index.h("div", { class: "comment-overview", slot: "end" }, " ", index.h("small", { onClick: () => this.post.Comments.length > 0 && this.presentModal(this.post.Comments) }, "Comments (", this.post.Comments.length, ")")), this.post.Comments.map((item) => {
+      index.h("ion-item", { class: "comment-box", onClick: () => this.presentModal(this.post.Comments) }, index.h("ion-avatar", { class: "footer-avatar", slot: "start" }, index.h("img", { src: item.ProfileImageUrl ? item.ProfileImageUrl : "/assets/img/user.png" })), index.h("small", null, index.h("b", null, item.Name), " ", item.Comment), index.h("ion-icon", { slot: "end", name: "git-merge", color: "primary" }));
+    }), index.h("hr", null), index.h("ion-item", { class: "comment-footer" }, index.h("ion-avatar", { class: "footer-avatar", slot: "start" }, index.h("img", { src: index.getAssetPath("/assets/img/user.png") })), index.h("ion-input", { value: this.comment, onIonChange: (e) => this.comment = e.target.value, type: "text", placeholder: "Write a comment" }), index.h("ion-button", { onClick: () => this.onPostComment({ Comment: this.comment, PostId: this.post.Id }), slot: "end", size: "small", disabled: !this.comment || this.loading }, this.loading ? index.h("ion-spinner", { name: "dots" }) : "POST COMMENT")))));
+  }
+};
+SparkleGwwItem.style = sparkleGwwItemCss;
+
+exports.sparkle_gww_item = SparkleGwwItem;

package/dist/cjs/sparkle-intro.cjs.entry.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bae2a754.js');
+
+const sparkleIntroCss = ".people{display:flex}.character-intro{position:absolute;width:100%;padding:15px;border:1px red solid;border-radius:5px}.character-image{opacity:0.5}.character-image:hover{opacity:1}";
+
+const SparkleIntro = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidLoad() { }
+  introOnMouseOver(description, event) {
+    this.description = description;
+    console.log(event);
+    event.target.style.opacity = 1;
+  }
+  render() {
+    return (index.h("div", null, index.h("div", { class: "people" }, index.h("div", { class: "character-image zynab", onMouseOver: evt => this.introOnMouseOver('<strong>I’m Zinab or Z.</strong> My family’s from Nigeria, and we live in the Melrose section of the South Bronx. I’m all about racial justice, and watch… I’m going to be the first Muslim mayor of New York City. Believe that!', evt) }, index.h("img", { src: "/assets/img/characters/zynab.png" })), index.h("div", { class: "character-image kimberley", onMouseOver: evt => this.introOnMouseOver('<strong>Hey, everyone, this is Kimberly </strong>and I’m from Brooklyn. My dream is to become a venture capitalist, so I can fund businesses and causes led by other Black Women. I love watching reality TV shows that are related to business like Shark Tank and Undercover Boss.', evt) }, index.h("img", { src: "/assets/img/characters/kimberly.png" })), index.h("div", { class: "character-image jen", onMouseOver: evt => this.introOnMouseOver('<strong>Hi, my name’s Jen</strong> and I’m from Murray Hill Queens. Second-generation Korean American. I love softball and statistics, so right now my dream job would be in sabermetrics. You know, basically a data analyst in baseball.', evt) }, index.h("img", { src: "/assets/img/characters/jen.png" })), index.h("div", { class: "character-image yuna", onMouseOver: evt => this.introOnMouseOver('<strong>Hi, my name’s Yuna</strong> and I’m from Murray Hill Queens. Second-generation Korean American. I love softball and statistics, so right now my dream job would be in sabermetrics. You know, basically a data analyst in baseball.', evt) }, index.h("img", { src: "/assets/img/characters/yuna.png" })), index.h("div", { class: "character-image valeria", onMouseOver: evt => this.introOnMouseOver('<strong>I’m VALERIA but most of my friends call me Val.</strong> First-generation Dominican from Washington Heights. I could watch MSNBC and CNN all day. In fact, one day I’m going to have my own political talk show like my crushes Rachel Maddow and Robin Roberts.', evt) }, index.h("img", { src: "/assets/img/characters/valeria.png" }))), index.h("div", { class: "people-description" }, this.description ? index.h("div", { class: "character-intro", innerHTML: this.description }) : '')));
+  }
+  get el() { return index.getElement(this); }
+};
+SparkleIntro.style = sparkleIntroCss;
+
+exports.sparkle_intro = SparkleIntro;

package/dist/cjs/sparkle-menu-toggle_3.cjs.entry.js

@@ -0,0 +1,236 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bae2a754.js');
+const icons = require('./icons-80d477f6.js');
+const activeRouter = require('./active-router-eedb3bfe.js');
+const matchPath = require('./match-path-84c9f7ca.js');
+
+const menuToggleCss = "sparkle-menu-toggle{background-color:rgba(0, 0, 0, var(--bg-alpha, 0));border-radius:50%;color:var(--text-color--light);cursor:pointer;height:40px;padding:8px;width:40px}@media (hover: hover){sparkle-menu-toggle:focus,sparkle-menu-toggle:hover{--bg-alpha:0.03;outline:none}sparkle-menu-toggle:active{--bg-alpha:0.06}}sparkle-menu-toggle svg{fill:currentColor}";
+
+const SparkleMenuToggle = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  hostData() {
+    return {
+      'role': 'button',
+      'tabindex': '0',
+      'aria-label': 'Toggle Menu',
+    };
+  }
+  __stencil_render() {
+    return index.h(icons.Menu, null);
+  }
+  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleMenuToggle.style = menuToggleCss;
+
+const navCss = "sparkle-nav{display:block;flex:0 0 auto;z-index:1}sparkle-nav .wrapper{position:relative}sparkle-nav .section-label{margin-bottom:0;font-size:14px;font-weight:600}sparkle-nav .module-list li,sparkle-nav .module-list ul li{list-style-type:none;margin:0;padding:0}sparkle-nav .module-list{margin-top:0;padding:0}sparkle-nav .module-list .section-label:first-of-type{margin-top:0}sparkle-nav .module-list li{font-size:14px;padding:10px 10px 0px 14px}sparkle-nav .module-list>li{margin-top:10px}sparkle-nav .module-list a{font-weight:400;color:#6c6c8b;text-decoration:none;white-space:nowrap;border:0}sparkle-nav .module-list a:not(.link-active){transition:color 0.2s}sparkle-nav .module-list a:hover{border:0}sparkle-nav .module-list .link-active{font-weight:bold;color:var(--ion-color-sparkle)}sparkle-nav .module-list .link-active a{color:var(--ion-color-sparkle)}sparkle-nav .module-list a:hover:not(.link-active){color:var(--ion-color-sparkle)}sparkle-nav .module-list ul li{padding-left:12px;transition:80ms height;display:block;overflow:hidden;text-overflow:ellipsis}sparkle-nav .module-list ul.collapsed li{height:0}sparkle-nav ul.session-list{margin:0;padding:10px 0px 0px 0px}sparkle-nav ul.session-list li a{display:flex;flex-direction:column;padding:15px 24px;position:relative}sparkle-nav ul.session-list li a:before{content:'';width:10px;height:10px;border-radius:50%;background:#dfe1e3;display:block;position:absolute;left:1px;top:50%;margin-top:-5px;z-index:5}sparkle-nav ul.session-list li a:after{content:'';background:#dfe1e3;height:100%;position:absolute;width:2px;display:block;left:5px;top:0}sparkle-nav ul.session-list li a.is-active{color:var(--ion-color-sparkle)}sparkle-nav ul.session-list li a.is-active:before{width:14px;height:14px;left:23px;margin-top:-7px;background:var(--ion-color-sparkle);box-shadow:0 0 4px var(--ion-color-sparkle)}sparkle-nav ul.session-list li a.is-active:after{background:#dfe1e3}sparkle-nav ul.session-list li stencil-route-link.is-completed a{}sparkle-nav ul.session-list li stencil-route-link.is-completed a:before{background:var(--ion-color-sparkle)}sparkle-nav ul.session-list li stencil-route-link.is-completed a:after{background:var(--ion-color-sparkle)}sparkle-nav ul.session-list li a p{color:#fff;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s ease-in-out color}sparkle-nav ul.session-list li a span{display:block;line-height:12px}sparkle-nav ul li span.coming-soon{font-size:0.7rem;display:block;background:0 0;color:#f6c95b;line-height:14px;border-radius:4px;padding:1px 4px 0;box-shadow:none;border:1px solid #f6c95b;width:85px;text-align:center}sparkle-nav ul.session-list li a:hover p{color:var(--ion-color-sparkle)}sparkle-nav ul.session-list li:first-child a:after{height:50%;top:50%}sparkle-nav ul.session-list li:last-child a:after{height:50%;bottom:50%}";
+
+const SparkleNav = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    //TODO: get this config somewhere from the config initialization
+    this.config = {
+      showRomanNumber: false,
+      showModuleIndex: true,
+      showSessionIndex: true,
+    };
+    this.toggleParent = (parentItem) => {
+      return (e) => {
+        e.preventDefault();
+        this.selectedParent = parentItem;
+      };
+    };
+  }
+  componentDidLoad() { }
+  //TODO: not working
+  pageDidLoadHandler($event) {
+    if ($event) {
+      //let pageInfo = $event.detail.pageInfo;
+      let splittedParts = window.location.pathname.split('/').filter(x => !!x && x != 'course');
+      this.moduleURLName = splittedParts[0];
+      this.sessionURLName = splittedParts[1];
+      if (this.toc) {
+        let courseModule = this.toc.courseModules.find(x => x.urlName == this.moduleURLName);
+        this.selectedParent = courseModule;
+      }
+    }
+  }
+  toggleLeftSidebar() { }
+  romanize(num) {
+    if (isNaN(num))
+      return NaN;
+    var digits = String(+num).split(''), key = [
+      '',
+      'C',
+      'CC',
+      'CCC',
+      'CD',
+      'D',
+      'DC',
+      'DCC',
+      'DCCC',
+      'CM',
+      '',
+      'X',
+      'XX',
+      'XXX',
+      'XL',
+      'L',
+      'LX',
+      'LXX',
+      'LXXX',
+      'XC',
+      '',
+      'I',
+      'II',
+      'III',
+      'IV',
+      'V',
+      'VI',
+      'VII',
+      'VIII',
+      'IX',
+    ], roman = '', i = 3;
+    while (i--)
+      roman = (key[+digits.pop() + i * 10] || '') + roman;
+    return Array(+digits.join('') + 1).join('M') + roman;
+  }
+  getModuleIndex(index, preventNumbering) {
+    return this.config.showModuleIndex && !preventNumbering ? (this.config.showRomanNumber ? this.romanize(index) : index) + '. ' : '';
+  }
+  getSessionIndex(index, preventNumbering) {
+    return this.config.showSessionIndex && !preventNumbering ? (this.config.showRomanNumber ? this.romanize(index) : index) + '. ' : '';
+  }
+  hostData() {
+    return {
+      role: 'navigation',
+    };
+  }
+  __stencil_render() {
+    let moduleIndex = 0;
+    let sessionIndex = 0;
+    return (index.h("ul", { class: "module-list" }, this.toc &&
+      this.toc.courseModules.map(module => {
+        sessionIndex = 0;
+        if (!module.preventNumbering) {
+          moduleIndex++;
+        }
+        return (module.sessions.length > 0 && (index.h("li", null, index.h("a", { class: { 'link-active': module.urlName == this.moduleURLName }, href: module.sessions[0].urlName || '#', onClick: this.toggleParent(module) }, index.h("span", { class: "section-label" }, this.getModuleIndex(moduleIndex, module.preventNumbering), module.name, module.comingSoon && index.h("span", { class: "coming-soon" }, " Coming soon"))), index.h("ul", { class: { 'collapsed': this.selectedParent ? module !== this.selectedParent : moduleIndex !== 0, 'session-list': true } }, module.sessions.map(session => {
+          if (!session.preventNumbering) {
+            sessionIndex++;
+          }
+          return (index.h("li", { class: {
+              'active': module.urlName == this.moduleURLName && session.urlName == this.sessionURLName,
+            } }, index.h("stencil-route-link", { class: {
+              'is-completed': true,
+              'link-active': module.urlName == this.moduleURLName && session.urlName == this.sessionURLName,
+            }, url: 'course/' + module.urlName + '/' + session.urlName + '/' + session.pages[0].urlName, onClick: () => this.toggleLeftSidebar() }, this.getSessionIndex(sessionIndex, session.preventNumbering), session.name, session.comingSoon && index.h("span", { class: "coming-soon" }, " Coming soon"))));
+        })))));
+      })));
+  }
+  get el() { return index.getElement(this); }
+  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleNav.style = navCss;
+
+const getUniqueId = () => {
+  return ((Math.random() * 10e16).toString().match(/.{4}/g) || []).join('-');
+};
+const getMatch = (pathname, url, exact) => {
+  return matchPath.matchPath(pathname, {
+    path: url,
+    exact: exact,
+    strict: true
+  });
+};
+const isHTMLStencilRouteElement = (elm) => {
+  return elm.tagName === 'STENCIL-ROUTE';
+};
+const RouteSwitch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.group = getUniqueId();
+    this.subscribers = [];
+    this.queue = index.getContext(this, "queue");
+  }
+  componentWillLoad() {
+    if (this.location != null) {
+      this.regenerateSubscribers(this.location);
+    }
+  }
+  async regenerateSubscribers(newLocation) {
+    if (newLocation == null) {
+      return;
+    }
+    let newActiveIndex = -1;
+    this.subscribers = Array.prototype.slice.call(this.el.children)
+      .filter(isHTMLStencilRouteElement)
+      .map((childElement, index) => {
+      const match = getMatch(newLocation.pathname, childElement.url, childElement.exact);
+      if (match && newActiveIndex === -1) {
+        newActiveIndex = index;
+      }
+      return {
+        el: childElement,
+        match: match
+      };
+    });
+    if (newActiveIndex === -1) {
+      return;
+    }
+    // Check if this actually changes which child is active
+    // then just pass the new match down if the active route isn't changing.
+    if (this.activeIndex === newActiveIndex) {
+      this.subscribers[newActiveIndex].el.match = this.subscribers[newActiveIndex].match;
+      return;
+    }
+    this.activeIndex = newActiveIndex;
+    // Set all props on the new active route then wait until it says that it
+    // is completed
+    const activeChild = this.subscribers[this.activeIndex];
+    if (this.scrollTopOffset) {
+      activeChild.el.scrollTopOffset = this.scrollTopOffset;
+    }
+    activeChild.el.group = this.group;
+    activeChild.el.match = activeChild.match;
+    activeChild.el.componentUpdated = (routeViewUpdatedOptions) => {
+      // After the new active route has completed then update visibility of routes
+      this.queue.write(() => {
+        this.subscribers.forEach((child, index) => {
+          child.el.componentUpdated = undefined;
+          if (index === this.activeIndex) {
+            return child.el.style.display = '';
+          }
+          if (this.scrollTopOffset) {
+            child.el.scrollTopOffset = this.scrollTopOffset;
+          }
+          child.el.group = this.group;
+          child.el.match = null;
+          child.el.style.display = 'none';
+        });
+      });
+      if (this.routeViewsUpdated) {
+        this.routeViewsUpdated(Object.assign({ scrollTopOffset: this.scrollTopOffset }, routeViewUpdatedOptions));
+      }
+    };
+  }
+  render() {
+    return (index.h("slot", null));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "location": ["regenerateSubscribers"]
+  }; }
+};
+activeRouter.ActiveRouter.injectProps(RouteSwitch, [
+  'location',
+  'routeViewsUpdated'
+]);
+
+exports.sparkle_menu_toggle = SparkleMenuToggle;
+exports.sparkle_nav = SparkleNav;
+exports.stencil_route_switch = RouteSwitch;

package/dist/cjs/sparkle-validation-error.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bae2a754.js');
+
+const sparkleValidationErrorCss = ":host{display:block}sparkle-validation-error ul{padding:10px 0px}sparkle-validation-error .alert-danger{margin-top:10px;font-size:12px}";
+
+const SparkleValidationError = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.errors = [];
+  }
+  render() {
+    return (index.h(index.Host, null, this.errors.length > 0 &&
+      index.h("div", { class: "alert alert-danger", role: "alert" }, index.h("ul", null, this.errors.map(error => index.h("li", null, index.h("b", null, error.Field, ": "), error.Message))))));
+  }
+};
+SparkleValidationError.style = sparkleValidationErrorCss;
+
+exports.sparkle_validation_error = SparkleValidationError;

package/dist/cjs/stencil-route-link.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bae2a754.js');
+const matchPath = require('./match-path-84c9f7ca.js');
+const domUtils = require('./dom-utils-b8befdd5.js');
+const activeRouter = require('./active-router-eedb3bfe.js');
+
+const getUrl = (url, root) => {
+  // Don't allow double slashes
+  if (url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {
+    return root.slice(0, root.length - 1) + url;
+  }
+  return root + url;
+};
+const RouteLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.unsubscribe = () => { return; };
+    this.activeClass = 'link-active';
+    this.exact = false;
+    this.strict = true;
+    /**
+      *  Custom tag to use instead of an anchor
+      */
+    this.custom = 'a';
+    this.match = null;
+  }
+  componentWillLoad() {
+    this.computeMatch();
+  }
+  // Identify if the current route is a match.
+  computeMatch() {
+    if (this.location) {
+      this.match = matchPath.matchPath(this.location.pathname, {
+        path: this.urlMatch || this.url,
+        exact: this.exact,
+        strict: this.strict
+      });
+    }
+  }
+  handleClick(e) {
+    if (domUtils.isModifiedEvent(e) || !this.history || !this.url || !this.root) {
+      return;
+    }
+    e.preventDefault();
+    return this.history.push(getUrl(this.url, this.root));
+  }
+  // Get the URL for this route link without the root from the router
+  render() {
+    let anchorAttributes = {
+      class: {
+        [this.activeClass]: this.match !== null,
+      },
+      onClick: this.handleClick.bind(this)
+    };
+    if (this.anchorClass) {
+      anchorAttributes.class[this.anchorClass] = true;
+    }
+    if (this.custom === 'a') {
+      anchorAttributes = Object.assign({}, anchorAttributes, { href: this.url, title: this.anchorTitle, role: this.anchorRole, tabindex: this.anchorTabIndex, 'aria-haspopup': this.ariaHaspopup, id: this.anchorId, 'aria-posinset': this.ariaPosinset, 'aria-setsize': this.ariaSetsize, 'aria-label': this.ariaLabel });
+    }
+    return (index.h(this.custom, Object.assign({}, anchorAttributes), index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "location": ["computeMatch"]
+  }; }
+};
+activeRouter.ActiveRouter.injectProps(RouteLink, [
+  'history',
+  'location',
+  'root'
+]);
+
+exports.stencil_route_link = RouteLink;

package/dist/cjs/stencil-router-redirect.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bae2a754.js');
+const activeRouter = require('./active-router-eedb3bfe.js');
+
+// Get the URL for this route link without the root from the router
+const getUrl = (url, root) => {
+  // Don't allow double slashes
+  if (url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {
+    return root.slice(0, root.length - 1) + url;
+  }
+  return root + url;
+};
+const Redirect = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    if (this.history && this.root && this.url) {
+      return this.history.replace(getUrl(this.url, this.root));
+    }
+  }
+  get el() { return index.getElement(this); }
+};
+activeRouter.ActiveRouter.injectProps(Redirect, [
+  'history',
+  'root'
+]);
+
+exports.stencil_router_redirect = Redirect;

package/dist/cjs/student.service-7af424fe.js

@@ -0,0 +1,61 @@
+'use strict';
+
+const auth_store = require('./auth.store-ff3fda09.js');
+const user_store = require('./user.store-3d29139d.js');
+
+class StudentService {
+  constructor() { }
+  static getInstance() {
+    if (!StudentService.instance) {
+      StudentService.instance = new StudentService();
+    }
+    return StudentService.instance;
+  }
+  async enrollClass(enrollInput) {
+    let result = await auth_store.HttpService.http.post('api/v1/Student/EnrollClass', enrollInput);
+    if (result) {
+      user_store.userStore.state.enrollmentList = [
+        ...user_store.userStore.state.enrollmentList,
+        result.Data
+      ];
+    }
+    return result;
+  }
+  async leaveClass(leaveInput) {
+    let result = await auth_store.HttpService.http.post('api/v1/Student/LeaveClass', leaveInput);
+    if (result) {
+      user_store.userStore.state.enrollmentList = user_store.userStore.state.enrollmentList.filter((item) => item.Id != result.Data);
+    }
+    return result;
+  }
+  async fetchUserConfiguration() {
+    let result = await auth_store.HttpService.http.get('api/v1/Student/UserConfiguration');
+    if (result) {
+      user_store.userStore.state.enrollmentList = result.Data.EnrollmentList;
+      user_store.userStore.state.user.FirstName = result.Data.FirstName;
+      user_store.userStore.state.user.LastName = result.Data.LastName;
+      user_store.userStore.state.user.ProfileText = result.Data.ProfileText;
+      user_store.userStore.state.user.ProfileImage = result.Data.ProfileImage;
+      user_store.userStore.state.user.IsVerified = result.Data.IsVerified;
+      user_store.userStore.state.user.Roles = result.Data.Roles;
+      user_store.userStore.state.user.FacilitatorClassList = result.Data.FacilitatorClassList;
+    }
+    return result;
+  }
+  async updateProfile(updateProfileInput) {
+    user_store.userStore.state.updateLoading = true;
+    let result = await auth_store.HttpService.http.post('api/Account/update-profile', updateProfileInput);
+    console.log('after fetch', result);
+    if (result) {
+      user_store.userStore.state.updateLoading = false;
+      user_store.userStore.state.user = Object.assign(Object.assign({}, user_store.userStore.state.user), { FirstName: result.Data.FirstName, LastName: result.Data.LastName, ProfileText: result.Data.ProfileText, ProfileImage: result.Data.ProfileImage });
+    }
+    return result;
+  }
+  async submitFeedback(feedbackInput) {
+    let result = await auth_store.HttpService.http.post('api/v1/Feedback', feedbackInput);
+    return result;
+  }
+}
+
+exports.StudentService = StudentService;

package/dist/cjs/user.store-3d29139d.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const auth_store = require('./auth.store-ff3fda09.js');
+
+const { state, onChange, reset } = auth_store.createStore({
+  user: {
+    FirstName: '',
+    LastName: '',
+    ProfileText: '',
+    ProfileImage: '',
+    IsVerified: false,
+    Roles: [],
+    FacilitatorClassList: []
+  },
+  loaded: false,
+  updateLoading: false,
+  enrollmentList: [],
+});
+const userStore = { state, onChange, reset };
+
+exports.userStore = userStore;

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "./components/sparkle-feed-post/sparkle-feed-post.js",
     "./components/sparkle-feedback/sparkle-feedback.js",
     "./components/sparkle-forgot-password/sparkle-forgot-password.js",
+    "./components/sparkle-intro/sparkle-intro.js",
     "./components/sparkle-login/sparkle-login.js",
     "./components/sparkle-poll/sparkle-poll.js",
     "./components/sparkle-quiz/sparkle-quiz.js",

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

@@ -0,0 +1,16 @@
+.people {
+  display: flex;
+}
+.character-intro {
+  position: absolute;
+  width: 100%;
+  padding: 15px;
+  border: 1px red solid;
+  border-radius: 5px;
+}
+.character-image {
+  opacity: 0.5;
+}
+.character-image:hover {
+  opacity: 1;
+}

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

@@ -0,0 +1,35 @@
+import { Component, Element, State, h } from '@stencil/core';
+export class SparkleIntro {
+  componentDidLoad() { }
+  introOnMouseOver(description, event) {
+    this.description = description;
+    console.log(event);
+    event.target.style.opacity = 1;
+  }
+  render() {
+    return (h("div", null,
+      h("div", { class: "people" },
+        h("div", { class: "character-image zynab", onMouseOver: evt => this.introOnMouseOver('<strong>I’m Zinab or Z.</strong> My family’s from Nigeria, and we live in the Melrose section of the South Bronx. I’m all about racial justice, and watch… I’m going to be the first Muslim mayor of New York City. Believe that!', evt) },
+          h("img", { src: "/assets/img/characters/zynab.png" })),
+        h("div", { class: "character-image kimberley", onMouseOver: evt => this.introOnMouseOver('<strong>Hey, everyone, this is Kimberly </strong>and I’m from Brooklyn. My dream is to become a venture capitalist, so I can fund businesses and causes led by other Black Women. I love watching reality TV shows that are related to business like Shark Tank and Undercover Boss.', evt) },
+          h("img", { src: "/assets/img/characters/kimberly.png" })),
+        h("div", { class: "character-image jen", onMouseOver: evt => this.introOnMouseOver('<strong>Hi, my name’s Jen</strong> and I’m from Murray Hill Queens. Second-generation Korean American. I love softball and statistics, so right now my dream job would be in sabermetrics. You know, basically a data analyst in baseball.', evt) },
+          h("img", { src: "/assets/img/characters/jen.png" })),
+        h("div", { class: "character-image yuna", onMouseOver: evt => this.introOnMouseOver('<strong>Hi, my name’s Yuna</strong> and I’m from Murray Hill Queens. Second-generation Korean American. I love softball and statistics, so right now my dream job would be in sabermetrics. You know, basically a data analyst in baseball.', evt) },
+          h("img", { src: "/assets/img/characters/yuna.png" })),
+        h("div", { class: "character-image valeria", onMouseOver: evt => this.introOnMouseOver('<strong>I’m VALERIA but most of my friends call me Val.</strong> First-generation Dominican from Washington Heights. I could watch MSNBC and CNN all day. In fact, one day I’m going to have my own political talk show like my crushes Rachel Maddow and Robin Roberts.', evt) },
+          h("img", { src: "/assets/img/characters/valeria.png" }))),
+      h("div", { class: "people-description" }, this.description ? h("div", { class: "character-intro", innerHTML: this.description }) : '')));
+  }
+  static get is() { return "sparkle-intro"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-intro.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-intro.css"]
+  }; }
+  static get states() { return {
+    "description": {}
+  }; }
+  static get elementRef() { return "el"; }
+}