@sparkle-learning/core 0.0.57 → 0.0.58

package/dist/collection/components/sparkle-file-upload/sparkle-file-upload.js

@@ -0,0 +1,105 @@
+import { Component, Element, Event, State, Prop, h, Host } from '@stencil/core';
+import { MediaService } from '../../services/media.service';
+export class SparkleFileUpload {
+  constructor() {
+    this.uploadImageLoading = false;
+  }
+  componentDidLoad() { }
+  async uploadImage(evt) {
+    this.uploadImageLoading = true;
+    var files = evt.target.files;
+    let result = await MediaService.getInstance().uploadImage(files);
+    if (result.Succeeded) {
+      console.log(result);
+      this.uploadImageLoading = false;
+      this.uploadedImage = result.Data.length > 0 ? result.Data[0].FullImageUrl : '';
+      this.value = this.uploadedImage;
+      this.fileUploaded.emit(this.uploadedImage);
+    }
+    else {
+      this.uploadImageLoading = false;
+      this.errorMessage = 'There is an error while uploading an image.';
+    }
+  }
+  selectFile() {
+    var fileInput = this.el.shadowRoot.querySelector('#fileInput');
+    fileInput.click();
+  }
+  render() {
+    return (h(Host, null,
+      this.uploadedImage ? (h("ion-item", { class: "ion-padding", lines: "none" },
+        h("img", { class: "uploaded-image", src: this.uploadedImage }))) : (''),
+      h("ion-item", { lines: "none" },
+        h("input", { type: "file", id: "fileInput", onChange: evt => this.uploadImage(evt), style: { display: 'none' }, accept: "image/*,application/pdf,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint,text/plain" }),
+        this.uploadImageLoading ? h("ion-spinner", { color: "primary" }) : '',
+        h("ion-button", { slot: "start", onClick: evt => this.selectFile() },
+          h("ion-icon", { name: "add" }),
+          "Upload Image"))));
+  }
+  static get is() { return "sparkle-file-upload"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-file-upload.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-file-upload.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "errorMessage": {},
+    "uploadedImage": {},
+    "uploadImageLoading": {}
+  }; }
+  static get events() { return [{
+      "method": "fileUploaded",
+      "name": "fileUploaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/sparkle-forgot-password/sparkle-forgot-password.css

@@ -0,0 +1,4 @@
+  
+  sparkle-forgot-password .list {
+    margin-bottom: 0;
+  }

package/dist/collection/components/sparkle-forgot-password/sparkle-forgot-password.js

@@ -0,0 +1,107 @@
+import { Component, State, Prop, h, getAssetPath } from '@stencil/core';
+import { AccountService } from "../../services/account.service";
+import { AuthStore } from '../../stores';
+export class SparkleForgotPassword {
+  constructor() {
+    this.formControls = {
+      email: {
+        isValid: false,
+        value: '',
+        validate: value => {
+          if (value) {
+            return true;
+          }
+          else {
+            return false;
+          }
+        },
+      },
+    };
+    this.submitted = false;
+  }
+  changeFormValue(controlName, value) {
+    this.formControls = Object.assign(Object.assign({}, this.formControls), { [controlName]: Object.assign(Object.assign({}, this.formControls[controlName]), { value: value, isValid: this.formControls[controlName].validate(value) }) });
+  }
+  async handleSubmit(e) {
+    e.preventDefault();
+    this.submitted = true;
+    let isFormValid = true;
+    //Run all validation functions
+    for (let controlName in this.formControls) {
+      let control = this.formControls[controlName];
+      control.validate(control.value);
+      if (!control.isValid) {
+        isFormValid = false;
+      }
+    }
+    if (isFormValid) {
+      let result = await AccountService.getInstance().forgotPassword({
+        Email: this.formControls.email.value,
+        ClientURL: window.location.origin + "/reset-password"
+      });
+      if (result.Succeeded) {
+        this.history.replace('/login', {});
+      }
+      else if (result.Failed) {
+        if (result.Errors.length > 0) {
+          this.validationErrors = result.Errors;
+        }
+      }
+    }
+  }
+  render() {
+    return [
+      h("div", null,
+        h("div", { class: "login-logo" },
+          h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })),
+        h("sparkle-validation-error", { errors: this.validationErrors }),
+        h("form", { novalidate: "true", onSubmit: (e) => this.handleSubmit(e) },
+          h("ion-list", { "no-lines": true },
+            h("ion-item", { lines: "none" }, "Enter your email address and we will send you a link to reset your password."),
+            h("ion-item", null,
+              h("ion-label", { position: "stacked", color: "primary" }, "Email"),
+              h("ion-input", { name: "email", type: "text", value: this.formControls.email.value, onInput: (ev) => this.changeFormValue("email", ev.target.value), spellcheck: false, autocapitalize: "off" })),
+            h("ion-text", { color: "danger" },
+              h("p", { hidden: this.formControls.email.isValid || this.submitted === false, class: "ion-padding-left" }, "Email is required")),
+            h("br", null),
+            h("div", { class: "ion-padding" },
+              h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading },
+                AuthStore.state.loading && h("ion-spinner", { name: "dots" }),
+                " SEND PASSWORD RESET EMAIL")))))
+    ];
+  }
+  static get is() { return "sparkle-forgot-password"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-forgot-password.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-forgot-password.css"]
+  }; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "validationErrors": {},
+    "formControls": {},
+    "submitted": {}
+  }; }
+}

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

