@sparkle-learning/core 0.0.57 → 0.0.58

package/dist/collection/components/layout/page/page.js

@@ -0,0 +1,321 @@
+import { Component, Prop, State, Event, Watch, h } from '@stencil/core';
+import templates from './templates';
+import { modalController, alertController } from '@ionic/core';
+import { AuthStore } from '../../../stores/auth.store';
+import userStore from '../../../stores/user.store';
+import { StoreService } from '../../../services/store.service';
+import { SignalRService } from '../../../services/signalR.service';
+import signalRStore from '../../../stores/signalR.store';
+export class SparklePage {
+  constructor() {
+    this.presentation = false;
+    this.page = { title: null, path: null, body: null, pageInfo: null };
+    this.isLesson = false;
+    this.eventEmitter = (user, data) => {
+      let event = new CustomEvent('receivedSignalREvent', { detail: JSON.parse(data) });
+      document.body.dispatchEvent(event);
+    };
+    this.pollSubmissionEventEmitter = (type, data) => {
+      let event = new CustomEvent('receivedPollSubmissionSignalREvent', { detail: { data: data, type: type } });
+      document.body.dispatchEvent(event);
+    };
+    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('SendMessage', this.eventEmitter);
+          SignalRService.getInstance().connection.on('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
+          SignalRService.getInstance().connection.on('PollSubmission', this.pollSubmissionEventEmitter);
+        }
+        else {
+          SignalRService.getInstance().connection.off('SendMessage', this.eventEmitter);
+          SignalRService.getInstance().connection.off('PollSubmission', this.eventEmitter);
+          SignalRService.getInstance().connection.off('NavigateFacilitatorPresentationCourseTo', this.handleFacilitatorNavigationChange);
+        }
+      });
+    }
+  }
+  fetchPage(path, oldPath) {
+    if (SignalRService.getInstance().connection._connectionState == 'Connected') {
+      SignalRService.getInstance().callSignalR('OnStudentNavigate', { url: window.location.href });
+      if (this.presentation) {
+        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 '';
+  }
+  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 is() { return "sparkle-page"; }
+  static get originalStyleUrls() { return {
+    "$": ["page.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["page.css"]
+  }; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "path": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "path",
+      "reflect": false
+    },
+    "presentation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "presentation",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "badFetch": {},
+    "page": {},
+    "isLesson": {}
+  }; }
+  static get events() { return [{
+      "method": "pageDidLoad",
+      "name": "pageDidLoad",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ pageInfo: IPageResult }",
+        "resolved": "{ pageInfo: IPageResult; }",
+        "references": {
+          "IPageResult": {
+            "location": "import",
+            "path": "../../../models/page.model"
+          }
+        }
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "path",
+      "methodName": "fetchPage"
+    }, {
+      "propName": "page",
+      "methodName": "setDocumentMeta"
+    }]; }
+}

package/dist/collection/components/layout/page/templates/default.js

@@ -0,0 +1,9 @@
+import { h } from '@stencil/core';
+import { toHypertext } from '../to-hypertext';
+export default props => {
+  const { page } = props;
+  return (h("article", null,
+    page.renderTitle !== false ? h("h1", null, page.title) : null,
+    h("section", { class: "markdown-content" }, toHypertext(h, page.body)),
+    h("sparkle-page-footer", { page: page })));
+};

package/dist/collection/components/layout/page/templates/error.js

@@ -0,0 +1,33 @@
+import { h } from '@stencil/core';
+import { sample } from '../../../../util';
+export default (response) => (h("main", { class: "Error full-screen" },
+  h("div", null, sample(appropriateEmoji)),
+  h("h1", null, getHelpfulTitle(response)),
+  h("p", null, getHelpfulMessage(response))));
+const getHelpfulTitle = (response) => {
+  switch (response.status) {
+    case 404:
+      return 'Not Found';
+    default:
+      return 'Uh Oh';
+  }
+};
+const getHelpfulMessage = (response) => {
+  switch (response.status) {
+    case 404:
+      return 'Sorry, we couldn\'t find that page.';
+    default:
+      return 'Sorry, something went wrong.';
+  }
+};
+const appropriateEmoji = [
+  '😕',
+  '😟',
+  '😑',
+  '😧',
+  '😯',
+  '😮',
+  '🙃',
+  '🤕',
+  '😫'
+];

