@sparkle-learning/core 0.0.56 → 0.0.57

package/dist/sparkle-core/sparkle-menu.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, k as h } from './index-1dec9544.js';
+
+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;
+
+export { SparkleMenu as sparkle_menu };

package/dist/sparkle-core/sparkle-modal-image.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, k as h, n as Host } from './index-1dec9544.js';
+
+const modalImageCss = ":host{display:block}.overlay{opacity:0;visibility:hidden;position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0, 0, 0, 0.7);-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;display:flex;align-items:center;justify-content:center;z-index:100}.is-visible{opacity:1;visibility:visible;-webkit-transition:opacity 0.5s;transition:opacity 0.5s}.is-transparent{opacity:0}.modal-window{border-radius:25px;width:75%;height:75%;padding:50px;display:flex;align-items:center;justify-content:center}.modal-window__content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:zoom;animation-duration:0.6s}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}";
+
+const SparkleModalImage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.openDialog = false;
+    this.transparent = false;
+  }
+  handleKeyDown(ev) {
+    if (ev.key === 'Escape') {
+      this.openDialog = false;
+    }
+  }
+  handleScroll() {
+    if (this.openDialog) {
+      this.openDialog = false;
+    }
+  }
+  openImage() {
+    this.openDialog = true;
+  }
+  render() {
+    return (h(Host, null, h("a", { href: "javascript:void()", onClick: () => this.openImage() }, h("img", { src: this.src, alt: this.alt, width: this.width, height: this.height })), this.openDialog && h("div", { class: 'overlay ' + (this.openDialog ? 'is-visible' : '') + ' ' + (this.transparent ? 'is-transparent' : '') }, h("div", { class: "modal-window" }, h("div", { class: "modal-window__content" }, h("img", { src: this.src, alt: this.alt, width: this.width, height: this.height }))))));
+  }
+};
+{ /* <sparkle-modal-image src="/assets/img/characters/yuna.png">
+</sparkle-modal-image> */
+}
+SparkleModalImage.style = modalImageCss;
+
+export { SparkleModalImage as sparkle_modal_image };

package/dist/sparkle-core/sparkle-mood.entry.js

@@ -0,0 +1,76 @@
+import { r as registerInstance, h as getAssetPath, k as h, n as Host } from './index-1dec9544.js';
+import { d as MyMoodTemplate, e as MyMoodTemplateJSON, S as SparkleGlobal } from './util-ba470e54.js';
+import { E as EnvironmentConfigService, A as AssetsService } from './assets.service-6508aae6.js';
+import { F as FeedService, f as feedStore } from './feed.service-d495f3e1.js';
+import './index-0df264ee.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 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.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;
+
+export { SparkleMood as sparkle_mood };

package/dist/sparkle-core/sparkle-nav.entry.js