@@ -0,0 +1,212 @@
+import { Component, h, Event, Prop, Watch } from '@stencil/core';
+export class SparkleInput {
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this._options = JSON.parse(newValue);
+    }
+    else {
+      this._options = newValue;
+    }
+  }
+  componentWillLoad() {
+    if (this.type == 'select') {
+      this.arrayDataWatcher(this.options);
+    }
+  }
+  handleChange(event) {
+    const value = this.type === 'checkbox' ? event.target.checked : event.target.value;
+    this.value = value;
+    this.valueChanged.emit(value);
+    if (this.type === 'checkbox') {
+      this.checkedChanged.emit(value);
+    }
+  }
+  render() {
+    switch (this.type) {
+      case 'text' || 'email' || 'number' || 'tel' || 'url':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-label", null, this.label),
+            h("ion-input", { type: this.type, value: this.value, placeholder: this.placeholder, onInput: (event) => this.handleChange(event), required: true }))));
+      case 'textarea':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-label", null, this.label),
+            h("ion-textarea", { value: this.value, placeholder: this.placeholder, onInput: (event) => this.handleChange(event), required: true }))));
+      case 'checkbox':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-checkbox", { slot: "start", checked: this.checked, onChange: (event) => this.handleChange(event) }),
+            h("ion-label", null, this.label))));
+      case 'select':
+        return (h("div", null,
+          h("ion-item", null,
+            h("ion-select", { value: this.value, placeholder: this.label, onIonChange: event => this.handleChange(event) }, this._options.map(option => (h("ion-select-option", { key: option.value, value: option.value }, option.label)))))));
+      default:
+        return null;
+    }
+  }
+  static get is() { return "sparkle-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-input.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text' | 'textarea' | 'checkbox' | 'select'",
+        "resolved": "\"checkbox\" | \"select\" | \"text\" | \"textarea\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false
+    },
+    "options": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "{ value: string; label: string }[] | string",
+        "resolved": "string | { value: string; label: string; }[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "options",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChanged",
+      "name": "valueChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      }
+    }, {
+      "method": "checkedChanged",
+      "name": "checkedChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "options",
+      "methodName": "arrayDataWatcher"
+    }]; }
+}

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

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

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

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

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

@@ -0,0 +1,4 @@
+  
+  sparkle-login .list {
+    margin-bottom: 0;
+  }

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

