@sparkle-learning/core 0.0.32 → 0.0.35

package/dist/esm/sparkle-facilitator-header_19.entry.js

@@ -0,0 +1,2108 @@
+import { r as registerInstance, h, i as getElement, H as Host, e as createEvent, F as Fragment, c as getAssetPath, k as getContext } from './index-9db08224.js';
+import { m as menuController } from './index-95307148.js';
+import { S as SignalRService, t as templates, s as signalRStore } from './index-ab1c6a9f.js';
+import { T as TocStore, A as AuthStore, c as createStore } from './auth.store-b812b34b.js';
+import { F as FacilitatorService, f as facilitatorStore } from './facilitator.service-7babc526.js';
+import { H as HttpService } from './httpService-b2b7a1ad.js';
+import { m as modalController, h as alertController } from './overlays-dfa730c8.js';
+import { A as AppDataService, g as goalStore, F as FeedService, f as feedStore } from './feed.service-80fbe79d.js';
+import { E as EnvironmentConfigService } from './environment-config.service-2b5d692b.js';
+import { A as AssetsService } from './assets.service-66e848b8.js';
+import { b as MyHealthTemplate, S as SparkleGlobal$1, c as MyHealthTemplateJSON, d as MyMoodTemplate, e as MyMoodTemplateJSON } from './util-a831d09d.js';
+import { A as AuthService, s as setupConfig } from './auth.service-79389d86.js';
+import { u as userStore } from './user.store-8477642a.js';
+import { S as StudentService } from './student.service-0caed0f4.js';
+import { i as injectHistory } from './injectHistory-4bfff188.js';
+import { m as matchPath, a as matchesAreEqual, s as stripTrailingSlash, b as addLeadingSlash, c as createLocation, d as createKey, h as hasBasename, e as stripBasename, f as createPath, g as stripLeadingSlash, l as locationsAreEqual } from './match-path-36fdf5c7.js';
+import { A as ActiveRouter } from './active-router-9843e205.js';
+import { s as storageAvailable, a as supportsHistory, b as supportsPopStateOnHashChange, g as getConfirmation, i as isExtraneousPopstateEvent, c as supportsGoWithoutReloadUsingHash } from './dom-utils-8e73e88b.js';
+import './hardware-back-button-fa04d6e9.js';
+import './helpers-94a5855b.js';
+import './ionic-global-293e882b.js';
+import './animation-d98d3e81.js';
+import './localstorage.service-4bf408c8.js';
+
+const facilitatorHeaderCss = "sparkle-facilitator-header{background-color:var(--background);box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);color:var(--text-color--light);display:block;font-size:14px;font-weight:500;line-height:1;position:fixed;top:0;left:0;transform:translateY(0);transition:transform 200ms ease;user-select:none;width:100%;white-space:nowrap;z-index:2}@media (min-width: 768px){.Layout:not(.is-menu-toggled) sparkle-facilitator-header.hidden{transform:translateY(-100%)}}@media (max-width: 768px){.Layout.is-menu-toggled sparkle-facilitator-header.hidden{transform:translateY(-100%)}}sparkle-facilitator-header header{align-items:center;display:flex;height:var(--header-height);padding:0 1.4rem 0 0.8rem}sparkle-facilitator-header a{color:inherit;font-weight:500;padding:10px 0}sparkle-facilitator-header ion-icon{font-size:16px;color:#B2BECD}sparkle-facilitator-header .link-active{color:var(--ion-color-sparkle)}@media (hover: hover){sparkle-facilitator-header a:not(.link-active):hover{color:var(--text-color)}}sparkle-facilitator-header sparkle-menu-toggle{flex:none;margin-right:0.75em}sparkle-facilitator-header .HeaderLogo{color:var(--text-color--dark);font-family:var(--heading-font-family);height:25px;margin-right:2em;display:flex;justify-content:center;align-items:center;font-size:1.5em}sparkle-facilitator-header .SectionNav stencil-route{display:flex}sparkle-facilitator-header .SectionNav .Dropdown{align-self:center;color:var(--text-color);margin-right:0.75em}sparkle-facilitator-header .SectionNav .Dropdown-button{border:solid 1px #DEE3EA;border-radius:6px;color:var(--text-color--dark);padding:10px;transition:border-color 100ms ease}sparkle-facilitator-header .SectionNav .Dropdown.is-open .Dropdown-button{border-color:var(--line-rule-color)}sparkle-facilitator-header .SectionNav .Dropdown-panel{min-width:180px}sparkle-facilitator-header .SectionNav .Dropdown-panel a{display:flex;justify-content:space-between}sparkle-facilitator-header .SectionNav .Dropdown-panel svg{height:1em;width:1em}sparkle-facilitator-header .SectionNav .Dropdown-panel .Nav-link{margin-left:0;margin-right:0}sparkle-facilitator-header .SectionNav-tabs>*{align-items:center;display:inline-flex;height:var(--header-height);margin-right:1em;padding:0px 1em;position:relative}sparkle-facilitator-header .SectionNav-tabs .link-active:after{background-color:currentColor;bottom:0;content:\"\";display:block;height:2px;left:0;position:absolute;width:100%}sparkle-facilitator-header .UtilNav{align-items:center;display:flex;font-size:12px;margin-left:auto}sparkle-facilitator-header .UtilNav>*{margin-left:1em}sparkle-facilitator-header .UtilNav .Dropdown.is-open{color:var(--text-color)}sparkle-facilitator-header .UtilNav .Dropdown-button{padding:10px 0}@media (hover: hover){sparkle-facilitator-header .UtilNav .Dropdown-button:hover{color:var(--text-color)}}sparkle-facilitator-header .UtilNav .Dropdown-panel{font-size:14px}sparkle-facilitator-header .girls-inc-logo{display:block;max-width:40px;max-height:40px;width:auto;height:auto}";
+
+const SparkleFacilitatorHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.courseName = '';
+    this.hidden = false;
+    this.frameRequested = false;
+    this.prevScroll = 0;
+  }
+  handleScroll() {
+    if (!this.frameRequested) {
+      requestAnimationFrame(() => {
+        const { scrollY } = window;
+        this.hidden = scrollY > 60 && scrollY > this.prevScroll;
+        this.prevScroll = scrollY;
+        this.frameRequested = false;
+      });
+      this.frameRequested = true;
+    }
+  }
+  componentWillLoad() {
+  }
+  hostData() {
+    return {
+      class: { hidden: this.hidden },
+    };
+  }
+  openEnd() {
+    menuController.enable(true, 'students');
+    menuController.open('students');
+  }
+  async openOnlineStudentsSidebar() {
+    document.getElementById("#onlineStudents");
+  }
+  __stencil_render() {
+    return (h("header", null, h("a", { href: "/home" }, h("div", { class: "HeaderLogo" }, this.courseName)), h("header-mobile-collapse", null, h("div", { class: "SectionNav-tabs" }), h("nav", { class: "UtilNav" }, h("sparkle-button", { href: "/login", round: true }, "Login"), h("sparkle-button", { href: "/signup", primary: true, round: true }, "Get Started"), h("slot", { name: "logo" })))));
+  }
+  get el() { return getElement(this); }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleFacilitatorHeader.style = facilitatorHeaderCss;
+
+class StoreService {
+  constructor() { }
+  static getInstance() {
+    if (!StoreService.instance) {
+      StoreService.instance = new StoreService();
+    }
+    return StoreService.instance;
+  }
+  async UpdateTocPageInfo(pageInfo) {
+    TocStore.state.pageInfo = pageInfo;
+  }
+}
+
+const facilitatorPageCss = ".Error{align-items:center;background-color:var(--offset-background);color:var(--text-color--light);display:flex;flex-direction:column;justify-content:center;line-height:1;white-space:nowrap}.Error.full-screen{padding-bottom:3rem}.Error>*{margin:10px}.Error h1,.Error div{color:inherit;font-size:3rem}.Error div{text-shadow:3px 3px 3px rgba(0,0,0,0.1)}.Error p{font-size:18px}sparkle-facilitator-page{display:grid;font-size:16px;grid-template-columns:1fr;line-height:2;margin-top:var(--header-height);overflow-x:hidden;transform:var(--page-transform, none);transition:transform 200ms cubic-bezier(0.2, 1, 0.2, 1);--page-padding:2rem;padding:20px}@media (min-width: 1234px){sparkle-facilitator-page{grid-template-columns:1fr}}@media (min-width: 1800px){sparkle-facilitator-page{grid-template-columns:1fr}}sparkle-facilitator-page>main.column-1{position:relative;grid-column:1;margin-bottom:3rem;padding:var(--page-padding, 2rem 1rem);position:relative}sparkle-facilitator-page>main.column-2{position:relative;grid-column:1;margin-bottom:3rem;padding:var(--page-padding, 2rem 1rem);position:relative}sparkle-facilitator-page sparkle-pagination{grid-column:1 / -1;border:none;--page-padding:0rem 1rem}sparkle-facilitator-page .full-screen{grid-column:1 / -1;height:calc(100vh - var(--header-height));margin-bottom:0;overflow:hidden;padding:0}sparkle-facilitator-page sparkle-page-footer{margin-top:0rem}sparkle-facilitator-page .page-heading-encapsulation{text-transform:uppercase;background:transparent;color:#2d4665;border:1px solid #dee3ea;border-radius:14px;height:24px;padding:2px 8px;font-weight:600;font-size:10px;line-height:14px;display:inline-flex;align-items:center;align-self:center;justify-self:flex-end;letter-spacing:0.08em;float:right}sparkle-facilitator-page .page-heading-encapsulation:hover{border-color:#92a1b3}sparkle-facilitator-page h1{display:flex;justify-content:space-between;margin-top:2rem;margin-bottom:1rem}sparkle-facilitator-page h2 a[href^='#'],sparkle-facilitator-page h3 a[href^='#'],sparkle-facilitator-page h4 a[href^='#'],sparkle-facilitator-page h5 a[href^='#'],sparkle-facilitator-page h6 a[href^='#']{color:inherit;position:relative}sparkle-facilitator-page h2 a[href^='#']:before,sparkle-facilitator-page h3 a[href^='#']:before,sparkle-facilitator-page h4 a[href^='#']:before,sparkle-facilitator-page h5 a[href^='#']:before,sparkle-facilitator-page h6 a[href^='#']:before{content:'#';opacity:0;padding-right:5px;position:absolute;right:100%;transition:opacity 100ms ease}sparkle-facilitator-page h2 a[href^='#']:hover:before,sparkle-facilitator-page h3 a[href^='#']:hover:before,sparkle-facilitator-page h4 a[href^='#']:hover:before,sparkle-facilitator-page h5 a[href^='#']:hover:before,sparkle-facilitator-page h6 a[href^='#']:hover:before{opacity:1}sparkle-facilitator-page h2 code,sparkle-facilitator-page h3 code,sparkle-facilitator-page h4 code,sparkle-facilitator-page h5 code,sparkle-facilitator-page h6 code{background:none;font-size:inherit}sparkle-facilitator-page aside{float:right;margin-left:20px;margin-bottom:20px}@media (min-width: 1234px){sparkle-facilitator-page main.no-demo .page-meta{position:fixed;right:0;top:100px;width:240px;transition:0.2s transform ease}sparkle-header.hidden~stencil-route sparkle-facilitator-page main.no-demo .page-meta{transform:translateY(-60px)}}sparkle-facilitator-page main.has-demo .page-meta internal-ad{display:none}sparkle-facilitator-page .tab-content{padding:20px}";
+
+const FacilitatorPage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageDidLoad = createEvent(this, "pageDidLoad", 7);
+    this.isLesson = false;
+    this.notesPage = { title: null, path: null, body: null, pageInfo: null };
+    this.lessonNotesPage = { title: null, path: null, body: null, pageInfo: null };
+    this.page = { title: null, path: null, body: null, pageInfo: null };
+    this.onlineStudents = [];
+    this.activetab = "FACILITATOR_NOTES";
+    this.validateFetch = (response) => {
+      if (!response.ok) {
+        throw response;
+      }
+      return response.json();
+    };
+    this.handleNotesPage = (page) => {
+      this.badFetch = null;
+      this.notesPage = page;
+      this.pageDidLoad.emit({ pageInfo: this.notesPage.pageInfo });
+    };
+    this.handleLessonNotesPage = (page) => {
+      this.badFetchLessonNotes = null;
+      this.lessonNotesPage = page;
+    };
+    this.handleNewPage = (page) => {
+      this.page = page;
+      this.page = Object.assign(Object.assign({}, this.page), { nextUrl: "/presentation/teacher" + this.page.nextUrl, previousUrl: "/presentation/teacher" + this.page.previousUrl });
+      StoreService.getInstance().UpdateTocPageInfo(this.page.pageInfo);
+    };
+    this.handleBadFetch = (error) => {
+      this.badFetch = error;
+      this.notesPage = {
+        title: error.statusText,
+        body: null,
+        path: null,
+        pageInfo: null
+      };
+    };
+    this.handleLessonNotesBadFetch = (error) => {
+      this.badFetchLessonNotes = error;
+      this.lessonNotesPage = {
+        title: error.statusText,
+        body: null,
+        path: null,
+        pageInfo: null
+      };
+    };
+  }
+  async componentWillLoad() {
+    await this.fetchClasses();
+    return this.fetchNotesPage(this.notesPath) && this.fetchPage(this.path);
+  }
+  componentDidLoad() {
+    this.isLesson = TocStore.state.pageInfo.pageId > 0;
+    if (!this.isLesson) {
+      this.activetab = "ONLINE_STUDENTS";
+    }
+  }
+  async fetchClasses() {
+    await FacilitatorService.getInstance().fetchClasses();
+  }
+  fetchNotesPage(path, oldPath) {
+    if (path === null || path === oldPath) {
+      return;
+    }
+    path = /^\/docs\/pages\/[a-z]{2}\.json$/.test(path) ? path.replace('.json', '/index.json') : path;
+    let lessonPath = this.getLessonPath(path);
+    console.log(lessonPath);
+    return fetch(path).then(this.validateFetch).then(this.handleNotesPage).catch(this.handleBadFetch) &&
+      fetch(lessonPath).then(this.validateFetch).then(this.handleLessonNotesPage).catch(this.handleLessonNotesBadFetch);
+  }
+  getLessonPath(path) {
+    let splittedPath = path.split("/");
+    splittedPath.pop();
+    return splittedPath.join("/") + "/lesson-notes.json";
+  }
+  fetchPage(path, oldPath) {
+    if (path === null || path === oldPath) {
+      return;
+    }
+    if (SignalRService.getInstance().connection.connectionState == "Connected") {
+      SignalRService.getInstance().callSignalR("NavigateFacilitatorPresentationCourseTo", { url: this.path.replace(".json", "") });
+    }
+    path = /^\/docs\/pages\/[a-z]{2}\.json$/.test(path) ? path.replace('.json', '/index.json') : path;
+    return fetch(path).then(this.validateFetch).then(this.handleNewPage).catch(this.handleBadFetch);
+  }
+  disconnectedCallback() {
+    StoreService.getInstance().UpdateTocPageInfo(null);
+  }
+  setDocumentMeta(page) {
+    const { title, meta = {} } = page;
+    const metaEls = {
+      title: document.head.querySelectorAll('.meta-title'),
+      description: document.head.querySelectorAll('.meta-description'),
+      url: document.head.querySelectorAll('.meta-url, link[rel="canonical"]'),
+      image: document.head.querySelectorAll('.meta-image'),
+    };
+    const updateMeta = (els, update) => {
+      els.forEach((el) => {
+        ['href', 'content'].forEach(attr => {
+          if (el.hasAttribute(attr)) {
+            el.setAttribute(attr, update(el.getAttribute(attr)));
+          }
+        });
+      });
+    };
+    // Title
+    const getTitle = () => {
+      const suffix = /^\/docs\/pages.*$/.test(this.notesPath) ? 'Sparkle' : 'Sparkle';
+      // Favor meta title, else go with auto-title. fallback to generic title
+      return meta.title || title ? `${title} - ${suffix}` : suffix;
+    };
+    document.title = getTitle();
+    updateMeta(metaEls.title, getTitle);
+    // Canonical URL
+    updateMeta(metaEls.url, (oldVal) => {
+      const uri = '/docs/';
+      const path = location.pathname.split(uri)[1];
+      return oldVal.split(uri)[0] + uri + path;
+    });
+    // Description
+    updateMeta(metaEls.description, () => meta.description || 'Sparkle is the free open-source platform for creating learning content on web, mobile and desktop.');
+    // Sharing Image
+    updateMeta(metaEls.image, () => meta.image || 'https://girlsinclearning.com//images/logo-primary.png');
+  }
+  hostData() {
+    return {
+      class: {
+        [this.notesPage.pageClass]: typeof this.notesPage.pageClass === 'string',
+      },
+    };
+  }
+  renderNavigation() {
+    return (h("div", { class: "p-2 d-md-flex justify-content-md-center" }, h("div", { class: "btn-group btn-group-sm", role: "group", "aria-label": "Basic outlined example" }, h("button", { type: "button", class: "btn btn-outline-primary" }, "Prev"), h("input", { type: "text", class: "form-control", placeholder: "Input group example", "aria-label": "Input group example", "aria-describedby": "btnGroupAddon", value: this.path.replace("index", ""), readOnly: true }), h("button", { type: "button", class: "btn btn-outline-primary" }, "Next"))));
+  }
+  renderTabs() {
+    return (h("main", { class: 'no-demo' }, h("ul", { class: "nav nav-tabs" }, this.isLesson &&
+      h(Fragment, null, h("li", { class: "nav-item" }, h("a", { class: `nav-link ${this.activetab == "FACILITATOR_NOTES" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "FACILITATOR_NOTES" }, "Facilitator Notes")), h("li", { class: "nav-item" }, h("a", { class: `nav-link ${this.activetab == "NOTES" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "NOTES" }, "Notes")), h("li", { class: "nav-item" }, h("a", { class: `nav-link ${this.activetab == "LESSON_NOTES" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "LESSON_NOTES" }, "Lesson Notes"))), h("li", { class: "nav-item" }, h("a", { class: `nav-link ${this.activetab == "ONLINE_STUDENTS" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "ONLINE_STUDENTS" }, "Online Students")), h("li", { class: "nav-item" }, h("a", { class: `nav-link ${this.activetab == "DASHBOARD" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "DASHBOARD" }, "Dashboard")), h("li", { class: "nav-item" }, h("a", { class: `nav-link ${this.activetab == "EXPORT" ? 'active' : ''}`, href: "javascript:void(0)", onClick: () => this.activetab = "EXPORT" }, "Export"))), h("div", { class: "tab-content" }, this.activetab == "FACILITATOR_NOTES" && this.renderFacilitatorNotes(), this.activetab == "NOTES" && h("sparkle-facilitator-notes", null), this.activetab == "LESSON_NOTES" && this.renderLessonNotes(), this.activetab == "ONLINE_STUDENTS" && h("sparkle-online-students", { path: this.path }), this.activetab == "DASHBOARD" && h("sparkle-facilitator-dashboard", null), this.activetab == "EXPORT" && h("sparkle-export-lessons", null))));
+  }
+  renderLessonNotes() {
+    const { lessonNotesPage } = this;
+    const Template = templates[lessonNotesPage.template] || templates.default;
+    if (this.badFetchLessonNotes) {
+      return templates.error(this.badFetch);
+    }
+    return h(Template, { page: lessonNotesPage });
+  }
+  renderFacilitatorNotes() {
+    const { notesPage } = this;
+    const Template = templates[notesPage.template] || templates.default;
+    if (this.badFetch) {
+      return templates.error(this.badFetch);
+    }
+    return h(Template, { page: notesPage });
+  }
+  __stencil_render() {
+    console.log(facilitatorStore.state.classes);
+    const { page } = this;
+    const content = this.renderTabs();
+    return h("div", { class: "container" }, h("div", { class: "d-flex justify-content-between align-items-center" }, h("sparkle-page-footer", { page: page }), h("div", null, h("select", { class: "form-select", "aria-label": "Default select example" }, facilitatorStore.state.classes.map(item => h("option", null, item.ClassName))))), content);
+  }
+  static get watchers() { return {
+    "notesPath": ["fetchNotesPage"],
+    "path": ["fetchPage"],
+    "page": ["setDocumentMeta"]
+  }; }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+FacilitatorPage.style = facilitatorPageCss;
+
+class AccountService {
+  constructor() { }
+  static getInstance() {
+    if (!AccountService.instance) {
+      AccountService.instance = new AccountService();
+    }
+    return AccountService.instance;
+  }
+  async register(registerInput) {
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+    AuthStore.state.loading = true;
+    let result;
+    try {
+      result = await HttpService.http.post('api/Account/Register', registerInput, {
+        headers: headers
+      });
+      if (result.Succeeded) {
+        AuthStore.state.loading = false;
+      }
+    }
+    catch (e) {
+      AuthStore.state.loading = false;
+      return e;
+    }
+    return result;
+  }
+  async forgotPassword(forgotPasswordInput) {
+    AuthStore.state.loading = true;
+    let result;
+    try {
+      result = await HttpService.http.post('api/Account/Forgot-Password', forgotPasswordInput);
+      if (result.Succeeded) {
+        AuthStore.state.loading = false;
+      }
+    }
+    catch (e) {
+      AuthStore.state.loading = false;
+      return e;
+    }
+    return result;
+  }
+  async resetPassword(resetPasswordInput) {
+    AuthStore.state.loading = true;
+    let result;
+    try {
+      result = await HttpService.http.post('api/Account/reset-password', resetPasswordInput);
+      if (result.Succeeded) {
+        AuthStore.state.loading = false;
+      }
+    }
+    catch (e) {
+      AuthStore.state.loading = false;
+      return e;
+    }
+    return result;
+  }
+}
+
+const sparkleForgotPasswordCss = "sparkle-forgot-password .list{margin-bottom:0}";
+
+const SparkleForgotPassword = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.formControls = {
+      email: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+    };
+    this.submitted = false;
+  }
+  changeFormValue(controlName, value) {
+    this.formControls = Object.assign(Object.assign({}, this.formControls), { [controlName]: Object.assign(Object.assign({}, this.formControls[controlName]), { value: value, isValid: this.formControls[controlName].validate(value) }) });
+  }
+  async handleSubmit(e) {
+    e.preventDefault();
+    this.submitted = true;
+    let isFormValid = true;
+    //Run all validation functions
+    for (let controlName in this.formControls) {
+      let control = this.formControls[controlName];
+      control.validate(control.value);
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      let result = await AccountService.getInstance().forgotPassword({
+        Email: this.formControls.email.value,
+        ClientURL: window.location.origin + "/reset-password"
+      });
+      if (result.Succeeded) {
+        this.history.replace('/login', {});
+      }
+      else if (result.Failed) {
+        if (result.Errors.length > 0) {
+          this.validationErrors = result.Errors;
+        }
+      }
+    }
+  }
+  render() {
+    return [
+      h("div", null, h("div", { class: "login-logo" }, h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })), h("sparkle-validation-error", { errors: this.validationErrors }), h("form", { novalidate: "true", onSubmit: (e) => this.handleSubmit(e) }, h("ion-list", { "no-lines": true }, h("ion-item", { lines: "none" }, "Enter your email address and we will send you a link to reset your password."), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Email"), h("ion-input", { name: "email", type: "text", value: this.formControls.email.value, onInput: (ev) => this.changeFormValue("email", ev.target.value), spellcheck: false, autocapitalize: "off" })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.email.isValid || this.submitted === false, class: "ion-padding-left" }, "Email is required")), h("br", null), h("div", { class: "ion-padding" }, h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading }, AuthStore.state.loading && h("ion-spinner", { name: "dots" }), " SEND PASSWORD RESET EMAIL")))))
+    ];
+  }
+};
+SparkleForgotPassword.style = sparkleForgotPasswordCss;
+
+const sparkleGoalsCss = ":host{display:block}sparkle-dropdown a{color:var(--text-color);padding:1em;cursor:pointer}";
+
+const SparkleGoals = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  async componentDidLoad() {
+    await AppDataService.getInstance().getAllGoals();
+  }
+  async presentAddGoalModal(appData) {
+    const modal = await modalController.create({
+      component: "sparkle-goal-form",
+      cssClass: "auto-height",
+      componentProps: { appData }
+    });
+    await modal.present();
+  }
+  render() {
+    return (h(Host, null, h("h2", null, "MY GOALS"), h("ion-item", { lines: "none" }, h("ion-button", { size: "default", color: "primary", slot: "end", onClick: () => this.presentAddGoalModal(null) }, h("ion-icon", { name: "add-outline" }), "Add")), h("div", { class: "ion-padding" }, h("sparkle-cards", null, goalStore.state.goals.map((goal) => h("div", { style: { "position": "relative" } }, h("sparkle-goal-item", { goal: goal.AppData, onEditGoal: () => this.presentAddGoalModal(goal) })))), !goalStore.state.goalsLoading && goalStore.state.goals.length == 0
+      && h("div", { class: "text-center" }, "No Goals"), goalStore.state.goalsLoading &&
+      h("div", { class: "text-center" }, h("ion-spinner", { name: "dots" })))));
+  }
+};
+SparkleGoals.style = sparkleGoalsCss;
+
+const sparkleGwwCss = ":host{display:block}";
+
+const SparkleGww = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.commentPosted = createEvent(this, "commentPosted", 7);
+    this.postComment = async (model) => {
+      const result = await FeedService.getInstance().createPostComment(model);
+      if (result.Succeeded) {
+        this.commentPosted.emit();
+      }
+    };
+  }
+  async componentDidLoad() {
+    await FeedService.getInstance().getAllPosts();
+  }
+  render() {
+    console.log(feedStore.state.postIdLoading, "Loading");
+    return (h(Host, null, feedStore.state.posts.map((item) => h("sparkle-gww-item", { key: item.Id, post: item, onPostComment: this.postComment, loading: feedStore.state.postIdLoading == item.Id }))));
+  }
+};
+SparkleGww.style = sparkleGwwCss;
+
+const storage = window.localStorage;
+function set(key, value) {
+  return new Promise((resolve, reject) => {
+    try {
+      storage && storage.setItem(key, JSON.stringify(value));
+      resolve();
+    }
+    catch (err) {
+      reject(`Couldnt store object ${err}`);
+    }
+  });
+}
+function get(key) {
+  try {
+    if (storage) {
+      const item = storage.getItem(key);
+      return JSON.parse(item);
+    }
+  }
+  catch (err) {
+    return null;
+  }
+}
+
+class SparkleGlobal {
+}
+SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE = "SPARKLE_CLASSROOM_MODE";
+
+const headerCss = "sparkle-header{background-color:var(--background);box-shadow:0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);color:var(--text-color--light);display:block;font-size:14px;font-weight:500;line-height:1;position:fixed;top:0;left:0;transform:translateY(0);transition:transform 200ms ease;user-select:none;width:100%;white-space:nowrap;z-index:2}@media (min-width: 768px){.Layout:not(.is-menu-toggled) sparkle-header.hidden{transform:translateY(-100%)}}@media (max-width: 768px){.Layout.is-menu-toggled sparkle-header.hidden{transform:translateY(-100%)}}sparkle-header header{align-items:center;display:flex;height:var(--header-height);padding:0 1.4rem 0 0.8rem}sparkle-header a{color:inherit;font-weight:500;padding:10px 0}sparkle-header ion-icon{font-size:16px;color:#b2becd}sparkle-header .link-active{color:var(--ion-color-sparkle)}@media (hover: hover){sparkle-header a:not(.link-active):hover{color:var(--text-color)}}sparkle-header sparkle-menu-toggle{flex:none;margin-right:0.75em}sparkle-header .HeaderLogo{color:var(--text-color--dark);font-family:var(--heading-font-family);height:25px;margin-right:2em;display:flex;justify-content:center;align-items:center;font-size:1.5em}sparkle-header .SectionNav stencil-route{display:flex}sparkle-header .SectionNav .Dropdown{align-self:center;color:var(--text-color);margin-right:0.75em}sparkle-header .SectionNav .Dropdown-button{border:solid 1px #dee3ea;border-radius:6px;color:var(--text-color--dark);padding:10px;transition:border-color 100ms ease}sparkle-header .SectionNav .Dropdown.is-open .Dropdown-button{border-color:var(--line-rule-color)}sparkle-header .SectionNav .Dropdown-panel{min-width:180px}sparkle-header .SectionNav .Dropdown-panel a{display:flex;justify-content:space-between}sparkle-header .SectionNav .Dropdown-panel svg{height:1em;width:1em}sparkle-header .SectionNav .Dropdown-panel .Nav-link{margin-left:0;margin-right:0}sparkle-header .SectionNav-tabs>*{align-items:center;display:inline-flex;height:var(--header-height);margin-right:1em;padding:0px 1em;position:relative}sparkle-header .SectionNav-tabs .link-active:after{background-color:currentColor;bottom:0;content:'';display:block;height:2px;left:0;position:absolute;width:100%}sparkle-header .UtilNav{align-items:center;display:flex;font-size:12px;margin-left:auto}sparkle-header .UtilNav>*{margin-left:1em}sparkle-header .UtilNav .Dropdown.is-open{color:var(--text-color)}sparkle-header .UtilNav .Dropdown-button{padding:10px 0}@media (hover: hover){sparkle-header .UtilNav .Dropdown-button:hover{color:var(--text-color)}}sparkle-header .UtilNav .Dropdown-panel{font-size:14px}sparkle-header .class-room-toggle-container{display:flex;justify-content:start;align-items:center;padding-left:20px}sparkle-header .class-room-mode-toggle-title{padding-right:5px}sparkle-header .class-room-mode-toggle{align-items:center;display:flex;justify-content:center;width:90px;height:28px;background:var(--ion-color-sparkle-step-50);border-radius:18px}sparkle-header .class-room-mode-toggle button{background-color:transparent;border:none;border-radius:16px;color:#5b708b;cursor:pointer;font-family:var(--font-family);font-size:11px;letter-spacing:-0.02em;width:calc(50% - 2px);line-height:21px;padding-top:2px;transition:200ms background-color ease, 200ms color ease}sparkle-header .class-room-mode-toggle button:focus,sparkle-header .class-room-mode-toggle button:active{outline:none}sparkle-header .class-room-mode-toggle button.is-selected{background-color:var(--ion-color-sparkle);color:var(--ion-color-sparkle-contrast);font-weight:600;box-shadow:0px 2px 3px #a7b5c7}sparkle-header .girls-inc-logo{display:block;max-width:40px;max-height:40px;width:auto;height:auto}sparkle-header sparkle-dropdown.profile-dropdown .Dropdown-icon{height:30px;width:30px}sparkle-header sparkle-dropdown.profile-dropdown .Dropdown-arrow{height:30px}";
+
+const SparkleHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.classRoomModeChanged = createEvent(this, "classRoomModeChanged", 7);
+    this.hideClassRoomToggle = false;
+    this.courseName = '';
+    this.imageUrl = '';
+    this.classRoomMode = true;
+    this.hidden = false;
+    this.frameRequested = false;
+    this.prevScroll = 0;
+  }
+  handleScroll() {
+    if (!this.frameRequested) {
+      requestAnimationFrame(() => {
+        const { scrollY } = window;
+        this.hidden = scrollY > 60 && scrollY > this.prevScroll;
+        this.prevScroll = scrollY;
+        this.frameRequested = false;
+      });
+      this.frameRequested = true;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.classRoomMode = (_a = get(SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE)) !== null && _a !== void 0 ? _a : false;
+  }
+  hostData() {
+    return {
+      class: { hidden: this.hidden },
+    };
+  }
+  toggleClassRoomMode() {
+    this.classRoomMode = !this.classRoomMode;
+    set(SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE, this.classRoomMode);
+    this.classRoomModeChanged.emit(this.classRoomMode);
+  }
+  renderModeToggle() {
+    return (h("div", { class: "class-room-toggle-container" }, h("div", { class: "class-room-mode-toggle-title" }, "Classroom"), h("div", { class: "class-room-mode-toggle" }, h("button", { class: this.classRoomMode == true ? 'is-selected' : null, title: "Toggle classroom mode", onClick: () => this.toggleClassRoomMode() }, "On"), h("button", { class: this.classRoomMode == false ? 'is-selected' : null, title: "Toggle classroom mode", onClick: () => this.toggleClassRoomMode() }, "Off"))));
+  }
+  __stencil_render() {
+    return (h("header", null, h("sparkle-menu-toggle", { onClick: this.toggleClickFn }), h("a", { href: "/home" }, h("div", { class: "HeaderLogo" }, this.courseName)), h("header-mobile-collapse", null, h("div", { class: "SectionNav-tabs" }, h("stencil-route-link", { url: "/home" }, "Home")), h("nav", { class: "UtilNav" }, !this.authUser ? ([
+      h("sparkle-button", { href: "/login", round: true }, "Login"),
+      h("sparkle-button", { href: "/signup", primary: true, round: true }, "Get Started"),
+    ]) : (h("sparkle-dropdown", { image: this.imageUrl, align: "center", label: "Account", class: "label-sm-only profile-dropdown" }, h("section", null, h("stencil-route-link", { url: "/profile" }, "My Profile"), h("stencil-route-link", { url: "/enrollment" }, "My Enrollment"), h("a", { onClick: this.signoutClickFn }, "Sign Out")))), !this.hideClassRoomToggle && this.renderModeToggle(), h("slot", { name: "logo" })))));
+  }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleHeader.style = headerCss;
+
+const { state, reset } = createStore({
+  mediaUploading: false,
+});
+const mediaStore = { state, reset };
+
+class MediaService {
+  constructor() { }
+  static getInstance() {
+    if (!MediaService.instance) {
+      MediaService.instance = new MediaService();
+    }
+    return MediaService.instance;
+  }
+  async uploadImage(files) {
+    let formData = new FormData();
+    for (let i = 0; i < files.length; i++) {
+      formData.append("uploads[]", files[i], files[i].name);
+    }
+    mediaStore.state.mediaUploading = true;
+    let result;
+    try {
+      result = await HttpService.http.post(`api/v1/MediaItems/Upload`, formData);
+      if (result) {
+        mediaStore.state.mediaUploading = false;
+      }
+    }
+    catch (e) {
+      mediaStore.state.mediaUploading = false;
+    }
+    return result;
+  }
+}
+
+const sparkleHealthCss = ":host{display:block}.health-image{display:block;max-width:300px;max-height:200px;width:auto;height:auto}";
+
+const SparkleHealth = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.uploadedImageUrl = "";
+    this.heartRate = 0;
+    this.public = true;
+    this.submitted = false;
+  }
+  async postFeed() {
+    const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
+    const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
+    var model = {
+      PostText: MyHealthTemplate(this.heartRate),
+      ExternalResourceUrl: this.uploadedImageUrl,
+      IsPublic: this.public,
+      MiniAppId: SparkleGlobal$1.MY_HEALTH_APP_ID,
+      CourseId: tocData.id,
+      PostTextJSON: MyHealthTemplateJSON(this.heartRate)
+    };
+    const result = await FeedService.getInstance().createPost(model);
+    if (result.Succeeded) {
+      this.history.replace('/home');
+    }
+  }
+  async uploadImage(event) {
+    this.submitted = true;
+    console.log(event.target.files);
+    if (event.target.files && event.target.files[0]) {
+      const result = await MediaService.getInstance().uploadImage(event.target.files);
+      if (result.Succeeded && result.Data && result.Data.length > 0) {
+        this.uploadedImageUrl = result.Data[0].FullImageUrl;
+        console.log(this.uploadedImageUrl);
+      }
+    }
+  }
+  selectFile() {
+    this.el.querySelector("#fileInput").click();
+  }
+  render() {
+    return (h(Host, null, h("div", null, h("h3", null, "MY HEALTH"), h("p", null, "This mini-app will help girls develop and instil good physical health habits"), h("ion-list", null, h("ion-list-header", null, "Select Heart Rate"), h("ion-item", { lines: "none" }, h("ion-range", { min: 0, max: 150, step: 1, snaps: true, pin: true, onIonChange: (ev) => this.heartRate = +ev.detail.value }, h("ion-icon", { size: "small", slot: "start", name: "pulse" }), h("ion-icon", { name: "pulse", size: "small" }), h("div", { slot: "end" }, h("strong", null, this.heartRate)))), this.uploadedImageUrl && h("ion-item", { lines: "none" }, h("img", { class: "health-image", src: this.uploadedImageUrl })), h("ion-item", { lines: "none" }, h("input", { type: "file", id: "fileInput", onChange: (ev) => this.uploadImage(ev), style: { display: "none" }, accept: "image/*" }), h("div", null, h("ion-button", { onClick: () => this.selectFile(), disabled: mediaStore.state.mediaUploading }, mediaStore.state.mediaUploading && h("ion-spinner", { name: "dots" }), "Upload Image"))), h("ion-item", { lines: "none" }, h("ion-label", null, "Share to Community Wall"), h("ion-checkbox", { slot: "start", onChange: (ev) => this.public = ev.detail.checked, checked: true })), h("ion-item", { lines: "none" }, h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.postFeed(), disabled: mediaStore.state.mediaUploading || feedStore.state.createPostLoading }, feedStore.state.createPostLoading && h("ion-spinner", { name: "dots" }), " POST"))))));
+  }
+  get el() { return getElement(this); }
+};
+SparkleHealth.style = sparkleHealthCss;
+
+const sparkleLoginCss = "sparkle-login .list{margin-bottom:0}";
+
+const PageLogin = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.userDidLogIn = createEvent(this, "userDidLogIn", 7);
+    this.username = {
+      valid: false,
+      value: ''
+    };
+    this.password = {
+      valid: false,
+      value: ''
+    };
+    this.rememberMe = {
+      valid: true,
+      value: false
+    };
+    this.submitted = false;
+  }
+  handleUsername(ev) {
+    this.validateUsername();
+    this.username = Object.assign(Object.assign({}, this.username), { value: ev.target.value });
+  }
+  handlePassword(ev) {
+    this.validatePassword();
+    this.password.value = ev.target.value;
+    this.password = Object.assign(Object.assign({}, this.password), { value: ev.target.value });
+  }
+  handleRememberMe(ev) {
+    this.rememberMe = Object.assign(Object.assign({}, this.password), { value: ev.target.checked });
+    console.log(this.rememberMe.value);
+  }
+  validateUsername() {
+    if (this.username.value && this.username.value.length > 0) {
+      this.username = Object.assign(Object.assign({}, this.username), { valid: true });
+      return;
+    }
+    this.username = Object.assign(Object.assign({}, this.username), { valid: false });
+  }
+  validatePassword() {
+    if (this.password.value && this.password.value.length > 0) {
+      this.password.valid = true;
+      this.password = Object.assign(Object.assign({}, this.password), { valid: true });
+      return;
+    }
+    this.password = Object.assign(Object.assign({}, this.password), { valid: false });
+  }
+  async componentWillLoad() {
+    this.destroyListener = AuthStore.onChange('authUser', async (authUser) => {
+      this.notsignin = !authUser;
+    });
+    this.notsignin = !AuthStore.state.authUser;
+  }
+  disconnectedCallback() {
+    if (this.destroyListener) {
+      this.destroyListener();
+    }
+  }
+  async onLogin(e) {
+    e.preventDefault();
+    //    const navCtrl: HTMLIonRouterElement = await (this.nav as any).componentOnReady();
+    this.validatePassword();
+    this.validateUsername();
+    this.submitted = true;
+    if (this.password.valid && this.username.valid) {
+      //await UserData.login(this.username.value);
+      await AuthService.getInstance().authenticate({
+        Email: this.username.value,
+        Password: this.password.value,
+        RememberClient: this.rememberMe.value
+      });
+      sessionStorage.setItem('rememberMe', this.rememberMe.value == true ? '1' : '0');
+      this.userDidLogIn.emit({ loginStatus: true });
+    }
+  }
+  async onSignup(e) {
+    e.preventDefault();
+    //const navCtrl: HTMLIonRouterElement = await (this.nav as any).componentOnReady();
+    //navCtrl.push('/signup');
+  }
+  renderLogin() {
+    return [
+      h("div", null, h("div", { class: "login-logo" }, h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })), h("form", { novalidate: "true", onSubmit: (e) => this.onLogin(e) }, h("ion-list", { "no-lines": true }, h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Username"), h("ion-input", { name: "username", type: "text", value: this.username.value, onInput: (ev) => this.handleUsername(ev), spellcheck: false, autocapitalize: "off", required: true })), h("ion-text", { color: "danger" }, h("p", { hidden: this.username.valid || this.submitted === false, class: "ion-padding-left" }, "Username is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Password"), h("ion-input", { name: "password", type: "password", value: this.password.value, onInput: (ev) => this.handlePassword(ev), required: true })), h("ion-text", { color: "danger" }, h("p", { hidden: this.password.valid || this.submitted === false, class: "ion-padding-left" }, "Password is required")), h("ion-item", { lines: "none" }, h("ion-label", null, "Remember Me"), h("ion-checkbox", { slot: "start", checked: this.rememberMe.value, onIonChange: (e) => this.handleRememberMe(e) })), h("ion-item", { lines: "none" }, h("stencil-route-link", { slot: "end", url: "/forgot-password", exact: true }, "Forgot Password?"))), h("ion-row", null, h("ion-col", null, h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading }, AuthStore.state.loading && h("ion-spinner", { name: "dots" }), " Log In"))), h("ion-item", { lines: "none" }, h("span", null, " Not registered yet? ", h("stencil-route-link", { url: "/signup", exact: true }, "Sign Up")))))
+    ];
+  }
+  render() {
+    if (!this.notsignin) {
+      return h("stencil-router-redirect", { url: "home" });
+    }
+    return this.renderLogin();
+  }
+};
+PageLogin.style = sparkleLoginCss;
+
+const menuCss = "sparkle-menu{background-color:var(--background);border-right:solid 1px var(--line-rule-color);display:flex;flex-direction:column;height:100vh;left:0;position:fixed;top:0;transition:transform 200ms cubic-bezier(0.2, 1, 0.2, 1);transform:var(--menu-transform, none);width:var(--menu-width);z-index:1}sparkle-menu>header{align-items:center;border-bottom:solid 1px var(--line-rule-color);display:flex;flex:none;height:var(--header-height);padding:0 1.4rem 0 0.8rem;user-select:none}sparkle-menu sparkle-menu-toggle{margin-right:0.75em}sparkle-menu .MenuLogo{color:var(--text-color--dark);font-family:var(--heading-font-family);height:25px}sparkle-menu>.Menu{overflow-y:auto;-webkit-overflow-scrolling:touch}sparkle-menu nav{padding:2rem 1.5rem}.MenuControls{border-bottom:solid 1px var(--line-rule-color);box-shadow:0 5px 10px -10px rgba(0, 0, 0, 0.1);font-size:13px;padding:1em}.CourseSelect,.CourseSelect .Dropdown,.CourseSelect .Dropdown-button{width:100%}.CourseSelect-course{align-items:center;display:flex}.CourseSelect-icon{height:14px;width:14px;margin-right:0.5em}.CourseSelect .Select-option{padding-left:0.75em}";
+
+const SparkleMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.config = {
+      showRomanNumber: false,
+      showModuleIndex: true,
+      showSessionIndex: true
+    };
+  }
+  render() {
+    return [
+      h("header", null, h("sparkle-menu-toggle", { onClick: this.toggleClickFn }), h("stencil-route-link", { url: "/docs/" }, h("div", { class: "MenuLogo" }, this.toc.name))),
+      //   <section class="MenuControls">
+      //   <course-select />
+      // </section>,
+      h("stencil-route-switch", { scrollTopOffset: 0, class: "Menu" }, h("sparkle-nav", { toc: this.toc, config: this.config })),
+    ];
+  }
+};
+SparkleMenu.style = menuCss;
+
+const sparkleMoodCss = ":host{display:block}.show{display:block}.hide{display:none}";
+
+const SparkleMood = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.feelingItems = ["Anger", "Fear", "Disgust", "Happiness", "Sadness", "Suprise", "Neutral", "Anxiety", "Love", "Depression", "Contempt", "Pride", "Shame", "Envy"];
+    this.intensityItems = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
+    this.locationItems = ["anger.jpg", "fear.jpg", "disgust.jpg", "happiness.jpg", "sadness.jpg", "neutral.jpg", "anxiety.jpg", "love.jpg", "depression.jpg", "contempt.jpg", "pride.jpg", "shame.jpg", "envy.jpg"];
+    this.feeling = this.feelingItems[0];
+    this.intensity = this.intensityItems[0];
+    this.location = this.locationItems[0];
+    this.public = true;
+    this.submitted = false;
+    this.currentStep = "FEELING";
+  }
+  back() {
+    if (this.currentStep == "LOCATION") {
+      this.currentStep = "INTENSITY";
+    }
+    else if (this.currentStep == "INTENSITY") {
+      this.currentStep = "FEELING";
+    }
+  }
+  async next() {
+    if (this.currentStep == "FEELING") {
+      this.currentStep = "INTENSITY";
+    }
+    else if (this.currentStep == "INTENSITY") {
+      this.currentStep = "LOCATION";
+    }
+    else if (this.currentStep == "LOCATION") {
+      const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
+      const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
+      var model = {
+        CourseId: tocData.id,
+        PostText: MyMoodTemplate(this.feeling, this.intensity, getAssetPath(`../assets/img/mood/` + this.location)),
+        PostTextJSON: MyMoodTemplateJSON(this.feeling, this.intensity, getAssetPath(`../assets/img/mood/` + this.location)),
+        ExternalResourceUrl: "",
+        IsPublic: this.public,
+        MiniAppId: SparkleGlobal$1.MY_MOOD_APP_ID,
+      };
+      const result = await FeedService.getInstance().createPost(model);
+      if (result.Succeeded) {
+        this.history.replace('/home');
+      }
+    }
+  }
+  render() {
+    const buttonLabel = this.currentStep == "LOCATION" ? "SUBMIT" : "NEXT";
+    return (h(Host, null, h("div", { class: `${this.currentStep == "FEELING" ? '' : 'hide'}` }, h("ion-list", null, h("ion-radio-group", { name: "feeling", value: this.feeling, onIonChange: (ev) => this.feeling = ev.detail.value }, h("ion-list-header", null, h("ion-label", null, "FEELING")), this.feelingItems.map((item) => h("ion-item", null, h("ion-label", null, item), h("ion-radio", { slot: "start", value: item })))))), h("div", { class: `${this.currentStep == "INTENSITY" ? '' : 'hide'}` }, h("ion-list", null, h("ion-radio-group", { name: "intesity", value: this.intensity, onIonChange: (ev) => this.intensity = ev.detail.value }, h("ion-list-header", null, h("ion-label", null, "INTENSITY")), this.intensityItems.map((item) => h("ion-item", null, h("ion-label", null, item), h("ion-radio", { slot: "start", value: item })))))), h("div", { class: `${this.currentStep == "LOCATION" ? '' : 'hide'}` }, h("ion-list", null, h("ion-radio-group", { name: "location", value: this.location, onIonChange: (ev) => this.location = ev.detail.value }, h("ion-list-header", null, h("ion-label", null, h("h3", null, "LOCATION"))), this.locationItems.map((item) => h("ion-item", null, h("ion-label", null, h("img", { src: getAssetPath(`../assets/img/mood/` + item) })), h("ion-radio", { slot: "start", value: item })))), h("ion-item", { lines: "none" }, h("ion-label", null, "Share to Community Wall"), h("ion-checkbox", { slot: "start", onChange: (ev) => this.public = ev.detail.checked, checked: true })))), h("ion-item", { lines: "none" }, this.currentStep != "FEELING" && h("ion-button", { size: "default", slot: "start", onClick: () => this.back() }, "BACK"), h("ion-button", { slot: "end", color: "primary", size: "default", onClick: () => this.next(), disabled: feedStore.state.createPostLoading }, feedStore.state.createPostLoading && h("ion-spinner", { name: "dots" }), buttonLabel))));
+  }
+};
+SparkleMood.style = sparkleMoodCss;
+
+const pageCss = ".Error{align-items:center;background-color:var(--offset-background);color:var(--text-color--light);display:flex;flex-direction:column;justify-content:center;line-height:1;white-space:nowrap}.Error.full-screen{padding-bottom:3rem}.Error>*{margin:10px}.Error h1,.Error div{color:inherit;font-size:3rem}.Error div{text-shadow:3px 3px 3px rgba(0,0,0,0.1)}.Error p{font-size:18px}sparkle-page{display:grid;font-size:16px;grid-template-columns:1fr minmax(0, var(--page-width, 720px)) 1fr;line-height:2;margin-left:var(--page-margin-left);margin-top:var(--header-height);overflow-x:hidden;transform:var(--page-transform, none);transition:transform 200ms cubic-bezier(0.2, 1, 0.2, 1)}@media (min-width: 1234px){sparkle-page{grid-template-columns:1fr minmax(0, var(--page-width, 720px)) 3fr}}@media (min-width: 1800px){sparkle-page{grid-template-columns:1fr minmax(0, var(--page-width, 720px)) 1fr 240px}}sparkle-page>main{position:relative;grid-column:2;margin-bottom:3rem;padding:var(--page-padding, 2rem 1rem);position:relative}sparkle-page sparkle-pagination{grid-column:1 / -1}sparkle-page .full-screen{grid-column:1 / -1;height:calc(100vh - var(--header-height));margin-bottom:0;overflow:hidden;padding:0}sparkle-page .page-heading-encapsulation{text-transform:uppercase;background:transparent;color:#2d4665;border:1px solid #dee3ea;border-radius:14px;height:24px;padding:2px 8px;font-weight:600;font-size:10px;line-height:14px;display:inline-flex;align-items:center;align-self:center;justify-self:flex-end;letter-spacing:0.08em;float:right}sparkle-page .page-heading-encapsulation:hover{border-color:#92a1b3}sparkle-page h1{display:flex;justify-content:space-between;margin-top:2rem;margin-bottom:1rem}sparkle-page h2 a[href^='#'],sparkle-page h3 a[href^='#'],sparkle-page h4 a[href^='#'],sparkle-page h5 a[href^='#'],sparkle-page h6 a[href^='#']{color:inherit;position:relative}sparkle-page h2 a[href^='#']:before,sparkle-page h3 a[href^='#']:before,sparkle-page h4 a[href^='#']:before,sparkle-page h5 a[href^='#']:before,sparkle-page h6 a[href^='#']:before{content:'#';opacity:0;padding-right:5px;position:absolute;right:100%;transition:opacity 100ms ease}sparkle-page h2 a[href^='#']:hover:before,sparkle-page h3 a[href^='#']:hover:before,sparkle-page h4 a[href^='#']:hover:before,sparkle-page h5 a[href^='#']:hover:before,sparkle-page h6 a[href^='#']:hover:before{opacity:1}sparkle-page h2 code,sparkle-page h3 code,sparkle-page h4 code,sparkle-page h5 code,sparkle-page h6 code{background:none;font-size:inherit}sparkle-page aside{float:right;margin-left:20px;margin-bottom:20px}@media (min-width: 1234px){sparkle-page main.no-demo .page-meta{position:fixed;right:0;top:100px;width:240px;transition:0.2s transform ease}sparkle-header.hidden~stencil-route sparkle-page main.no-demo .page-meta{transform:translateY(-60px)}}sparkle-page main.has-demo .page-meta internal-ad{display:none}sparkle-page .controls{display:flex;justify-content:flex-end}";
+
+const SparklePage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.pageDidLoad = createEvent(this, "pageDidLoad", 7);
+    this.presentation = false;
+    this.page = { title: null, path: null, body: null, pageInfo: null };
+    this.isLesson = false;
+    this.handleFacilitatorNavigationChange = (url) => {
+      this.history.replace(url, {});
+    };
+    this.validateFetch = (response) => {
+      if (!response.ok) {
+        throw response;
+      }
+      return response.json();
+    };
+    this.handleNewPage = (page) => {
+      this.badFetch = null;
+      this.page = page;
+      if (this.presentation) {
+        this.page = Object.assign(Object.assign({}, this.page), { previousUrl: "/presentation" + this.page.previousUrl, nextUrl: "/presentation" + this.page.nextUrl });
+      }
+      StoreService.getInstance().UpdateTocPageInfo(this.page.pageInfo);
+      this.isLesson = this.page.pageInfo.pageId > 0;
+      this.pageDidLoad.emit({ pageInfo: this.page.pageInfo });
+    };
+    this.handleBadFetch = (error) => {
+      this.badFetch = error;
+      this.page = {
+        title: error.statusText,
+        body: null,
+        path: null,
+        pageInfo: null
+      };
+    };
+  }
+  componentWillLoad() {
+    if (this.path) {
+      return this.fetchPage(this.path);
+    }
+  }
+  componentDidLoad() {
+    if (this.presentation) {
+      signalRStore.onChange("connected", (connected) => {
+        if (connected) {
+          SignalRService.getInstance().connection.on("NavigateFacilitatorPresentationCourseTo", this.handleFacilitatorNavigationChange);
+        }
+      });
+    }
+  }
+  fetchPage(path, oldPath) {
+    if (SignalRService.getInstance().connection.connectionState == "Connected") {
+      SignalRService.getInstance().callSignalR("OnStudentNavigate", { url: window.location.href });
+      if (this.presentation) {
+        console.log('register listener');
+        SignalRService.getInstance().connection.on("NavigateFacilitatorPresentationCourseTo", this.handleFacilitatorNavigationChange);
+      }
+    }
+    if (path === null || path === oldPath) {
+      return;
+    }
+    path = /^\/docs\/pages\/[a-z]{2}\.json$/.test(path) ? path.replace('.json', '/index.json') : path;
+    return fetch(path).then(this.validateFetch).then(this.handleNewPage).catch(this.handleBadFetch);
+  }
+  disconnectedCallback() {
+    StoreService.getInstance().UpdateTocPageInfo(null);
+  }
+  // @Watch('page')
+  // setScrollPosition() {
+  //   const hash = this.history.location.hash;
+  //   if (this.isServer || (hash !== undefined && hash !== '')) {
+  //     return;
+  //   }
+  //   requestAnimationFrame(() => {
+  //     const { location } = this.history;
+  //     const { scrollPosition = [0, 0] } = location;
+  //     const [x, y] = scrollPosition;
+  //     document.documentElement.scrollTo(x, y);
+  //   });
+  // }
+  setDocumentMeta(page) {
+    const { title, meta = {} } = page;
+    const metaEls = {
+      title: document.head.querySelectorAll('.meta-title'),
+      description: document.head.querySelectorAll('.meta-description'),
+      url: document.head.querySelectorAll('.meta-url, link[rel="canonical"]'),
+      image: document.head.querySelectorAll('.meta-image'),
+    };
+    const updateMeta = (els, update) => {
+      els.forEach((el) => {
+        ['href', 'content'].forEach(attr => {
+          if (el.hasAttribute(attr)) {
+            el.setAttribute(attr, update(el.getAttribute(attr)));
+          }
+        });
+      });
+    };
+    // Title
+    const getTitle = () => {
+      const suffix = /^\/docs\/pages\/appflow.*$/.test(this.path) ? 'Sparkle' : 'Sparkle';
+      // Favor meta title, else go with auto-title. fallback to generic title
+      return meta.title || title ? `${title} - ${suffix}` : suffix;
+    };
+    document.title = getTitle();
+    updateMeta(metaEls.title, getTitle);
+    // Canonical URL
+    updateMeta(metaEls.url, (oldVal) => {
+      const uri = '/docs/';
+      const path = location.pathname.split(uri)[1];
+      return oldVal.split(uri)[0] + uri + path;
+    });
+    // Description
+    updateMeta(metaEls.description, () => meta.description || 'Sparkle is the free open-source platform for creating learning content on web, mobile and desktop.');
+    // Sharing Image
+    updateMeta(metaEls.image, () => meta.image || 'https://girlsinclearning.com//images/logo-primary.png');
+  }
+  hostData() {
+    return {
+      class: {
+        [this.page.pageClass]: typeof this.page.pageClass === 'string',
+      },
+    };
+  }
+  async presentFeedbackModal() {
+    const modal = await modalController.create({
+      component: 'sparkle-feedback',
+      cssClass: 'sparkle-modal sparkle-feedback-modal'
+    });
+    await modal.present();
+  }
+  async openProjectorPage() {
+    if (userStore.state.user.FacilitatorClassList.length > 1) {
+      await this.presentAlertClasses();
+    }
+    else {
+      this.openWindows();
+    }
+  }
+  async presentAlertClasses() {
+    var inputs = [];
+    //    var defaultCourseClassId = this.jwtService.getDefaultCourseClassId();
+    var classes = userStore.state.user.FacilitatorClassList;
+    classes.forEach((item, index) => inputs.push({
+      name: 'radio' + index,
+      type: 'radio',
+      label: item.CourseName,
+      value: item.CourseClassId,
+      //checked: defaultCourseClassId > 0 ? item.CourseClassId == defaultCourseClassId : index == 0
+    }));
+    const alert = await alertController.create({
+      header: 'Classes',
+      inputs: inputs,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+          }
+        }, {
+          text: 'Ok',
+          handler: (data) => {
+          }
+        }
+      ]
+    });
+    await alert.present();
+  }
+  openWindows() {
+    //this.jwtService.updateDefaultCourseClassId(data);
+    window.open(window.location.origin + "/presentation" + this.path.replace(".json", ""), "_blank");
+    setTimeout(() => {
+      window.open(window.location.origin + "/presentation" + '/teacher' + this.path.replace(".json", ""), "_blank");
+    }, 500);
+  }
+  renderControls() {
+    if (AuthStore.state.isAuthenticated) {
+      return (h("div", { class: "controls" }, h("ion-button", { onClick: () => this.presentFeedbackModal() }, h("ion-icon", { name: "chatbox-outline" })), this.isLesson && userStore.state.user && userStore.state.user.Roles.indexOf('Facilitator') > -1 && h("ion-button", { onClick: () => this.openProjectorPage() }, h("ion-icon", { name: "desktop-outline" }))));
+    }
+    return "";
+  }
+  __stencil_render() {
+    if (this.path) {
+      const { page } = this;
+      if (this.badFetch) {
+        return templates.error(this.badFetch);
+      }
+      const Template = templates[page.template] || templates.default;
+      const content = [
+        h("main", { class: 'no-demo' }, this.renderControls(), h(Template, { page: page }))
+      ];
+      return content;
+    }
+    else {
+      return h("main", { class: 'no-demo' }, h("slot", null));
+    }
+  }
+  static get watchers() { return {
+    "path": ["fetchPage"],
+    "page": ["setDocumentMeta"]
+  }; }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparklePage.style = pageCss;
+
+const sparkleResetPasswordCss = ":host{display:block}";
+
+const SparkleResetPassword = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.formControls = {
+      password: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      confirmPassword: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+    };
+    this.submitted = false;
+  }
+  componentDidLoad() {
+    console.log(this.history.location.query.code);
+    console.log(this.history.location.query.email);
+  }
+  changeFormValue(controlName, value) {
+    this.formControls = Object.assign(Object.assign({}, this.formControls), { [controlName]: Object.assign(Object.assign({}, this.formControls[controlName]), { value: value, isValid: this.formControls[controlName].validate(value) }) });
+  }
+  async handleSubmit(e) {
+    e.preventDefault();
+    this.submitted = true;
+    let isFormValid = true;
+    //Run all validation functions
+    for (let controlName in this.formControls) {
+      let control = this.formControls[controlName];
+      control.validate(control.value);
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      let result = await AccountService.getInstance().resetPassword({
+        Email: this.history.location.query.email,
+        Token: this.history.location.query.code,
+        Password: this.formControls.password.value,
+        ConfirmPassword: this.formControls.confirmPassword.value,
+      });
+      if (result.Succeeded) {
+        this.history.replace('/login', {});
+      }
+      else if (result.Failed) {
+        if (result.Errors.length > 0) {
+          this.validationErrors = result.Errors;
+        }
+      }
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "login-logo" }, h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })), h("sparkle-validation-error", { errors: this.validationErrors }), h("form", { novalidate: "true", onSubmit: (e) => this.handleSubmit(e) }, h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Password"), h("ion-input", { name: "password", type: "password", value: this.formControls.password.value, onInput: (ev) => this.changeFormValue("password", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.password.isValid || this.submitted === false, class: "ion-padding-start" }, "Password is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Confirm Password"), h("ion-input", { name: "confirmPassword", type: "password", value: this.formControls.confirmPassword.value, onInput: (ev) => this.changeFormValue("confirmPassword", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.confirmPassword.isValid || this.submitted === false, class: "ion-padding-start" }, "Confirm Password is required")), h("br", null), h("div", { class: "ion-padding" }, h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading }, AuthStore.state.loading && h("ion-spinner", { name: "dots" }), " Reset Password")))));
+  }
+};
+SparkleResetPassword.style = sparkleResetPasswordCss;
+
+const sparkleRootCss = ":root{--page-padding:2rem 0}sparkle-root{overflow-y:auto}.Layout{display:flex;overflow-x:hidden}.Layout>stencil-route,.Layout>stencil-route-switch{width:100%}.Layout.is-menu-toggled{--menu-transform:translateX(calc(-1 * var(--menu-width)));--page-margin-left:0}@media (max-width: 768px){.Layout{--menu-transform:translateX(calc(-1 * var(--menu-width)));--page-padding:1.5rem;--page-margin-left:0}.Layout.is-menu-toggled{--menu-transform:none;--page-transform:translateX(var(--menu-width))}.Layout.is-menu-toggled sparkle-page>*{opacity:0.2;pointer-events:none}body.scroll-lock{overflow-y:hidden}}#messagesList{display:grid;font-size:12px;font-weight:bold;grid-template-columns:1fr minmax(0, var(--page-width, 720px)) 1fr;line-height:2;margin-left:var(--page-margin-left);margin-top:var(--header-height);overflow-x:hidden;transform:var(--page-transform, none);margin-top:56px;padding:4px;background:#e50739;color:#fff}";
+
+const SparkleRoot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.history = null;
+    this.handleStudentNavigationChange = (url) => {
+      this.history.replace(url, {});
+    };
+  }
+  async componentWillLoad() {
+    setupConfig({
+      sparkle: Object.assign(Object.assign({}, this.config), { prod: true })
+    });
+    //return Promise.reject();
+    await HttpService.getInstance();
+    await HttpService.init();
+    var sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
+    if (sparkleConfig && sparkleConfig.auth && sparkleConfig.auth.getToken()) {
+      AuthStore.state.isAuthenticated = true;
+    }
+    AuthStore.onChange("isAuthenticated", async (isAuthenticated) => {
+      if (isAuthenticated) {
+        console.log('authenticated');
+        await StudentService.getInstance().fetchUserConfiguration();
+      }
+    });
+    if (AuthStore.state.isAuthenticated) {
+      return await StudentService.getInstance().fetchUserConfiguration();
+    }
+    //SignalRAspNetCoreHelper.initSignalR();
+  }
+  componentDidLoad() {
+    SignalRService.getInstance().connection.on("NavigateStudentTo", this.handleStudentNavigationChange);
+    AuthStore.onChange("isAuthenticated", async (isAuthenticated) => {
+      if (isAuthenticated) {
+        SignalRService.getInstance().start();
+      }
+    });
+    if (AuthStore.state.isAuthenticated) {
+      SignalRService.getInstance().start();
+    }
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
+injectHistory(SparkleRoot);
+SparkleRoot.style = sparkleRootCss;
+
+const sparkleSignupCss = "sparkle-signup .list{margin-bottom:0}";
+
+const SparkleSignup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.formControls = {
+      firstName: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      lastName: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      userName: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      email: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      password: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      confirmPassword: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+    };
+    this.submitted = false;
+  }
+  changeFormValue(controlName, value) {
+    this.formControls = Object.assign(Object.assign({}, this.formControls), { [controlName]: Object.assign(Object.assign({}, this.formControls[controlName]), { value: value, isValid: this.formControls[controlName].validate(value) }) });
+  }
+  async handleSubmit(e) {
+    e.preventDefault();
+    this.submitted = true;
+    let isFormValid = true;
+    //Run all validation functions
+    for (let controlName in this.formControls) {
+      let control = this.formControls[controlName];
+      control.validate(control.value);
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      let result = await AccountService.getInstance().register({
+        Email: this.formControls.email.value,
+        UserName: this.formControls.userName.value,
+        FirstName: this.formControls.firstName.value,
+        LastName: this.formControls.lastName.value,
+        Password: this.formControls.password.value,
+        ConfirmPassword: this.formControls.confirmPassword.value,
+      });
+      if (result.Succeeded) {
+        this.history.replace('/login', {});
+      }
+      else if (result.Failed) {
+        if (result.Errors.length > 0) {
+          this.validationErrors = result.Errors;
+        }
+      }
+    }
+  }
+  render() {
+    return [
+      h("div", null, h("div", { class: "signup-logo" }, h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })), h("sparkle-validation-error", { errors: this.validationErrors }), h("form", { onSubmit: e => this.handleSubmit(e), novalidate: true }, h("ion-list", { "no-lines": true }, h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "First Name"), h("ion-input", { name: "firstName", type: "text", value: this.formControls.firstName.value, onInput: (ev) => this.changeFormValue("firstName", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.firstName.isValid || this.submitted === false, class: "ion-padding-start" }, "First Name is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Last Name"), h("ion-input", { name: "lastName", type: "text", value: this.formControls.lastName.value, onInput: (ev) => this.changeFormValue("lastName", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.lastName.isValid || this.submitted === false, class: "ion-padding-start" }, "Last Name is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Username"), h("ion-input", { name: "userName", type: "text", value: this.formControls.userName.value, onInput: (ev) => this.changeFormValue("userName", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.userName.isValid || this.submitted === false, class: "ion-padding-start" }, "Username is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Email"), h("ion-input", { name: "email", type: "text", value: this.formControls.email.value, onInput: (ev) => this.changeFormValue("email", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.email.isValid || this.submitted === false, class: "ion-padding-start" }, "Email is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Password"), h("ion-input", { name: "password", type: "password", value: this.formControls.password.value, onInput: (ev) => this.changeFormValue("password", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.password.isValid || this.submitted === false, class: "ion-padding-start" }, "Password is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Confirm Password"), h("ion-input", { name: "confirmPassword", type: "password", value: this.formControls.confirmPassword.value, onInput: (ev) => this.changeFormValue("confirmPassword", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.formControls.confirmPassword.isValid || this.submitted === false, class: "ion-padding-start" }, "Confirm Password is required"))), h("div", { class: "ion-padding" }, h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading }, AuthStore.state.loading && h("ion-spinner", { name: "dots" }), "Register")), h("ion-item", { lines: "none" }, "Already have an account? \u00A0", h("stencil-route-link", { url: "/login", exact: true }, "Log In"))))
+    ];
+  }
+};
+SparkleSignup.style = sparkleSignupCss;
+
+const sparkleUnauthorizedCss = ":host{display:block}.unauthorized{display:block;padding-left:var(--page-margin-left);padding-top:var(--header-height)}.content{text-align:center;padding-top:40px}";
+
+const SparkleUnauthorized = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { class: {
+        'unauthorized': true,
+      } }, h("div", { class: "content" }, h("h1", null, "401"), h("p", null, "Unauthorized"))));
+  }
+};
+SparkleUnauthorized.style = sparkleUnauthorizedCss;
+
+const sparkleUserEnrollmentCss = ":host{display:block}";
+
+const SparkleUserEnrollment = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.enrollmentFormControls = {
+      ShortCode: {
+        isValid: false,
+        value: '',
+        validate: (value) => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+    };
+    this.enrollmentFormSubmitted = false;
+  }
+  changeEnrollmentFormValue(controlName, value) {
+    this.enrollmentFormControls = Object.assign(Object.assign({}, this.enrollmentFormControls), { [controlName]: Object.assign(Object.assign({}, this.enrollmentFormControls[controlName]), { value: value, isValid: this.enrollmentFormControls[controlName].validate(value) }) });
+  }
+  async handleEnrollmentFormSubmit(e) {
+    e.preventDefault();
+    this.enrollmentFormSubmitted = true;
+    let isFormValid = true;
+    //Run all validation functions
+    for (let controlName in this.enrollmentFormControls) {
+      let control = this.enrollmentFormControls[controlName];
+      control.validate(control.value);
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      let result = await StudentService.getInstance().enrollClass({
+        ShortCode: this.enrollmentFormControls.ShortCode.value,
+      });
+      console.log(result);
+    }
+  }
+  async leaveClass(enrollmentId) {
+    let result = await StudentService.getInstance().leaveClass({
+      Id: enrollmentId,
+    });
+    console.log(result);
+  }
+  renderEnrollmentList() {
+    if (userStore.state.enrollmentList.length > 0) {
+      return (userStore.state.enrollmentList.map((item) => h("ion-item", null, h("ion-label", null, item.Name), h("ion-button", { onClick: () => this.leaveClass(item.Id) }, h("ion-icon", { name: "trash" })))));
+    }
+    else {
+      return (h("ion-item", { lines: "none" }, h("ion-text", { class: "ion-text-center" }, "No data found")));
+    }
+  }
+  render() {
+    return (h(Host, null, h("form", { onSubmit: e => this.handleEnrollmentFormSubmit(e), novalidate: true }, h("ion-list", { "no-lines": true }, h("ion-list-header", null, "Enrollment"), h("ion-grid", null, h("ion-row", { class: "ion-align-items-center" }, h("ion-col", { size: "9" }, h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Short Code"), h("ion-input", { name: "ShortCode", type: "text", value: this.enrollmentFormControls.ShortCode.value, onInput: (ev) => this.changeEnrollmentFormValue("ShortCode", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.enrollmentFormControls.ShortCode.isValid || this.enrollmentFormSubmitted === false, class: "ion-padding-start" }, "Short Code is required"))), h("ion-col", { size: "3" }, h("div", null, h("ion-button", { slot: "end", type: "submit", expand: "block" }, "Enroll"))))))), h("ion-list", null, h("ion-list-header", null, "Enroll List"), this.renderEnrollmentList())));
+  }
+};
+SparkleUserEnrollment.style = sparkleUserEnrollmentCss;
+
+const sparkleUserProfileCss = ":host{display:block}ion-card{box-shadow:0px 2px 2px rgba(0, 0, 0, 0.2);overflow:visible;margin:16px 0 24px;position:relative;padding-top:60px}ion-card .img-wrapper{background-color:#f5f5f5;border-radius:10px;position:absolute;left:50%;top:-30px;transform:translateX(-50%)}ion-card .img-wrapper img{border-radius:10px;width:80px;height:80px}ion-card .img-wrapper ion-button{--border-width:1px;--border-color:var(--ion-color-sparkle);--border-style:solid;--padding-start:0;--padding-end:0;--padding-bottom:0;--padding-top:0;--border-radius:50%;height:26px;width:26px;position:absolute;right:-10px;bottom:-10px}ion-card .img-wrapper ion-button ion-icon{width:14px;height:14px}ion-card .img-wrapper img.loading{opacity:0.1}.image-upload-loading{position:absolute;top:40%;left:35%}";
+
+const SparkleUserProfile = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.profileFormControls = {
+      ProfileImage: {
+        isValid: true,
+        value: '',
+        validate: (_) => {
+          return true;
+        },
+      },
+      FirstName: {
+        isValid: false,
+        value: '',
+        validate: (value) => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      LastName: {
+        isValid: false,
+        value: '',
+        validate: (value) => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+      ProfileText: {
+        isValid: true,
+        value: '',
+        validate: (value) => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        }
+      }
+    };
+    this.profileFormSubmitted = false;
+  }
+  componentWillLoad() {
+    if (userStore.state.user) {
+      const user = userStore.state.user;
+      this.changeFormValue("FirstName", user.FirstName);
+      this.changeFormValue("LastName", user.LastName);
+      this.changeFormValue("ProfileText", user.ProfileText);
+      this.changeFormValue("ProfileImage", user.ProfileImage);
+    }
+  }
+  changeFormValue(controlName, value) {
+    this.profileFormControls = Object.assign(Object.assign({}, this.profileFormControls), { [controlName]: Object.assign(Object.assign({}, this.profileFormControls[controlName]), { value: value, isValid: this.profileFormControls[controlName].validate(value) }) });
+  }
+  async handleProfileFormSubmit(e) {
+    e.preventDefault();
+    await this.updateUser();
+  }
+  async updateUser() {
+    this.profileFormSubmitted = true;
+    let isFormValid = true;
+    for (let controlName in this.profileFormControls) {
+      let control = this.profileFormControls[controlName];
+      control.validate(control.value);
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      await StudentService.getInstance().updateProfile({
+        FirstName: this.profileFormControls.FirstName.value,
+        LastName: this.profileFormControls.LastName.value,
+        ProfileImage: this.profileFormControls.ProfileImage.value,
+        ProfileText: this.profileFormControls.ProfileText.value
+      });
+    }
+  }
+  async uploadProfileImage(event) {
+    if (event.target.files && event.target.files[0]) {
+      const result = await MediaService.getInstance().uploadImage(event.target.files);
+      if (result.Succeeded && result.Data && result.Data.length > 0) {
+        this.changeFormValue("ProfileImage", result.Data[0].FullImageUrl);
+        await this.updateUser();
+      }
+    }
+  }
+  selectFile() {
+    this.el.querySelector("#fileInput").click();
+  }
+  render() {
+    return (h(Host, null, h("ion-card", { color: "sparkle" }, h("div", { class: "img-wrapper" }, h("img", { class: mediaStore.state.mediaUploading ? "loading" : '', src: this.profileFormControls.ProfileImage.value || getAssetPath(`../assets/svg/profile.svg`) }), h("input", { type: "file", id: "fileInput", onChange: (ev) => this.uploadProfileImage(ev), style: { display: "none" }, accept: "image/*" }), h("ion-button", { color: "sparkle", onClick: () => this.selectFile(), disabled: mediaStore.state.mediaUploading }, h("ion-icon", { slot: "icon-only", name: "camera-outline" })), mediaStore.state.mediaUploading && h("ion-spinner", { class: "image-upload-loading", name: "dots" })), h("ion-card-content", { class: "ion-text-center" }, h("h2", null, this.profileFormControls.FirstName.value, " ", this.profileFormControls.LastName.value), h("h3", null, this.profileFormControls.ProfileText.value))), h("form", { onSubmit: e => this.handleProfileFormSubmit(e), novalidate: true }, h("ion-list", { "no-lines": true }, h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "First Name"), h("ion-input", { name: "firstName", type: "text", value: this.profileFormControls.FirstName.value, onInput: (ev) => this.changeFormValue("FirstName", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.profileFormControls.FirstName.isValid || this.profileFormSubmitted === false, class: "ion-padding-start" }, "First Name is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Last Name"), h("ion-input", { name: "lastName", type: "text", value: this.profileFormControls.LastName.value, onInput: (ev) => this.changeFormValue("LastName", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.profileFormControls.LastName.isValid || this.profileFormSubmitted === false, class: "ion-padding-start" }, "Last Name is required")), h("ion-item", null, h("ion-label", { position: "stacked", color: "primary" }, "Profile Bio"), h("ion-input", { name: "lastName", type: "text", value: this.profileFormControls.ProfileText.value, onInput: (ev) => this.changeFormValue("ProfileText", ev.target.value) })), h("ion-text", { color: "danger" }, h("p", { hidden: this.profileFormControls.ProfileText.isValid || this.profileFormSubmitted === false, class: "ion-padding-start" }, "Profile Bio is required"))), h("div", { class: "ion-padding" }, h("ion-button", { type: "submit", expand: "block", disabled: userStore.state.updateLoading }, userStore.state.updateLoading && h("ion-spinner", { name: "dots" }), " Update")))));
+  }
+  get el() { return getElement(this); }
+};
+SparkleUserProfile.style = sparkleUserProfileCss;
+
+const routeCss = "stencil-route.inactive{display:none}";
+
+const Route = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.group = null;
+    this.match = null;
+    this.componentProps = {};
+    this.exact = false;
+    this.scrollOnNextRender = false;
+    this.previousMatch = null;
+  }
+  // Identify if the current route is a match.
+  computeMatch(newLocation) {
+    const isGrouped = this.group != null || (this.el.parentElement != null && this.el.parentElement.tagName.toLowerCase() === 'stencil-route-switch');
+    if (!newLocation || isGrouped) {
+      return;
+    }
+    this.previousMatch = this.match;
+    return this.match = matchPath(newLocation.pathname, {
+      path: this.url,
+      exact: this.exact,
+      strict: true
+    });
+  }
+  async loadCompleted() {
+    let routeViewOptions = {};
+    if (this.history && this.history.location.hash) {
+      routeViewOptions = {
+        scrollToId: this.history.location.hash.substr(1)
+      };
+    }
+    else if (this.scrollTopOffset) {
+      routeViewOptions = {
+        scrollTopOffset: this.scrollTopOffset
+      };
+    }
+    // After all children have completed then tell switch
+    // the provided callback will get executed after this route is in view
+    if (typeof this.componentUpdated === 'function') {
+      this.componentUpdated(routeViewOptions);
+      // If this is an independent route and it matches then routes have updated.
+      // If the only change to location is a hash change then do not scroll.
+    }
+    else if (this.match && !matchesAreEqual(this.match, this.previousMatch) && this.routeViewsUpdated) {
+      this.routeViewsUpdated(routeViewOptions);
+    }
+  }
+  async componentDidUpdate() {
+    await this.loadCompleted();
+  }
+  async componentDidLoad() {
+    await this.loadCompleted();
+  }
+  render() {
+    // If there is no activeRouter then do not render
+    // Check if this route is in the matching URL (for example, a parent route)
+    if (!this.match || !this.history) {
+      return null;
+    }
+    // component props defined in route
+    // the history api
+    // current match data including params
+    const childProps = Object.assign({}, this.componentProps, { history: this.history, match: this.match });
+    // If there is a routerRender defined then use
+    // that and pass the component and component props with it.
+    if (this.routeRender) {
+      return this.routeRender(Object.assign({}, childProps, { component: this.component }));
+    }
+    if (this.component) {
+      const ChildComponent = this.component;
+      return (h(ChildComponent, Object.assign({}, childProps)));
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "location": ["computeMatch"]
+  }; }
+};
+ActiveRouter.injectProps(Route, [
+  'location',
+  'history',
+  'historyType',
+  'routeViewsUpdated'
+]);
+Route.style = routeCss;
+
+const warning = (value, ...args) => {
+    if (!value) {
+        console.warn(...args);
+    }
+};
+
+// Adapted from the https://github.com/ReactTraining/history and converted to TypeScript
+const createTransitionManager = () => {
+    let prompt;
+    let listeners = [];
+    const setPrompt = (nextPrompt) => {
+        warning(prompt == null, 'A history supports only one prompt at a time');
+        prompt = nextPrompt;
+        return () => {
+            if (prompt === nextPrompt) {
+                prompt = null;
+            }
+        };
+    };
+    const confirmTransitionTo = (location, action, getUserConfirmation, callback) => {
+        // TODO: If another transition starts while we're still confirming
+        // the previous one, we may end up in a weird state. Figure out the
+        // best way to handle this.
+        if (prompt != null) {
+            const result = typeof prompt === 'function' ? prompt(location, action) : prompt;
+            if (typeof result === 'string') {
+                if (typeof getUserConfirmation === 'function') {
+                    getUserConfirmation(result, callback);
+                }
+                else {
+                    warning(false, 'A history needs a getUserConfirmation function in order to use a prompt message');
+                    callback(true);
+                }
+            }
+            else {
+                // Return false from a transition hook to cancel the transition.
+                callback(result !== false);
+            }
+        }
+        else {
+            callback(true);
+        }
+    };
+    const appendListener = (fn) => {
+        let isActive = true;
+        const listener = (...args) => {
+            if (isActive) {
+                fn(...args);
+            }
+        };
+        listeners.push(listener);
+        return () => {
+            isActive = false;
+            listeners = listeners.filter(item => item !== listener);
+        };
+    };
+    const notifyListeners = (...args) => {
+        listeners.forEach(listener => listener(...args));
+    };
+    return {
+        setPrompt,
+        confirmTransitionTo,
+        appendListener,
+        notifyListeners
+    };
+};
+
+const createScrollHistory = (win, applicationScrollKey = 'scrollPositions') => {
+    let scrollPositions = new Map();
+    const set = (key, value) => {
+        scrollPositions.set(key, value);
+        if (storageAvailable(win, 'sessionStorage')) {
+            const arrayData = [];
+            scrollPositions.forEach((value, key) => {
+                arrayData.push([key, value]);
+            });
+            win.sessionStorage.setItem('scrollPositions', JSON.stringify(arrayData));
+        }
+    };
+    const get = (key) => {
+        return scrollPositions.get(key);
+    };
+    const has = (key) => {
+        return scrollPositions.has(key);
+    };
+    const capture = (key) => {
+        set(key, [win.scrollX, win.scrollY]);
+    };
+    if (storageAvailable(win, 'sessionStorage')) {
+        const scrollData = win.sessionStorage.getItem(applicationScrollKey);
+        scrollPositions = scrollData ?
+            new Map(JSON.parse(scrollData)) :
+            scrollPositions;
+    }
+    if ('scrollRestoration' in win.history) {
+        history.scrollRestoration = 'manual';
+    }
+    return {
+        set,
+        get,
+        has,
+        capture
+    };
+};
+
+// Adapted from the https://github.com/ReactTraining/history and converted to TypeScript
+const PopStateEvent = 'popstate';
+const HashChangeEvent$1 = 'hashchange';
+/**
+ * Creates a history object that uses the HTML5 history API including
+ * pushState, replaceState, and the popstate event.
+ */
+const createBrowserHistory = (win, props = {}) => {
+    let forceNextPop = false;
+    const globalHistory = win.history;
+    const globalLocation = win.location;
+    const globalNavigator = win.navigator;
+    const canUseHistory = supportsHistory(win);
+    const needsHashChangeListener = !supportsPopStateOnHashChange(globalNavigator);
+    const scrollHistory = createScrollHistory(win);
+    const forceRefresh = (props.forceRefresh != null) ? props.forceRefresh : false;
+    const getUserConfirmation = (props.getUserConfirmation != null) ? props.getUserConfirmation : getConfirmation;
+    const keyLength = (props.keyLength != null) ? props.keyLength : 6;
+    const basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
+    const getHistoryState = () => {
+        try {
+            return win.history.state || {};
+        }
+        catch (e) {
+            // IE 11 sometimes throws when accessing window.history.state
+            // See https://github.com/ReactTraining/history/pull/289
+            return {};
+        }
+    };
+    const getDOMLocation = (historyState) => {
+        historyState = historyState || {};
+        const { key, state } = historyState;
+        const { pathname, search, hash } = globalLocation;
+        let path = pathname + search + hash;
+        warning((!basename || hasBasename(path, basename)), 'You are attempting to use a basename on a page whose URL path does not begin ' +
+            'with the basename. Expected path "' + path + '" to begin with "' + basename + '".');
+        if (basename) {
+            path = stripBasename(path, basename);
+        }
+        return createLocation(path, state, key || createKey(keyLength));
+    };
+    const transitionManager = createTransitionManager();
+    const setState = (nextState) => {
+        // Capture location for the view before changing history.
+        scrollHistory.capture(history.location.key);
+        Object.assign(history, nextState);
+        // Set scroll position based on its previous storage value
+        history.location.scrollPosition = scrollHistory.get(history.location.key);
+        history.length = globalHistory.length;
+        transitionManager.notifyListeners(history.location, history.action);
+    };
+    const handlePopState = (event) => {
+        // Ignore extraneous popstate events in WebKit.
+        if (!isExtraneousPopstateEvent(globalNavigator, event)) {
+            handlePop(getDOMLocation(event.state));
+        }
+    };
+    const handleHashChange = () => {
+        handlePop(getDOMLocation(getHistoryState()));
+    };
+    const handlePop = (location) => {
+        if (forceNextPop) {
+            forceNextPop = false;
+            setState();
+        }
+        else {
+            const action = 'POP';
+            transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
+                if (ok) {
+                    setState({ action, location });
+                }
+                else {
+                    revertPop(location);
+                }
+            });
+        }
+    };
+    const revertPop = (fromLocation) => {
+        const toLocation = history.location;
+        // TODO: We could probably make this more reliable by
+        // keeping a list of keys we've seen in sessionStorage.
+        // Instead, we just default to 0 for keys we don't know.
+        let toIndex = allKeys.indexOf(toLocation.key);
+        let fromIndex = allKeys.indexOf(fromLocation.key);
+        if (toIndex === -1) {
+            toIndex = 0;
+        }
+        if (fromIndex === -1) {
+            fromIndex = 0;
+        }
+        const delta = toIndex - fromIndex;
+        if (delta) {
+            forceNextPop = true;
+            go(delta);
+        }
+    };
+    const initialLocation = getDOMLocation(getHistoryState());
+    let allKeys = [initialLocation.key];
+    let listenerCount = 0;
+    let isBlocked = false;
+    // Public interface
+    const createHref = (location) => {
+        return basename + createPath(location);
+    };
+    const push = (path, state) => {
+        warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to push when the 1st ' +
+            'argument is a location-like object that already has state; it is ignored');
+        const action = 'PUSH';
+        const location = createLocation(path, state, createKey(keyLength), history.location);
+        transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
+            if (!ok) {
+                return;
+            }
+            const href = createHref(location);
+            const { key, state } = location;
+            if (canUseHistory) {
+                globalHistory.pushState({ key, state }, '', href);
+                if (forceRefresh) {
+                    globalLocation.href = href;
+                }
+                else {
+                    const prevIndex = allKeys.indexOf(history.location.key);
+                    const nextKeys = allKeys.slice(0, prevIndex === -1 ? 0 : prevIndex + 1);
+                    nextKeys.push(location.key);
+                    allKeys = nextKeys;
+                    setState({ action, location });
+                }
+            }
+            else {
+                warning(state === undefined, 'Browser history cannot push state in browsers that do not support HTML5 history');
+                globalLocation.href = href;
+            }
+        });
+    };
+    const replace = (path, state) => {
+        warning(!(typeof path === 'object' && path.state !== undefined && state !== undefined), 'You should avoid providing a 2nd state argument to replace when the 1st ' +
+            'argument is a location-like object that already has state; it is ignored');
+        const action = 'REPLACE';
+        const location = createLocation(path, state, createKey(keyLength), history.location);
+        transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
+            if (!ok) {
+                return;
+            }
+            const href = createHref(location);
+            const { key, state } = location;
+            if (canUseHistory) {
+                globalHistory.replaceState({ key, state }, '', href);
+                if (forceRefresh) {
+                    globalLocation.replace(href);
+                }
+                else {
+                    const prevIndex = allKeys.indexOf(history.location.key);
+                    if (prevIndex !== -1) {
+                        allKeys[prevIndex] = location.key;
+                    }
+                    setState({ action, location });
+                }
+            }
+            else {
+                warning(state === undefined, 'Browser history cannot replace state in browsers that do not support HTML5 history');
+                globalLocation.replace(href);
+            }
+        });
+    };
+    const go = (n) => {
+        globalHistory.go(n);
+    };
+    const goBack = () => go(-1);
+    const goForward = () => go(1);
+    const checkDOMListeners = (delta) => {
+        listenerCount += delta;
+        if (listenerCount === 1) {
+            win.addEventListener(PopStateEvent, handlePopState);
+            if (needsHashChangeListener) {
+                win.addEventListener(HashChangeEvent$1, handleHashChange);
+            }
+        }
+        else if (listenerCount === 0) {
+            win.removeEventListener(PopStateEvent, handlePopState);
+            if (needsHashChangeListener) {
+                win.removeEventListener(HashChangeEvent$1, handleHashChange);
+            }
+        }
+    };
+    const block = (prompt = '') => {
+        const unblock = transitionManager.setPrompt(prompt);
+        if (!isBlocked) {
+            checkDOMListeners(1);
+            isBlocked = true;
+        }
+        return () => {
+            if (isBlocked) {
+                isBlocked = false;
+                checkDOMListeners(-1);
+            }
+            return unblock();
+        };
+    };
+    const listen = (listener) => {
+        const unlisten = transitionManager.appendListener(listener);
+        checkDOMListeners(1);
+        return () => {
+            checkDOMListeners(-1);
+            unlisten();
+        };
+    };
+    const history = {
+        length: globalHistory.length,
+        action: 'POP',
+        location: initialLocation,
+        createHref,
+        push,
+        replace,
+        go,
+        goBack,
+        goForward,
+        block,
+        listen,
+        win: win
+    };
+    return history;
+};
+
+// Adapted from the https://github.com/ReactTraining/history and converted to TypeScript
+const HashChangeEvent = 'hashchange';
+const HashPathCoders = {
+    hashbang: {
+        encodePath: (path) => path.charAt(0) === '!' ? path : '!/' + stripLeadingSlash(path),
+        decodePath: (path) => path.charAt(0) === '!' ? path.substr(1) : path
+    },
+    noslash: {
+        encodePath: stripLeadingSlash,
+        decodePath: addLeadingSlash
+    },
+    slash: {
+        encodePath: addLeadingSlash,
+        decodePath: addLeadingSlash
+    }
+};
+const createHashHistory = (win, props = {}) => {
+    let forceNextPop = false;
+    let ignorePath = null;
+    let listenerCount = 0;
+    let isBlocked = false;
+    const globalLocation = win.location;
+    const globalHistory = win.history;
+    const canGoWithoutReload = supportsGoWithoutReloadUsingHash(win.navigator);
+    const keyLength = (props.keyLength != null) ? props.keyLength : 6;
+    const { getUserConfirmation = getConfirmation, hashType = 'slash' } = props;
+    const basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
+    const { encodePath, decodePath } = HashPathCoders[hashType];
+    const getHashPath = () => {
+        // We can't use window.location.hash here because it's not
+        // consistent across browsers - Firefox will pre-decode it!
+        const href = globalLocation.href;
+        const hashIndex = href.indexOf('#');
+        return hashIndex === -1 ? '' : href.substring(hashIndex + 1);
+    };
+    const pushHashPath = (path) => (globalLocation.hash = path);
+    const replaceHashPath = (path) => {
+        const hashIndex = globalLocation.href.indexOf('#');
+        globalLocation.replace(globalLocation.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + '#' + path);
+    };
+    const getDOMLocation = () => {
+        let path = decodePath(getHashPath());
+        warning((!basename || hasBasename(path, basename)), 'You are attempting to use a basename on a page whose URL path does not begin ' +
+            'with the basename. Expected path "' + path + '" to begin with "' + basename + '".');
+        if (basename) {
+            path = stripBasename(path, basename);
+        }
+        return createLocation(path, undefined, createKey(keyLength));
+    };
+    const transitionManager = createTransitionManager();
+    const setState = (nextState) => {
+        Object.assign(history, nextState);
+        history.length = globalHistory.length;
+        transitionManager.notifyListeners(history.location, history.action);
+    };
+    const handleHashChange = () => {
+        const path = getHashPath();
+        const encodedPath = encodePath(path);
+        if (path !== encodedPath) {
+            // Ensure we always have a properly-encoded hash.
+            replaceHashPath(encodedPath);
+        }
+        else {
+            const location = getDOMLocation();
+            const prevLocation = history.location;
+            if (!forceNextPop && locationsAreEqual(prevLocation, location)) {
+                return; // A hashchange doesn't always == location change.
+            }
+            if (ignorePath === createPath(location)) {
+                return; // Ignore this change; we already setState in push/replace.
+            }
+            ignorePath = null;
+            handlePop(location);
+        }
+    };
+    const handlePop = (location) => {
+        if (forceNextPop) {
+            forceNextPop = false;
+            setState();
+        }
+        else {
+            const action = 'POP';
+            transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
+                if (ok) {
+                    setState({ action, location });
+                }
+                else {
+                    revertPop(location);
+                }
+            });
+        }
+    };
+    const revertPop = (fromLocation) => {
+        const toLocation = history.location;
+        // TODO: We could probably make this more reliable by
+        // keeping a list of paths we've seen in sessionStorage.
+        // Instead, we just default to 0 for paths we don't know.
+        let toIndex = allPaths.lastIndexOf(createPath(toLocation));
+        let fromIndex = allPaths.lastIndexOf(createPath(fromLocation));
+        if (toIndex === -1) {
+            toIndex = 0;
+        }
+        if (fromIndex === -1) {
+            fromIndex = 0;
+        }
+        const delta = toIndex - fromIndex;
+        if (delta) {
+            forceNextPop = true;
+            go(delta);
+        }
+    };
+    // Ensure the hash is encoded properly before doing anything else.
+    const path = getHashPath();
+    const encodedPath = encodePath(path);
+    if (path !== encodedPath) {
+        replaceHashPath(encodedPath);
+    }
+    const initialLocation = getDOMLocation();
+    let allPaths = [createPath(initialLocation)];
+    // Public interface
+    const createHref = (location) => ('#' + encodePath(basename + createPath(location)));
+    const push = (path, state) => {
+        warning(state === undefined, 'Hash history cannot push state; it is ignored');
+        const action = 'PUSH';
+        const location = createLocation(path, undefined, createKey(keyLength), history.location);
+        transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
+            if (!ok) {
+                return;
+            }
+            const path = createPath(location);
+            const encodedPath = encodePath(basename + path);
+            const hashChanged = getHashPath() !== encodedPath;
+            if (hashChanged) {
+                // We cannot tell if a hashchange was caused by a PUSH, so we'd
+                // rather setState here and ignore the hashchange. The caveat here
+                // is that other hash histories in the page will consider it a POP.
+                ignorePath = path;
+                pushHashPath(encodedPath);
+                const prevIndex = allPaths.lastIndexOf(createPath(history.location));
+                const nextPaths = allPaths.slice(0, prevIndex === -1 ? 0 : prevIndex + 1);
+                nextPaths.push(path);
+                allPaths = nextPaths;
+                setState({ action, location });
+            }
+            else {
+                warning(false, 'Hash history cannot PUSH the same path; a new entry will not be added to the history stack');
+                setState();
+            }
+        });
+    };
+    const replace = (path, state) => {
+        warning(state === undefined, 'Hash history cannot replace state; it is ignored');
+        const action = 'REPLACE';
+        const location = createLocation(path, undefined, createKey(keyLength), history.location);
+        transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
+            if (!ok) {
+                return;
+            }
+            const path = createPath(location);
+            const encodedPath = encodePath(basename + path);
+            const hashChanged = getHashPath() !== encodedPath;
+            if (hashChanged) {
+                // We cannot tell if a hashchange was caused by a REPLACE, so we'd
+                // rather setState here and ignore the hashchange. The caveat here
+                // is that other hash histories in the page will consider it a POP.
+                ignorePath = path;
+                replaceHashPath(encodedPath);
+            }
+            const prevIndex = allPaths.indexOf(createPath(history.location));
+            if (prevIndex !== -1) {
+                allPaths[prevIndex] = path;
+            }
+            setState({ action, location });
+        });
+    };
+    const go = (n) => {
+        warning(canGoWithoutReload, 'Hash history go(n) causes a full page reload in this browser');
+        globalHistory.go(n);
+    };
+    const goBack = () => go(-1);
+    const goForward = () => go(1);
+    const checkDOMListeners = (win, delta) => {
+        listenerCount += delta;
+        if (listenerCount === 1) {
+            win.addEventListener(HashChangeEvent, handleHashChange);
+        }
+        else if (listenerCount === 0) {
+            win.removeEventListener(HashChangeEvent, handleHashChange);
+        }
+    };
+    const block = (prompt = '') => {
+        const unblock = transitionManager.setPrompt(prompt);
+        if (!isBlocked) {
+            checkDOMListeners(win, 1);
+            isBlocked = true;
+        }
+        return () => {
+            if (isBlocked) {
+                isBlocked = false;
+                checkDOMListeners(win, -1);
+            }
+            return unblock();
+        };
+    };
+    const listen = (listener) => {
+        const unlisten = transitionManager.appendListener(listener);
+        checkDOMListeners(win, 1);
+        return () => {
+            checkDOMListeners(win, -1);
+            unlisten();
+        };
+    };
+    const history = {
+        length: globalHistory.length,
+        action: 'POP',
+        location: initialLocation,
+        createHref,
+        push,
+        replace,
+        go,
+        goBack,
+        goForward,
+        block,
+        listen,
+        win: win
+    };
+    return history;
+};
+
+const getLocation = (location, root) => {
+  // Remove the root URL if found at beginning of string
+  const pathname = location.pathname.indexOf(root) == 0 ?
+    '/' + location.pathname.slice(root.length) :
+    location.pathname;
+  return Object.assign({}, location, { pathname });
+};
+const HISTORIES = {
+  'browser': createBrowserHistory,
+  'hash': createHashHistory
+};
+const Router = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.root = '/';
+    this.historyType = 'browser';
+    // A suffix to append to the page title whenever
+    // it's updated through RouteTitle
+    this.titleSuffix = '';
+    this.routeViewsUpdated = (options = {}) => {
+      if (this.history && options.scrollToId && this.historyType === 'browser') {
+        const elm = this.history.win.document.getElementById(options.scrollToId);
+        if (elm) {
+          return elm.scrollIntoView();
+        }
+      }
+      this.scrollTo(options.scrollTopOffset || this.scrollTopOffset);
+    };
+    this.isServer = getContext(this, "isServer");
+    this.queue = getContext(this, "queue");
+  }
+  componentWillLoad() {
+    this.history = HISTORIES[this.historyType](this.el.ownerDocument.defaultView);
+    this.history.listen((location) => {
+      location = getLocation(location, this.root);
+      this.location = location;
+    });
+    this.location = getLocation(this.history.location, this.root);
+  }
+  scrollTo(scrollToLocation) {
+    const history = this.history;
+    if (scrollToLocation == null || this.isServer || !history) {
+      return;
+    }
+    if (history.action === 'POP' && Array.isArray(history.location.scrollPosition)) {
+      return this.queue.write(() => {
+        if (history && history.location && Array.isArray(history.location.scrollPosition)) {
+          history.win.scrollTo(history.location.scrollPosition[0], history.location.scrollPosition[1]);
+        }
+      });
+    }
+    // okay, the frame has passed. Go ahead and render now
+    return this.queue.write(() => {
+      history.win.scrollTo(0, scrollToLocation);
+    });
+  }
+  render() {
+    if (!this.location || !this.history) {
+      return;
+    }
+    const state = {
+      historyType: this.historyType,
+      location: this.location,
+      titleSuffix: this.titleSuffix,
+      root: this.root,
+      history: this.history,
+      routeViewsUpdated: this.routeViewsUpdated
+    };
+    return (h(ActiveRouter.Provider, { state: state }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+};
+
+export { SparkleFacilitatorHeader as sparkle_facilitator_header, FacilitatorPage as sparkle_facilitator_page, SparkleForgotPassword as sparkle_forgot_password, SparkleGoals as sparkle_goals, SparkleGww as sparkle_gww, SparkleHeader as sparkle_header, SparkleHealth as sparkle_health, PageLogin as sparkle_login, SparkleMenu as sparkle_menu, SparkleMood as sparkle_mood, SparklePage as sparkle_page, SparkleResetPassword as sparkle_reset_password, SparkleRoot as sparkle_root, SparkleSignup as sparkle_signup, SparkleUnauthorized as sparkle_unauthorized, SparkleUserEnrollment as sparkle_user_enrollment, SparkleUserProfile as sparkle_user_profile, Route as stencil_route, Router as stencil_router };