@sparkle-learning/core 0.0.56 → 0.0.57

package/dist/sparkle-core/sparkle-facilitator-dashboard.entry.js

@@ -0,0 +1,93 @@
+import { r as registerInstance, k as h } from './index-1dec9544.js';
+import { F as FacilitatorService } from './facilitator.service-00a88935.js';
+import { f as facilitatorStore } from './facilitator.store-01be0386.js';
+import './index-0df264ee.js';
+import { E as EnvironmentConfigService, A as AssetsService } from './assets.service-6508aae6.js';
+import './localstorage.service-4bf408c8.js';
+import './index-1d7a6fa0.js';
+import './utils-cae23bce.js';
+import './animation-676a644d.js';
+import './helpers-f11f0674.js';
+import './ios.transition-02531dda.js';
+import './index-183cda39.js';
+import './md.transition-f8765467.js';
+import './cubic-bezier-4c0db14f.js';
+import './index-dd414b33.js';
+import './ionic-global-127576f6.js';
+import './index-be6112f8.js';
+import './index-0af0deac.js';
+import './hardware-back-button-fa04d6e9.js';
+import './overlays-fd3cfa13.js';
+
+const facilitatorDashboardCss = ":host{display:block}";
+
+const SparkleOnlineStudents = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showAllModules = true;
+  }
+  async componentWillLoad() {
+    const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
+    this.tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
+  }
+  async componentDidLoad() {
+    await this.fetchData();
+  }
+  async fetchData() {
+    await FacilitatorService.getInstance().fetchDashboardData({ ClassId: 1 });
+  }
+  renderClassFeedPosts() {
+    var _a, _b;
+    return (h("table", { class: "table" }, h("thead", null, h("tr", null, h("th", { scope: "col" }, "Name"), h("th", { scope: "col" }, "Email"), h("th", { scope: "col" }, "Post Text"), h("th", { scope: "col" }, "App Name"), h("th", { scope: "col" }, "Comment"), h("th", { scope: "col" }, "Visibility"))), h("tbody", null, (_a = facilitatorStore.state.dashboardData) === null || _a === void 0 ? void 0 :
+      _a.ClassFeedPosts.map(item => h("tr", null, h("td", null, item.UserName), h("td", null, item.Email), h("td", null, item.PostText), h("td", null, item.MiniAppName), h("td", null, item.CommentsCount), h("td", null, item.PostVisibility))), this.renderLoadingOrNoData(6, (_b = facilitatorStore.state.dashboardData) === null || _b === void 0 ? void 0 : _b.ClassFeedPosts))));
+  }
+  renderLoadingOrNoData(colspan, items) {
+    let status = facilitatorStore.state.dashboardDataLoading ? "Loading..." : ((items === null || items === void 0 ? void 0 : items.length) == 0 ? "No Data" : "");
+    if (status) {
+      return (h("tr", null, h("td", { colSpan: colspan }, status)));
+    }
+    return null;
+  }
+  renderStudentsAssignment() {
+    var _a, _b;
+    return (h("table", { class: "table" }, h("thead", null, h("tr", null, h("th", { scope: "col" }, "Name"), h("th", { scope: "col" }, "Email"), h("th", { scope: "col" }, "Assignment Name"), h("th", { scope: "col" }, "Submited Date"), h("th", { scope: "col" }, "Assignment Data"))), h("tbody", null, (_a = facilitatorStore.state.dashboardData) === null || _a === void 0 ? void 0 :
+      _a.StudentAssignments.map(item => h("tr", null, h("td", null, item.Name), h("td", null, item.Email), h("td", null, item.AssignmentName), h("td", null, item.SubmittedDate), h("td", null, item.AssignmentData))), this.renderLoadingOrNoData(5, (_b = facilitatorStore.state.dashboardData) === null || _b === void 0 ? void 0 : _b.StudentAssignments))));
+  }
+  renderStudentsQuizResponses() {
+    var _a, _b;
+    return (h("table", { class: "table" }, h("thead", null, h("tr", null, h("th", { scope: "col" }, "Name"), h("th", { scope: "col" }, "Email"), h("th", { scope: "col" }, "Response Type"), h("th", { scope: "col" }, "Submitted Date"), h("th", { scope: "col" }, "Questions"), h("th", { scope: "col" }, "Response"))), h("tbody", null, (_a = facilitatorStore.state.dashboardData) === null || _a === void 0 ? void 0 :
+      _a.StudentQuizResponses.map(item => h("tr", null, h("td", null, item.Name), h("td", null, item.Email), h("td", null, item.ResponseType), h("td", null, item.SubmittedDate), h("td", null, item.Question), h("td", null, item.Response))), this.renderLoadingOrNoData(6, (_b = facilitatorStore.state.dashboardData) === null || _b === void 0 ? void 0 : _b.StudentQuizResponses))));
+  }
+  renderDiscussion() {
+    return (h("div", { class: "accordion", id: "accordionExample" }, h("div", { class: "accordion-item" }, h("h2", { class: "accordion-header", id: "headingOne" }, h("button", { class: "accordion-button", type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#collapseOne", "aria-expanded": "true", "aria-controls": "collapseOne" }, "Accordion Item #1")), h("div", { id: "collapseOne", class: "accordion-collapse collapse show", "aria-labelledby": "headingOne", "data-bs-parent": "#accordionExample" }, h("div", { class: "accordion-body" }, h("strong", null, "This is the first item's accordion body."), " It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the ", h("code", null, ".accordion-body"), ", though the transition does limit overflow."))), h("div", { class: "accordion-item" }, h("h2", { class: "accordion-header", id: "headingTwo" }, h("button", { class: "accordion-button collapsed", type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#collapseTwo", "aria-expanded": "false", "aria-controls": "collapseTwo" }, "Accordion Item #2")), h("div", { id: "collapseTwo", class: "accordion-collapse collapse", "aria-labelledby": "headingTwo", "data-bs-parent": "#accordionExample" }, h("div", { class: "accordion-body" }, h("strong", null, "This is the second item's accordion body."), " It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the ", h("code", null, ".accordion-body"), ", though the transition does limit overflow."))), h("div", { class: "accordion-item" }, h("h2", { class: "accordion-header", id: "headingThree" }, h("button", { class: "accordion-button collapsed", type: "button", "data-bs-toggle": "collapse", "data-bs-target": "#collapseThree", "aria-expanded": "false", "aria-controls": "collapseThree" }, "Accordion Item #3")), h("div", { id: "collapseThree", class: "accordion-collapse collapse", "aria-labelledby": "headingThree", "data-bs-parent": "#accordionExample" }, h("div", { class: "accordion-body" }, h("strong", null, "This is the third item's accordion body."), " It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the ", h("code", null, ".accordion-body"), ", though the transition does limit overflow.")))));
+  }
+  renderFacilitators() {
+    var _a, _b;
+    return (h("table", { class: "table" }, h("thead", null, h("tr", null, h("th", { scope: "col" }, "Name"), h("th", { scope: "col" }, "Email"))), h("tbody", null, (_a = facilitatorStore.state.dashboardData) === null || _a === void 0 ? void 0 :
+      _a.Facilitators.map(item => h("tr", null, h("td", null, item.Name), h("td", null, item.Email))), this.renderLoadingOrNoData(2, (_b = facilitatorStore.state.dashboardData) === null || _b === void 0 ? void 0 : _b.Facilitators))));
+  }
+  renderStudents() {
+    var _a, _b;
+    return (h("table", { class: "table" }, h("thead", null, h("tr", null, h("th", { scope: "col" }, "Name"), h("th", { scope: "col" }, "Email"))), h("tbody", null, (_a = facilitatorStore.state.dashboardData) === null || _a === void 0 ? void 0 :
+      _a.Students.map(item => h("tr", null, h("td", null, item.Name), h("td", null, item.Email))), this.renderLoadingOrNoData(2, (_b = facilitatorStore.state.dashboardData) === null || _b === void 0 ? void 0 : _b.Students))));
+  }
+  onModuleDropdownChange(e) {
+    this.selectedModule = e.target.value;
+    this.selectedSession = "";
+    this.selectedPage = "";
+  }
+  onSessionDropdownChange(e) {
+    this.selectedSession = e.target.value;
+    this.selectedPage = "";
+  }
+  filterData() {
+  }
+  render() {
+    return (h("div", null, h("nav", { class: "navbar navbar-light bg-light" }, h("form", { class: "container-fluid justify-content-space-between" }, h("div", { class: "form-check" }, h("input", { class: "form-check-input", type: "checkbox", value: "", id: "flexCheckChecked", onInput: (e) => this.showAllModules = e.target.checked, checked: this.showAllModules }), h("label", { class: "form-check-label", htmlFor: "flexCheckChecked" }, "All Modules")), h("button", { class: "btn btn-primary pull-right", type: "button", onClick: () => this.fetchData() }, "Refresh")), !this.showAllModules &&
+      h("div", { class: "d-flex" }, h("div", { class: "p-1" }, h("select", { class: "form-select", "aria-label": "Default select example", onChange: (e) => this.onModuleDropdownChange(e) }, h("option", { value: "", selected: this.selectedModule == "" }, "Select Module"), this.tocData.courseModules.map(item => h("option", { value: item.urlName, selected: item.urlName == this.selectedModule }, item.name)))), h("div", { class: "p-1" }, this.selectedModule && h("select", { class: "form-select", "aria-label": "Default select example", onChange: (e) => this.onSessionDropdownChange(e) }, h("option", { value: "", selected: this.selectedSession == "" }, "Select Session"), this.tocData.courseModules.find(x => x.urlName == this.selectedModule).sessions.map(item => h("option", { value: item.urlName, selected: item.urlName == this.selectedSession }, item.name)))), h("div", { class: "p-1" }, this.selectedModule && this.selectedSession && h("select", { class: "form-select", "aria-label": "Default select example", onChange: (e) => this.selectedPage = e.target.value }, h("option", { value: "", selected: this.selectedPage == "" }, "Select Page"), this.tocData.courseModules.find(x => x.urlName == this.selectedModule).sessions.find(x => x.urlName == this.selectedSession).pages.map(item => h("option", { value: item.urlName, selected: item.urlName == this.selectedPage }, item.name)))), this.selectedModule && this.selectedSession && this.selectedPage &&
+        h("div", { class: "p-1" }, h("button", { class: "btn btn-primary", type: "button", onClick: () => this.filterData() }, "Filter")))), h("div", null, h("div", null, h("h1", null, "Class Feed Posts"), this.renderClassFeedPosts()), h("div", null, h("h1", null, "Student Assignments"), this.renderStudentsAssignment()), h("div", null, h("h1", null, "Quiz Responses"), this.renderStudentsQuizResponses()), h("div", null, h("h1", null, "Discussions"), this.renderDiscussion()), h("div", { class: "row" }, h("div", { class: "col-sm-6" }, h("h1", null, "Facilitators"), this.renderFacilitators()), h("div", { class: "col-sm-6" }, h("h1", null, "Students"), this.renderStudents())))));
+  }
+};
+SparkleOnlineStudents.style = facilitatorDashboardCss;
+
+export { SparkleOnlineStudents as sparkle_facilitator_dashboard };

package/dist/sparkle-core/sparkle-facilitator-header.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, k as h, o as getElement, n as Host } from './index-1dec9544.js';
+import './index-1d7a6fa0.js';
+import { m as menuController } from './index-0af0deac.js';
+import './utils-cae23bce.js';
+import './animation-676a644d.js';
+import './helpers-f11f0674.js';
+import './ios.transition-02531dda.js';
+import './index-183cda39.js';
+import './md.transition-f8765467.js';
+import './cubic-bezier-4c0db14f.js';
+import './index-dd414b33.js';
+import './ionic-global-127576f6.js';
+import './index-be6112f8.js';
+import './overlays-fd3cfa13.js';
+import './hardware-back-button-fa04d6e9.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() {
+    var sidebar = 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;
+
+export { SparkleFacilitatorHeader as sparkle_facilitator_header };

package/dist/sparkle-core/sparkle-facilitator-notes-form.entry.js

@@ -0,0 +1,160 @@
+import { k as h, r as registerInstance, n as Host, o as getElement } from './index-1dec9544.js';
+import './index-1d7a6fa0.js';
+import { F as FacilitatorService } from './facilitator.service-00a88935.js';
+import { f as facilitatorStore } from './facilitator.store-01be0386.js';
+import { t as toastController } from './overlays-fd3cfa13.js';
+import './utils-cae23bce.js';
+import './animation-676a644d.js';
+import './helpers-f11f0674.js';
+import './ios.transition-02531dda.js';
+import './index-183cda39.js';
+import './md.transition-f8765467.js';
+import './cubic-bezier-4c0db14f.js';
+import './index-dd414b33.js';
+import './ionic-global-127576f6.js';
+import './index-be6112f8.js';
+import './index-0af0deac.js';
+import './hardware-back-button-fa04d6e9.js';
+import './index-0df264ee.js';
+import './assets.service-6508aae6.js';
+import './localstorage.service-4bf408c8.js';
+
+const Logo = (props) => (h("div", Object.assign({}, props), "Mind & Body"));
+const BackArrow = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M217.9 256L345 129c9.4-9.4 9.4-24.6 0-33.9-9.4-9.4-24.6-9.3-34 0L167 239c-9.1 9.1-9.3 23.7-.7 33.1L310.9 417c4.7 4.7 10.9 7 17 7s12.3-2.3 17-7c9.4-9.4 9.4-24.6 0-33.9L217.9 256z" })));
+const Book = (props) => (h("svg", Object.assign({ viewBox: "0 0 16 14", fill: "none" }, props),
+  h("path", { d: "M0 0.21875C0 0.21875 1.5 -0.273438 4 0.21875C6.5 0.710938 8 2.1875 8 2.1875V14C8 14 6 13.0156 4 12.5234C2 12.0312 0 12.0312 0 12.0312V0.21875Z", fill: "#73849A" }),
+  h("path", { d: "M16 0.21875C16 0.21875 14.5 -0.273438 12 0.21875C9.5 0.710938 8 2.1875 8 2.1875V14C8 14 10 13.0156 12 12.5234C14 12.0312 16 12.0312 16 12.0312V0.21875Z", fill: "#B2BECD" })));
+const Close = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm52.7 283.3L256 278.6l-52.7 52.7c-6.2 6.2-16.4 6.2-22.6 0-3.1-3.1-4.7-7.2-4.7-11.3 0-4.1 1.6-8.2 4.7-11.3l52.7-52.7-52.7-52.7c-3.1-3.1-4.7-7.2-4.7-11.3 0-4.1 1.6-8.2 4.7-11.3 6.2-6.2 16.4-6.2 22.6 0l52.7 52.7 52.7-52.7c6.2-6.2 16.4-6.2 22.6 0 6.2 6.2 6.2 16.4 0 22.6L278.6 256l52.7 52.7c6.2 6.2 6.2 16.4 0 22.6-6.2 6.3-16.4 6.3-22.6 0z" })));
+const DownArrow = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z" })));
+const ForwardArrow = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z" })));
+const Outbound = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z" })));
+const Search = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M443.5 420.2L336.7 312.4c20.9-26.2 33.5-59.4 33.5-95.5 0-84.5-68.5-153-153.1-153S64 132.5 64 217s68.5 153 153.1 153c36.6 0 70.1-12.8 96.5-34.2l106.1 107.1c3.2 3.4 7.6 5.1 11.9 5.1 4.1 0 8.2-1.5 11.3-4.5 6.6-6.3 6.8-16.7.6-23.3zm-226.4-83.1c-32.1 0-62.3-12.5-85-35.2-22.7-22.7-35.2-52.9-35.2-84.9 0-32.1 12.5-62.3 35.2-84.9 22.7-22.7 52.9-35.2 85-35.2s62.3 12.5 85 35.2c22.7 22.7 35.2 52.9 35.2 84.9 0 32.1-12.5 62.3-35.2 84.9-22.7 22.7-52.9 35.2-85 35.2z" })));
+const GitBranch = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M416 160c0-35.3-28.7-64-64-64s-64 28.7-64 64c0 23.7 12.9 44.3 32 55.4v8.6c0 19.9-7.8 33.7-25.3 44.9-15.4 9.8-38.1 17.1-67.5 21.5-14 2.1-25.7 6-35.2 10.7V151.4c19.1-11.1 32-31.7 32-55.4 0-35.3-28.7-64-64-64S96 60.7 96 96c0 23.7 12.9 44.3 32 55.4v209.2c-19.1 11.1-32 31.7-32 55.4 0 35.3 28.7 64 64 64s64-28.7 64-64c0-16.6-6.3-31.7-16.7-43.1 1.9-4.9 9.7-16.3 29.4-19.3 38.8-5.8 68.9-15.9 92.3-30.8 36-22.8 55-57 55-98.8v-8.6c19.1-11.1 32-31.7 32-55.4zM160 56c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zm0 400c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm192-256c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z" })));
+const Menu = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z" })));
+const MoreDots = (props) => (h("svg", Object.assign({ viewBox: "0 0 4 16" }, props),
+  h("path", { d: "M4 2C4 0.8999 3.1001 0 2 0C0.8999 0 0 0.8999 0 2C0 3.1001 0.8999 4 2 4C3.1001 4 4 3.1001 4 2ZM4 14C4 12.8999 3.1001 12 2 12C0.8999 12 0 12.8999 0 14C0 15.1001 0.8999 16 2 16C3.1001 16 4 15.1001 4 14ZM4 8C4 6.8999 3.1001 6 2 6C0.8999 6 0 6.8999 0 8C0 9.1001 0.8999 10 2 10C3.1001 10 4 9.1001 4 8Z", fill: "#5B708B" })));
+const Checkmark = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M186.301 339.893L96 249.461l-32 30.507L186.301 402 448 140.506 416 110z" })));
+const CheckmarkSoft = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M362.6 192.9L345 174.8c-.7-.8-1.8-1.2-2.8-1.2-1.1 0-2.1.4-2.8 1.2l-122 122.9-44.4-44.4c-.8-.8-1.8-1.2-2.8-1.2-1 0-2 .4-2.8 1.2l-17.8 17.8c-1.6 1.6-1.6 4.1 0 5.7l56 56c3.6 3.6 8 5.7 11.7 5.7 5.3 0 9.9-3.9 11.6-5.5h.1l133.7-134.4c1.4-1.7 1.4-4.2-.1-5.7z" })));
+const Info = (props) => (h("svg", Object.assign({ viewBox: "0 0 512 512" }, props),
+  h("path", { d: "M256 48C141.2 48 48 141.2 48 256s93.2 208 208 208 208-93.2 208-208S370.8 48 256 48zm21 312h-42V235h42v125zm0-166h-42v-42h42v42z" })));
+const Translation = (props) => (h("svg", Object.assign({ viewBox: "0 0 22 14", fill: "none" }, props),
+  h("path", { d: "M19.3213 13.9999H22.0001L17.039 1.21558H14.2346L9.2832 13.9999H11.8072L13.0064 10.7307H18.1415L19.3213 13.9999ZM15.5014 3.65195H15.6658L17.5613 8.92339H13.5866L15.5014 3.65195Z", fill: "#B2BECD" }),
+  h("path", { d: "M0 1.10938H12.4318L11.5697 3.32812H0V1.10938Z", fill: "#B2BECD" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.75268 1.11609C8.75268 1.11609 8.75268 1.11712 9.89332 1.11712C11.034 1.11712 11.034 1.11822 11.034 1.11822L11.034 1.11939L11.034 1.12198L11.0339 1.12805L11.0337 1.14382C11.0335 1.15593 11.0332 1.17122 11.0325 1.1896C11.0313 1.22637 11.029 1.27554 11.0248 1.33642C11.0164 1.45817 11.0003 1.62689 10.9695 1.83709C10.9081 2.25748 10.7879 2.84428 10.5533 3.55314C10.083 4.97375 9.15623 6.87412 7.33744 8.89844L7.30893 8.93017L2.7154 13.3124L1.24023 11.7004L5.63338 7.45082C7.21765 5.67868 7.9949 4.05478 8.37789 2.89777C8.57098 2.31443 8.66471 1.84706 8.71016 1.53633C8.73288 1.38097 8.74352 1.2649 8.74847 1.19324C8.75095 1.15741 8.752 1.13272 8.75243 1.11981L8.75272 1.10938L8.7527 1.11094L8.75269 1.11345L8.75268 1.11609Z", fill: "#B2BECD" }),
+  h("rect", { x: "5.5166", width: "2.20704", height: "1.10937", fill: "#B2BECD" }),
+  h("path", { d: "M4.17075 7.9686C3.09555 6.69872 2.39593 5.48407 1.94141 4.4375H4.40026C4.76103 5.09472 5.24197 5.81584 5.88345 6.5682L5.93101 6.62398L5.96524 6.67692C5.96787 6.68067 5.97319 6.68816 5.98137 6.69921C6.0017 6.72667 6.03969 6.77615 6.09781 6.8448C6.21395 6.98199 6.41098 7.19635 6.70864 7.46479C7.19301 7.9016 8.18265 8.61127 9.29424 9.23901L8.50109 11.2671C6.94927 10.5044 5.9002 9.71638 5.23489 9.11639C4.86256 8.78062 4.5965 8.49477 4.41706 8.28281C4.32738 8.17688 4.25946 8.08955 4.21081 8.02383C4.19559 8.00327 4.18226 7.98483 4.17075 7.9686Z", fill: "#B2BECD" })));
+const LoadingSpinner = () => (h("div", { class: "spinner-border", role: "status" }));
+
+const facilitatorNotesFormCss = ":host{display:block}";
+
+const FacilitatorNotesForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.formControls = {
+      noteText: {
+        isValid: true,
+        value: "",
+        errorMessage: "",
+        validate: value => {
+          console.log(value);
+          if (value && value.length > 0) {
+            return { valid: true, errorMessage: "" };
+          }
+          else {
+            return { valid: false, errorMessage: "Notes is required" };
+          }
+        },
+      }
+    };
+    this.submitted = false;
+  }
+  componentDidLoad() {
+    if (this.initialValues) {
+      this.changeFormValue("noteText", this.initialValues.NoteText);
+    }
+  }
+  async onSubmit(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.isValid = control.validate(control.value).valid;
+      control.errorMessage = control.validate(control.value).errorMessage;
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      if (this.initialValues && this.initialValues.Id > 0) {
+        let result = await FacilitatorService.getInstance().updateFacilitatorNote({
+          NoteText: this.formControls.noteText.value,
+          Id: this.initialValues.Id
+        });
+        if (result.Succeeded) {
+          const toast = await toastController.create({
+            message: "Notes updated successfully",
+            duration: 3000
+          });
+          toast.present();
+          this.dismiss();
+        }
+        else {
+          const toast = await toastController.create({
+            message: result.Message,
+            duration: 3000
+          });
+          toast.present();
+        }
+      }
+      else {
+        let result = await FacilitatorService.getInstance().addFacilitatorNote({
+          NoteText: this.formControls.noteText.value
+        });
+        if (result.Succeeded) {
+          const toast = await toastController.create({
+            message: "Notes added successfully",
+            duration: 3000
+          });
+          toast.present();
+          this.dismiss();
+        }
+        else {
+          const toast = await toastController.create({
+            message: result.Message,
+            duration: 3000
+          });
+          toast.present();
+        }
+      }
+    }
+  }
+  dismiss(data) {
+    // dismiss the closest modal and optionally pass back data
+    this.el.closest('ion-modal').dismiss({
+      'dismissed': true
+    });
+  }
+  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).valid, errorMessage: this.formControls[controlName].validate(value).errorMessage }) });
+  }
+  render() {
+    const noteTextValidation = !this.formControls.noteText.isValid ? "is-invalid" : "is-valid";
+    return (h(Host, null, h("ion-header", { translucent: true }, h("ion-toolbar", null, h("ion-title", null, "Facilitator Note"), h("ion-buttons", { slot: "end" }, h("ion-button", { onClick: () => this.dismiss() }, "Close")))), h("ion-content", { class: "ion-padding" }, h("form", { onSubmit: (e) => this.onSubmit(e), novalidate: true }, h("div", { class: "mb-3" }, h("label", { htmlFor: "validationTextarea", class: "form-label" }, "Notes"), h("textarea", { class: `form-control ${this.submitted && noteTextValidation}`, placeholder: "Notes", value: this.formControls.noteText.value, onChange: (e) => this.changeFormValue("noteText", e.target.value) }), this.formControls.noteText.errorMessage && h("div", { class: "invalid-feedback" }, this.formControls.noteText.errorMessage)), h("div", { class: "mb-3" }, facilitatorStore.state.notesLoading && h(LoadingSpinner, null), h("button", { class: "btn btn-primary", type: "submit", disabled: facilitatorStore.state.notesLoading }, "Submit"))))));
+  }
+  get el() { return getElement(this); }
+};
+FacilitatorNotesForm.style = facilitatorNotesFormCss;
+
+export { FacilitatorNotesForm as sparkle_facilitator_notes_form };