@@ -0,0 +1,173 @@
+import { Component, Event, getAssetPath, Prop, State, h } from '@stencil/core';
+import { AuthService } from "../../services/auth/auth.service";
+import { AuthStore } from '../../stores/auth.store';
+export class PageLogin {
+  constructor() {
+    this.username = {
+      valid: false,
+      value: ''
+    };
+    this.password = {
+      valid: false,
+      value: ''
+    };
+    this.rememberMe = {
+      valid: true,
+      value: false
+    };
+    this.submitted = false;
+  }
+  handleUsername(ev) {
+    this.validateUsername();
+    this.username = Object.assign(Object.assign({}, this.username), { value: ev.target.value });
+  }
+  handlePassword(ev) {
+    this.validatePassword();
+    this.password.value = ev.target.value;
+    this.password = Object.assign(Object.assign({}, this.password), { value: ev.target.value });
+  }
+  handleRememberMe(ev) {
+    this.rememberMe = Object.assign(Object.assign({}, this.password), { value: ev.target.checked });
+    console.log(this.rememberMe.value);
+  }
+  validateUsername() {
+    if (this.username.value && this.username.value.length > 0) {
+      this.username = Object.assign(Object.assign({}, this.username), { valid: true });
+      return;
+    }
+    this.username = Object.assign(Object.assign({}, this.username), { valid: false });
+  }
+  validatePassword() {
+    if (this.password.value && this.password.value.length > 0) {
+      this.password.valid = true;
+      this.password = Object.assign(Object.assign({}, this.password), { valid: true });
+      return;
+    }
+    this.password = Object.assign(Object.assign({}, this.password), { valid: false });
+  }
+  async componentWillLoad() {
+    this.destroyListener = AuthStore.onChange('authUser', async (authUser) => {
+      this.notsignin = !authUser;
+    });
+    this.notsignin = !AuthStore.state.authUser;
+  }
+  disconnectedCallback() {
+    if (this.destroyListener) {
+      this.destroyListener();
+    }
+  }
+  async onLogin(e) {
+    e.preventDefault();
+    //    const navCtrl: HTMLIonRouterElement = await (this.nav as any).componentOnReady();
+    this.validatePassword();
+    this.validateUsername();
+    this.submitted = true;
+    if (this.password.valid && this.username.valid) {
+      //await UserData.login(this.username.value);
+      let result = await AuthService.getInstance().authenticate({
+        Email: this.username.value,
+        Password: this.password.value,
+        RememberClient: this.rememberMe.value
+      });
+      console.log(result);
+      //sessionStorage.setItem('rememberMe', this.rememberMe.value == true ? '1' : '0');
+      this.userDidLogIn.emit({ loginStatus: true });
+    }
+  }
+  async onSignup(e) {
+    e.preventDefault();
+    //const navCtrl: HTMLIonRouterElement = await (this.nav as any).componentOnReady();
+    //navCtrl.push('/signup');
+  }
+  renderLogin() {
+    return [
+      h("div", null,
+        h("div", { class: "login-logo" },
+          h("img", { src: getAssetPath("/assets/img/G3-Girls.jpg"), alt: "Girls Inc" })),
+        h("form", { novalidate: "true", onSubmit: (e) => this.onLogin(e) },
+          h("ion-list", { "no-lines": true },
+            h("ion-item", null,
+              h("ion-label", { position: "stacked", color: "primary" }, "Username"),
+              h("ion-input", { name: "username", type: "text", value: this.username.value, onInput: (ev) => this.handleUsername(ev), spellcheck: false, autocapitalize: "off", required: true })),
+            h("ion-text", { color: "danger" },
+              h("p", { hidden: this.username.valid || this.submitted === false, class: "ion-padding-left" }, "Username is required")),
+            h("ion-item", null,
+              h("ion-label", { position: "stacked", color: "primary" }, "Password"),
+              h("ion-input", { name: "password", type: "password", value: this.password.value, onInput: (ev) => this.handlePassword(ev), required: true })),
+            h("ion-text", { color: "danger" },
+              h("p", { hidden: this.password.valid || this.submitted === false, class: "ion-padding-left" }, "Password is required")),
+            h("ion-item", { lines: "none" },
+              h("ion-label", null, "Remember Me"),
+              h("ion-checkbox", { slot: "start", checked: this.rememberMe.value, onIonChange: (e) => this.handleRememberMe(e) })),
+            h("ion-item", { lines: "none" },
+              h("stencil-route-link", { slot: "end", url: "/forgot-password", exact: true }, "Forgot Password?"))),
+          h("ion-row", null,
+            h("ion-col", null,
+              h("ion-button", { type: "submit", expand: "block", disabled: AuthStore.state.loading },
+                AuthStore.state.loading && h("ion-spinner", { name: "dots" }),
+                " Log In"))),
+          h("ion-item", { lines: "none" },
+            h("span", null,
+              " Not registered yet? ",
+              h("stencil-route-link", { url: "/signup", exact: true }, "Sign Up")))))
+    ];
+  }
+  render() {
+    if (!this.notsignin) {
+      return h("stencil-router-redirect", { url: "home" });
+    }
+    return this.renderLogin();
+  }
+  static get is() { return "sparkle-login"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-login.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-login.css"]
+  }; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "notsignin": {},
+    "username": {},
+    "password": {},
+    "rememberMe": {},
+    "submitted": {}
+  }; }
+  static get events() { return [{
+      "method": "userDidLogIn",
+      "name": "userDidLogIn",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, Host, h } from '@stencil/core';
+export class SparklePoll {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "sparkle-poll"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-poll.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-poll.css"]
+  }; }
+}