@@ -0,0 +1,113 @@
+import { r as registerInstance, k as h, o as getElement, n as Host } from './index-1dec9544.js';
+
+const navCss = "sparkle-nav{display:block;flex:0 0 auto;z-index:1}sparkle-nav .wrapper{position:relative}sparkle-nav .section-label{margin-bottom:0;font-size:14px;font-weight:600}sparkle-nav .module-list li,sparkle-nav .module-list ul li{list-style-type:none;margin:0;padding:0}sparkle-nav .module-list{margin-top:0;padding:0}sparkle-nav .module-list .section-label:first-of-type{margin-top:0}sparkle-nav .module-list li{font-size:14px;padding:10px 10px 0px 14px}sparkle-nav .module-list>li{margin-top:10px}sparkle-nav .module-list a{font-weight:400;color:#6c6c8b;text-decoration:none;white-space:nowrap;border:0}sparkle-nav .module-list a:not(.link-active){transition:color 0.2s}sparkle-nav .module-list a:hover{border:0}sparkle-nav .module-list .link-active{font-weight:bold;color:var(--ion-color-sparkle)}sparkle-nav .module-list .link-active a{color:var(--ion-color-sparkle)}sparkle-nav .module-list a:hover:not(.link-active){color:var(--ion-color-sparkle)}sparkle-nav .module-list ul li{padding-left:12px;transition:80ms height;display:block;overflow:hidden;text-overflow:ellipsis}sparkle-nav .module-list ul.collapsed li{height:0}sparkle-nav ul.session-list{margin:0;padding:10px 0px 0px 0px}sparkle-nav ul.session-list li a{display:flex;flex-direction:column;padding:15px 24px;position:relative}sparkle-nav ul.session-list li a:before{content:'';width:10px;height:10px;border-radius:50%;background:#dfe1e3;display:block;position:absolute;left:1px;top:50%;margin-top:-5px;z-index:5}sparkle-nav ul.session-list li a:after{content:'';background:#dfe1e3;height:100%;position:absolute;width:2px;display:block;left:5px;top:0}sparkle-nav ul.session-list li a.is-active{color:var(--ion-color-sparkle)}sparkle-nav ul.session-list li a.is-active:before{width:14px;height:14px;left:23px;margin-top:-7px;background:var(--ion-color-sparkle);box-shadow:0 0 4px var(--ion-color-sparkle)}sparkle-nav ul.session-list li a.is-active:after{background:#dfe1e3}sparkle-nav ul.session-list li stencil-route-link.is-completed a{}sparkle-nav ul.session-list li stencil-route-link.is-completed a:before{background:var(--ion-color-sparkle)}sparkle-nav ul.session-list li stencil-route-link.is-completed a:after{background:var(--ion-color-sparkle)}sparkle-nav ul.session-list li a p{color:#fff;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s ease-in-out color}sparkle-nav ul.session-list li a span{display:block;line-height:12px}sparkle-nav ul li span.coming-soon{font-size:0.7rem;display:block;background:0 0;color:#f6c95b;line-height:14px;border-radius:4px;padding:1px 4px 0;box-shadow:none;border:1px solid #f6c95b;width:85px;text-align:center}sparkle-nav ul.session-list li a:hover p{color:var(--ion-color-sparkle)}sparkle-nav ul.session-list li:first-child a:after{height:50%;top:50%}sparkle-nav ul.session-list li:last-child a:after{height:50%;bottom:50%}";
+
+const SparkleNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    //TODO: get this config somewhere from the config initialization
+    this.config = {
+      showRomanNumber: false,
+      showModuleIndex: true,
+      showSessionIndex: true,
+    };
+    this.toggleParent = (parentItem) => {
+      return (e) => {
+        e.preventDefault();
+        this.selectedParent = parentItem;
+      };
+    };
+  }
+  componentDidLoad() { }
+  //TODO: not working
+  pageDidLoadHandler($event) {
+    if ($event) {
+      //let pageInfo = $event.detail.pageInfo;
+      let splittedParts = window.location.pathname.split('/').filter(x => !!x && x != 'course');
+      this.moduleURLName = splittedParts[0];
+      this.sessionURLName = splittedParts[1];
+      if (this.toc) {
+        let courseModule = this.toc.courseModules.find(x => x.urlName == this.moduleURLName);
+        this.selectedParent = courseModule;
+      }
+    }
+  }
+  toggleLeftSidebar() { }
+  romanize(num) {
+    if (isNaN(num))
+      return NaN;
+    var digits = String(+num).split(''), key = [
+      '',
+      'C',
+      'CC',
+      'CCC',
+      'CD',
+      'D',
+      'DC',
+      'DCC',
+      'DCCC',
+      'CM',
+      '',
+      'X',
+      'XX',
+      'XXX',
+      'XL',
+      'L',
+      'LX',
+      'LXX',
+      'LXXX',
+      'XC',
+      '',
+      'I',
+      'II',
+      'III',
+      'IV',
+      'V',
+      'VI',
+      'VII',
+      'VIII',
+      'IX',
+    ], roman = '', i = 3;
+    while (i--)
+      roman = (key[+digits.pop() + i * 10] || '') + roman;
+    return Array(+digits.join('') + 1).join('M') + roman;
+  }
+  getModuleIndex(index, preventNumbering) {
+    return this.config.showModuleIndex && !preventNumbering ? (this.config.showRomanNumber ? this.romanize(index) : index) + '. ' : '';
+  }
+  getSessionIndex(index, preventNumbering) {
+    return this.config.showSessionIndex && !preventNumbering ? (index) + '. ' : '';
+  }
+  hostData() {
+    return {
+      role: 'navigation',
+    };
+  }
+  __stencil_render() {
+    let moduleIndex = 0;
+    let sessionIndex = 0;
+    return (h("ul", { class: "module-list" }, this.toc &&
+      this.toc.courseModules.map(module => {
+        sessionIndex = 0;
+        if (!module.preventNumbering) {
+          moduleIndex++;
+        }
+        return (module.sessions.length > 0 && (h("li", null, h("a", { class: { 'link-active': module.urlName == this.moduleURLName }, href: module.sessions[0].urlName || '#', onClick: this.toggleParent(module) }, h("span", { class: "section-label" }, this.getModuleIndex(moduleIndex, module.preventNumbering), module.name, module.comingSoon && h("span", { class: "coming-soon" }, " Coming soon"))), h("ul", { class: { 'collapsed': this.selectedParent ? module !== this.selectedParent : moduleIndex !== 0, 'session-list': true } }, module.sessions.map(session => {
+          if (!session.preventNumbering) {
+            sessionIndex++;
+          }
+          return (h("li", { class: {
+              'active': module.urlName == this.moduleURLName && session.urlName == this.sessionURLName,
+            } }, h("stencil-route-link", { class: {
+              'is-completed': true,
+              'link-active': module.urlName == this.moduleURLName && session.urlName == this.sessionURLName,
+            }, url: 'course/' + module.urlName + '/' + session.urlName + '/' + session.pages[0].urlName, onClick: () => this.toggleLeftSidebar() }, this.getSessionIndex(sessionIndex, session.preventNumbering), session.name, session.comingSoon && h("span", { class: "coming-soon" }, " Coming soon"))));
+        })))));
+      })));
+  }
+  get el() { return getElement(this); }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparkleNav.style = navCss;
+
+export { SparkleNav as sparkle_nav };

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