package/dist/sparkle-core/sparkle-facilitator-notes.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, k as h, n as Host } from './index-1dec9544.js';
+import { F as FacilitatorService } from './facilitator.service-00a88935.js';
+import { f as facilitatorStore } from './facilitator.store-01be0386.js';
+import './index-1d7a6fa0.js';
+import { m as modalController } from './overlays-fd3cfa13.js';
+import './index-0df264ee.js';
+import './assets.service-6508aae6.js';
+import './localstorage.service-4bf408c8.js';
+import './utils-cae23bce.js';
+import './animation-676a644d.js';
+import './helpers-f11f0674.js';
+import './ios.transition-02531dda.js';
+import './index-183cda39.js';
+import './md.transition-f8765467.js';
+import './cubic-bezier-4c0db14f.js';
+import './index-dd414b33.js';
+import './ionic-global-127576f6.js';
+import './index-be6112f8.js';
+import './index-0af0deac.js';
+import './hardware-back-button-fa04d6e9.js';
+
+const facilitatorNotesCss = ":host{display:block}table{table-layout:auto}.c1{width:80%}.c2{width:20%}";
+
+const FacilitatorNotes = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  async componentDidLoad() {
+    await this.fetchData();
+  }
+  async fetchData() {
+    await FacilitatorService.getInstance().fetchNotes({ showAllNotes: false });
+  }
+  async deleteNote(id) {
+    await FacilitatorService.getInstance().deleteFacilitatorNote(id);
+  }
+  async deleteNoteConfirmation(id) {
+    if (window.confirm("Do you really want to delete this note?")) {
+      await this.deleteNote(id);
+    }
+  }
+  async presentFacilitatorNotesModal(values) {
+    const modal = await modalController.create({
+      component: 'sparkle-facilitator-notes-form',
+      cssClass: 'sparkle-modal sparkle-facilitator-notes-form',
+      componentProps: {
+        initialValues: values
+      }
+    });
+    await modal.present();
+  }
+  renderNotes() {
+    var _a, _b, _c;
+    return (h("table", { class: "table" }, h("thead", null, h("tr", null, h("th", { scope: "col" }, "Notes"), h("th", { scope: "col" }, "Action"))), h("tbody", null, (_a = facilitatorStore.state.pageNotes) === null || _a === void 0 ? void 0 :
+      _a.map(item => h("tr", null, h("td", { class: "c1" }, item.NoteText), h("td", { class: "c2" }, h("div", { class: "d-flex" }, h("div", { class: "p-2" }, h("button", { class: "btn btn-primary", type: "button", onClick: () => this.presentFacilitatorNotesModal(item) }, "Edit")), h("div", { class: "p-2" }, h("button", { class: "btn btn-dark", type: "button", onClick: () => this.deleteNoteConfirmation(item.Id) }, "Delete")))))), !facilitatorStore.state.pageNotes || ((_b = facilitatorStore.state.pageNotes) === null || _b === void 0 ? void 0 : _b.length) == 0 &&
+      h("tr", null, h("td", { colSpan: 2 }, facilitatorStore.state.notesLoading ? "Loading..." : (((_c = facilitatorStore.state.pageNotes) === null || _c === void 0 ? void 0 : _c.length) == 0 ? "No Data" : ""))))));
+  }
+  render() {
+    console.log("render");
+    return (h(Host, null, h("div", { class: "p-2 pb-4 d-md-flex justify-content-md-end" }, h("button", { class: "btn btn-primary pull-right", type: "button", onClick: () => this.presentFacilitatorNotesModal(null) }, "+ Add Note")), this.renderNotes()));
+  }
+};
+FacilitatorNotes.style = facilitatorNotesCss;
+
+export { FacilitatorNotes as sparkle_facilitator_notes };