package/dist/collection/components/layout/page/templates/index.js

@@ -0,0 +1,8 @@
+import defaultTemplate from './default';
+import pdfTemplate from './pdf';
+import error from './error';
+export default {
+  'default': defaultTemplate,
+  'pdf': pdfTemplate,
+  'error': error
+};

package/dist/collection/components/layout/page/templates/pdf.js

@@ -0,0 +1,8 @@
+import { h } from '@stencil/core';
+import { toHypertext } from '../to-hypertext';
+export default props => {
+  const { page } = props;
+  return (h("article", null,
+    page.renderTitle !== false ? h("h1", null, page.title) : null,
+    h("section", { class: "markdown-content" }, toHypertext(h, page.body))));
+};

package/dist/collection/components/layout/page/to-hypertext.js

@@ -0,0 +1,27 @@
+export const toHypertext = (h, data) => {
+  const args = [];
+  for (let i = 0; i < data.length; i++) {
+    let arg = data[i];
+    if (i === 0 && typeof arg === 'string' && tagBlacklist.includes(arg.toLowerCase().trim())) {
+      arg = 'template';
+    }
+    else if (i === 1 && arg) {
+      const attrs = {};
+      Object.keys(arg).forEach(key => {
+        const k = key.toLowerCase();
+        if (!k.startsWith('on') && k !== 'innerhtml') {
+          attrs[key] = arg[key];
+        }
+      });
+      arg = attrs;
+    }
+    else if (i > 1) {
+      if (Array.isArray(arg)) {
+        arg = toHypertext(h, arg);
+      }
+    }
+    args.push(arg);
+  }
+  return h.apply(null, args);
+};
+const tagBlacklist = ['script', 'link', 'meta', 'object', 'head', 'html', 'body'];

package/dist/collection/components/mini-apps/sparkle-goals/sparkle-goal-form/sparkle-goal-form.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/mini-apps/sparkle-goals/sparkle-goal-form/sparkle-goal-form.js