@@ -0,0 +1,25 @@
+import { r as registerInstance, m as Build, k as h } from './index-1dec9544.js';
+
+const notfoundPageCss = "notfound-page{text-align:center}";
+
+const SparkleNotFoundPage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.fileNotFound = () => {
+      const metaTag = document.createElement('meta');
+      metaTag.setAttribute('http-equiv', 'status');
+      metaTag.setAttribute('content', '404');
+      document.head.appendChild(metaTag);
+    };
+  }
+  render() {
+    if (!Build.isBrowser) {
+      this.fileNotFound();
+      return null;
+    }
+    return (h("div", null, h("h1", null, "Uh oh! We can't find the page you're looking for."), h("p", null, h("stencil-route-link", { url: '/', class: 'block' }, "Back to the home page"))));
+  }
+};
+SparkleNotFoundPage.style = notfoundPageCss;
+
+export { SparkleNotFoundPage as sparkle_notfound_page };

package/dist/sparkle-core/sparkle-online-students.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, k as h } from './index-1dec9544.js';
+import { f as facilitatorStore } from './facilitator.store-01be0386.js';
+import { S as SignalRService } from './signalR.service-2b7645c1.js';
+import './index-0df264ee.js';
+import './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 onlineStudentsCss = "";
+
+const SparkleOnlineStudents = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onlineStudents = [];
+    this.handleStudentChange = (user, change) => {
+      console.log("handle student change");
+      if (change == "list") {
+        facilitatorStore.state.onlineStudents = [...user];
+      }
+    };
+  }
+  componentDidLoad() {
+    console.log("componentDidLoad");
+    SignalRService.getInstance().connection.on("StudentAction", this.handleStudentChange);
+    this.refreshList();
+  }
+  navigateStudentTo(student) {
+    SignalRService.getInstance().callSignalR("NavigateStudentTo", { userId: student.userId, url: this.path.replace(".json", "") });
+  }
+  refreshList() {
+    SignalRService.getInstance().callSignalR("GetOnlineStudents", { CourseClassId: 1 });
+  }
+  render() {
+    console.log("faciliatator state", facilitatorStore.state.onlineStudents);
+    return (h("div", 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.refreshList() }, "Refresh")), h("div", null, facilitatorStore.state.onlineStudents.length > 0 &&
+      h("ol", { class: "list-group list-group-numbered" }, facilitatorStore.state.onlineStudents.map((item) => h("li", { class: "list-group-item d-flex justify-content-between align-items-start", key: item.userId }, h("div", { class: "ms-2 me-auto" }, h("div", { class: "fw-bold" }, item.name), item.currentUrl), h("button", { type: "button", class: "btn btn-primary btn-sm", onClick: () => this.navigateStudentTo(item) }, "Navigate")))), facilitatorStore.state.onlineStudents.length == 0 &&
+      h("div", { class: "text-center" }, h("h3", null, "No Students")))));
+  }
+};
+SparkleOnlineStudents.style = onlineStudentsCss;
+
+export { SparkleOnlineStudents as sparkle_online_students };

package/dist/sparkle-core/sparkle-overlay.entry.js