package/dist/sparkle-core/sparkle-facilitator-page.entry.js

@@ -0,0 +1,198 @@
+import { r as registerInstance, q as createEvent, k as h, F as Fragment, n as Host } from './index-1dec9544.js';
+import { S as SignalRService } from './signalR.service-2b7645c1.js';
+import { t as templates } from './index-81dab78f.js';
+import { S as StoreService } from './store.service-0f7d998b.js';
+import { d as TocStore } from './index-0df264ee.js';
+import { F as FacilitatorService } from './facilitator.service-00a88935.js';
+import { f as facilitatorStore } from './facilitator.store-01be0386.js';
+import './assets.service-6508aae6.js';
+import './util-ba470e54.js';
+import './localstorage.service-4bf408c8.js';
+import './index-1d7a6fa0.js';
+import './utils-cae23bce.js';
+import './animation-676a644d.js';
+import './helpers-f11f0674.js';
+import './ios.transition-02531dda.js';
+import './index-183cda39.js';
+import './md.transition-f8765467.js';
+import './cubic-bezier-4c0db14f.js';
+import './index-dd414b33.js';
+import './ionic-global-127576f6.js';
+import './index-be6112f8.js';
+import './index-0af0deac.js';
+import './hardware-back-button-fa04d6e9.js';
+import './overlays-fd3cfa13.js';
+
+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", 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() {
+    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;
+
+export { FacilitatorPage as sparkle_facilitator_page };