@@ -0,0 +1,252 @@
+import { Component, State, Element, h, Prop, Watch } from '@stencil/core';
+import { GetGoalAppData, SparkleGlobal, MyGoalTemplate, MyGoalTemplateJSON } from '../../../../util';
+import { EnvironmentConfigService } from "../../../../services/environment/environment-config.service";
+import { AssetsService } from "../../../../services/core/assets.service";
+import { AppDataService } from '../../../../services/appdata.service';
+import { FeedService } from '../../../../services/feed.service';
+import goalStore from '../../../../stores/goal.store';
+import feedStore from '../../../../stores/feed.store';
+export class SparkleGoalForm {
+  constructor() {
+    this.name = {
+      valid: false,
+      value: ''
+    };
+    this.description = {
+      valid: false,
+      value: ''
+    };
+    this.category = {
+      valid: false,
+      value: ''
+    };
+    this.progress = 0;
+    this.public = true;
+    this.goalUpdateText = {
+      valid: true,
+      value: ''
+    };
+    this.submitted = false;
+  }
+  goalHanlder(data) {
+    this.updateGoal(data.AppData);
+  }
+  ;
+  componentWillLoad() {
+    if (this.appData) {
+      this.updateGoal(this.appData.AppData);
+    }
+  }
+  updateGoal(data) {
+    if (data) {
+      this.name = Object.assign(Object.assign({}, this.name), { value: data.Name });
+      this.description = Object.assign(Object.assign({}, this.description), { value: data.Description });
+      this.category = Object.assign(Object.assign({}, this.category), { value: data.Category });
+      this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { value: data.GoalText });
+      this.progress = data.Percentage;
+    }
+  }
+  handleTitle(ev) {
+    this.validateTitle();
+    this.name = Object.assign(Object.assign({}, this.name), { value: ev.target.value });
+  }
+  handleDescription(ev) {
+    this.validateDescription();
+    this.description = Object.assign(Object.assign({}, this.description), { value: ev.target.value });
+  }
+  handleCategory(ev) {
+    this.validateCategoy();
+    this.category = Object.assign(Object.assign({}, this.category), { value: ev.target.value });
+  }
+  handleGoalProgressInfo(ev) {
+    this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { value: ev.target.value });
+  }
+  validateTitle() {
+    if (this.name.value && this.name.value.length > 0) {
+      this.name = Object.assign(Object.assign({}, this.name), { valid: true });
+      return;
+    }
+    this.name = Object.assign(Object.assign({}, this.name), { valid: false });
+  }
+  validateDescription() {
+    if (this.description.value && this.description.value.length > 0) {
+      this.description = Object.assign(Object.assign({}, this.description), { valid: true });
+      return;
+    }
+    this.description = Object.assign(Object.assign({}, this.description), { valid: false });
+  }
+  validateCategoy() {
+    if (this.category.value && this.category.value.length > 0) {
+      this.category = Object.assign(Object.assign({}, this.category), { valid: true });
+      return;
+    }
+    this.category = Object.assign(Object.assign({}, this.category), { valid: false });
+  }
+  validateGoalUpdateText() {
+    if (this.goalUpdateText.value && this.goalUpdateText.value.length > 0) {
+      this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { valid: true });
+      return;
+    }
+    this.goalUpdateText = Object.assign(Object.assign({}, this.goalUpdateText), { valid: false });
+  }
+  async onSubmit(e) {
+    e.preventDefault();
+    console.log('clicked signup');
+    this.validateTitle();
+    this.validateDescription();
+    this.validateCategoy();
+    this.submitted = true;
+    if (this.appData && this.appData.Id > 0) {
+      this.validateGoalUpdateText();
+      if (this.name.valid && this.description.valid && this.category.valid && this.goalUpdateText.valid) {
+        //update
+        var appData = GetGoalAppData(this.name.value, this.description.value, this.category.value, this.progress, this.goalUpdateText.value);
+        const result = await AppDataService.getInstance().updateGoal({ Id: this.appData.Id, MiniAppId: SparkleGlobal.MY_GOALS_APP_ID, AppJsonData: JSON.stringify(appData) });
+        if (result.Succeeded) {
+          if (this.public) {
+            await this.postToFeed();
+          }
+          else {
+            this.dismiss();
+          }
+        }
+      }
+    }
+    else {
+      if (this.name.valid && this.description.valid && this.category.valid) {
+        //add
+        var appData = GetGoalAppData(this.name.value, this.description.value, this.category.value, this.progress, this.goalUpdateText.value);
+        const result = await AppDataService.getInstance().createGoal({ MiniAppId: SparkleGlobal.MY_GOALS_APP_ID, AppJsonData: JSON.stringify(appData) });
+        if (result.Succeeded) {
+          this.dismiss();
+        }
+      }
+    }
+  }
+  async postToFeed() {
+    const sparkleConfig = EnvironmentConfigService.getInstance().get('sparkle');
+    const tocData = await AssetsService.getInstance().loadJsonFile(sparkleConfig.tocPath);
+    var model = {
+      CourseId: tocData.id,
+      MiniAppId: SparkleGlobal.MY_GOALS_APP_ID,
+      PostText: MyGoalTemplate(this.name.value, this.goalUpdateText.value, this.progress),
+      PostTextJSON: MyGoalTemplateJSON(this.name.value, this.goalUpdateText.value, this.progress),
+      IsPublic: this.public,
+      ExternalResourceUrl: "",
+    };
+    const result = await FeedService.getInstance().createPost(model);
+    if (result.Succeeded) {
+      this.dismiss();
+    }
+  }
+  dismiss(data) {
+    // dismiss the closest modal and optionally pass back data
+    this.el.closest('ion-modal').dismiss({
+      'dismissed': true
+    });
+  }
+  renderEditBookingFields() {
+    if (this.appData) {
+      return (h("div", null,
+        h("ion-item", null,
+          h("ion-label", { position: "stacked", color: "primary" }, "Goal Progress Info"),
+          h("ion-input", { name: "title", type: "text", value: this.goalUpdateText.value, onInput: (ev) => this.handleGoalProgressInfo(ev) })),
+        h("ion-text", { color: "danger" },
+          h("p", { hidden: this.goalUpdateText.valid || this.submitted === false, class: "ion-padding-start" }, "Goal Progress text is required")),
+        h("ion-item", null,
+          h("ion-label", { position: "stacked" }, "Progress"),
+          h("ion-range", { value: this.progress, min: 1, max: 100, step: 1, snaps: true, pin: true, onIonChange: (e) => this.progress = +e.detail.value },
+            h("ion-icon", { size: "small", slot: "start", name: "pulse" }),
+            h("ion-icon", { name: "pulse", size: "small" }),
+            h("strong", { slot: "end" }, this.progress))),
+        h("ion-text", { color: "danger" },
+          h("p", { hidden: this.progress > 0 || this.submitted === false, class: "ion-padding-start" }, "Min Progress value should be 1")),
+        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 }))));
+    }
+  }
+  render() {
+    return [
+      h("div", null,
+        h("ion-toolbar", { color: "primary" },
+          h("ion-buttons", { slot: "start" },
+            h("ion-back-button", { defaultHref: "home", onClick: () => this.dismiss() })),
+          h("ion-title", null, "Add New Goal")),
+        h("div", { class: "inner-content" },
+          h("form", { class: "ion-padding", novalidate: true, onSubmit: (e) => this.onSubmit(e) },
+            h("ion-list", { "no-lines": true },
+              h("ion-item", null,
+                h("ion-label", { position: "stacked", color: "primary" }, "Title"),
+                h("ion-input", { name: "title", type: "text", value: this.name.value, onInput: (ev) => this.handleTitle(ev), required: true })),
+              h("ion-text", { color: "danger" },
+                h("p", { hidden: this.name.valid || this.submitted === false, class: "ion-padding-start" }, "Title is required")),
+              h("ion-item", null,
+                h("ion-label", { position: "stacked", color: "primary" }, "Description"),
+                h("ion-textarea", { name: "desciption", value: this.description.value, onInput: (ev) => this.handleDescription(ev), required: true })),
+              h("ion-text", { color: "danger" },
+                h("p", { hidden: this.description.valid || this.submitted === false, class: "ion-padding-start" }, "Description is required")),
+              h("ion-item", null,
+                h("ion-label", null, "Category"),
+                h("ion-select", { value: this.category.value, onIonChange: (e) => this.handleCategory(e) },
+                  h("ion-select-option", { value: "Emotional" }, "Emotional"),
+                  h("ion-select-option", { value: "Interpersonal" }, "Interpersonal"),
+                  h("ion-select-option", { value: "Learning" }, "Learning"),
+                  h("ion-select-option", { value: "Financial" }, "Financial"),
+                  h("ion-select-option", { value: "Physical" }, "Physical"))),
+              h("ion-text", { color: "danger" },
+                h("p", { hidden: this.category.valid || this.submitted === false, class: "ion-padding-start" }, "Category is required")),
+              this.renderEditBookingFields()),
+            h("div", { class: "ion-padding" },
+              this.appData && h("ion-button", { type: "submit", expand: "block", disabled: goalStore.state.goalLoading || feedStore.state.postIdLoading > 0 },
+                goalStore.state.goalLoading && h("ion-spinner", { name: "dots" }),
+                "  Update"),
+              !this.appData && h("ion-button", { type: "submit", expand: "block", disabled: goalStore.state.goalLoading },
+                goalStore.state.goalLoading && h("ion-spinner", { name: "dots" }),
+                "  Add")))))
+    ];
+  }
+  static get is() { return "sparkle-goal-form"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-goal-form.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-goal-form.css"]
+  }; }
+  static get properties() { return {
+    "appData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "StudentAppDataViewModel",
+        "resolved": "StudentAppDataViewModel",
+        "references": {
+          "StudentAppDataViewModel": {
+            "location": "import",
+            "path": "../../../../models/class.model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "name": {},
+    "description": {},
+    "category": {},
+    "progress": {},
+    "public": {},
+    "goalUpdateText": {},
+    "submitted": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "appData",
+      "methodName": "goalHanlder"
+    }]; }
+}

package/dist/collection/components/mini-apps/sparkle-goals/sparkle-goal-item/sparkle-goal-item.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+
+.Card-content {
+  padding-top: 8px;
+}
+.goal-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -40px !important;
+}