@@ -0,0 +1,90 @@
+import { r as registerInstance, q as createEvent, k as h, n as Host, o as getElement } from './index-1dec9544.js';
+
+const overlayCss = "sparkle-overlay{--sparkle-z-index-xl:500;--sparkle-transition-fast:0.3s;--sparkle-color-light-base:197, 209, 218;--sparkle-shadow-xl:0 20px 40px rgba(0, 0, 0, 0.2)}.sparkle-overlay{-ms-flex-align:center;align-items:center;display:flex;visibility:hidden;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:auto;-ms-touch-action:none;touch-action:none;opacity:0;z-index:var(--sparkle-z-index-xl)}.sparkle-overlay,.sparkle-overlay.opened{-webkit-transition:all var(--sparkle-transition-fast) ease-in-out;transition:all var(--sparkle-transition-fast) ease-in-out}.sparkle-overlay.opened{visibility:visible;opacity:1}.sparkle-overlay.opened .content{-webkit-transition:all var(--sparkle-transition-fast) ease-in-out;transition:all var(--sparkle-transition-fast) ease-in-out}.sparkle-overlay.light{background-color:rgba(var(--sparkle-color-light-base), 0.6)}.sparkle-overlay.dark{background-color:rgba(var(--sparkle-color-dark-base), 0.6)}.sparkle-overlay.absolute{position:absolute}.sparkle-overlay .scrim{border-radius:inherit;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-transition:inherit;transition:inherit;width:100%;will-change:opacity}.sparkle-overlay .content{position:relative;outline:none;-webkit-box-shadow:var(--sparkle-shadow-xl);box-shadow:var(--sparkle-shadow-xl);-webkit-transition:all var(--sparkle-transition-fast) ease-in-out;transition:all var(--sparkle-transition-fast) ease-in-out}";
+
+const FOCUSABLE_ELEMENTS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]';
+const SparkleOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.shown = createEvent(this, "shown", 7);
+    this.hidden = createEvent(this, "hidden", 7);
+    this.theme = 'dark';
+    this.preventClose = false;
+    this.focusIndex = 0;
+    this.isShowing = false;
+  }
+  async show() {
+    this.$focusedElBeforeOpen = document.activeElement;
+    this.$focusedElBeforeOpen && this.$focusedElBeforeOpen.setAttribute("aria-expanded", "true");
+    this.isShowing = true;
+    if (this.$focusableEls.length > 0)
+      setTimeout(() => this.$focusableEls[0].focus(), 100);
+    else
+      setTimeout(() => this.$content.focus(), 100);
+    this.shown.emit();
+  }
+  async hide() {
+    this.isShowing = false;
+    this.focusIndex = 0;
+    if (this.$focusedElBeforeOpen) {
+      this.$focusedElBeforeOpen.setAttribute("aria-expanded", "false");
+      this.$focusedElBeforeOpen.focus();
+    }
+    this.hidden.emit();
+  }
+  handleKeyDown(e) {
+    const KEY_TAB = 9;
+    const KEY_ESC = 27;
+    switch (e.keyCode) {
+      case KEY_TAB:
+        this.handleTab(e);
+        break;
+      case KEY_ESC:
+        this.handleEsc();
+        break;
+      default:
+        break;
+    }
+  }
+  handleEsc() {
+    if (!this.preventClose)
+      this.hide();
+  }
+  handleTab(e) {
+    e.preventDefault();
+    if (e.shiftKey) {
+      this.handleBackwardTab();
+    }
+    else {
+      this.handleForwardTab();
+    }
+  }
+  handleBackwardTab() {
+    this.focusIndex = this.focusIndex === 0 ? this.$focusableEls.length - 1 : --this.focusIndex;
+    this.$focusableEls[this.focusIndex].focus();
+  }
+  handleForwardTab() {
+    this.focusIndex = this.$focusableEls.length - 1 === this.focusIndex ? 0 : ++this.focusIndex;
+    this.$focusableEls[this.focusIndex].focus();
+  }
+  handleScrimClick() {
+    if (!this.preventClose)
+      this.hide();
+  }
+  componentDidLoad() {
+    this.$focusableEls = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS));
+  }
+  render() {
+    let classes = {
+      'sparkle-overlay': true,
+      [this.theme]: true,
+      'absolute': this.absolute,
+      'opened': this.isShowing
+    };
+    return (h(Host, { class: classes }, h("div", { class: "scrim", onClick: () => this.handleScrimClick() }), h("div", { class: "content", role: "dialog", "aria-labelledby": this.titleId, tabindex: "-1", ref: el => this.$content = el }, h("slot", null))));
+  }
+  get $el() { return getElement(this); }
+};
+SparkleOverlay.style = overlayCss;
+
+export { SparkleOverlay as sparkle_overlay };

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

@@ -0,0 +1,24 @@
+import { r as registerInstance, k as h, n as Host } from './index-1dec9544.js';
+
+const pageFooterCss = "sparkle-page-footer{margin-top:6rem}sparkle-page-footer .last-updated{color:var(--text-color--light);font-weight:normal;margin-left:auto;text-decoration:underline}sparkle-page-footer .page-footer__row{align-items:center;display:flex;font-size:12px;margin-top:2rem}@media (max-width: 768px){sparkle-page-footer{width:100% !important;left:0 !important}}";
+
+const SparklePageFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  hostData() {
+    return {
+      role: 'contentinfo',
+    };
+  }
+  __stencil_render() {
+    const { page } = this;
+    console.log(page);
+    const pagination = (page.previousText && page.previousUrl) || (page.nextText && page.nextUrl) ? h("sparkle-pagination", { page: page }) : '';
+    return pagination;
+  }
+  render() { return h(Host, this.hostData(), this.__stencil_render()); }
+};
+SparklePageFooter.style = pageFooterCss;
+
+export { SparklePageFooter as sparkle_page_footer };