@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/collection/feature-learn/learning/course-detail/course-detail.css

@@ -1,392 +0,0 @@
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* Z-Index (Ionic)
---------------------------------------------------
-Grouped by elements which would be siblings */
-/* Hairlines width */
-/* Default Colors
----------------------------------- */
-/* Private color variables */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff;*/
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* Color map should provide
-- base: main color to be used.
-- contrast: Color that will provide readable text against the base color
-- shade: 12% darker version of the base color (mix with black)
-- tint: 10% lighter version of the base color (mix with white) */
-/* Themed Colors
-
- Default Foreground and Background Colors values
- Allows users to override an foreground / background colors
- $background-color-value:            $light !default;
- $background-color-rgb:              255, 255, 255 !default; */
-/* Default Foreground and Background Colors
--------------------------------------------------- */
-/* Default General Colors
--------------------------------------------------- */
-/* Default List & List Items
--------------------------------------------------- */
-/* Item Divider */
-/* iOS List & List Items
--------------------------------------------------- */
-/* Default Toolbar
---------------------------------------------------*/
-/* iOS Toolbar
---------------------------------------------------*/
-/* Default Tabs & Tab bar
---------------------------------------------------*/
-/* iOS Tabs & Tab bar
---------------------------------------------------*/
-/* Function related variables
---------------------------------------------------*/
-/* Gets the active color's css variable from a variation. Alpha is optional.
---------------------------------------------------------------------------------------------
-Example usage:
-current-color(base) => var(--ion-color-base)
-current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
---------------------------------------------------------------------------------------------*/
-/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
---------------------------------------------------------------------------------------------
-Example usage:
-ion-color(primary, base) => var(--ion-color-primary, #3880ff)
-ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
-ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
---------------------------------------------------------------------------------------------*/
-/* Mixes a color with black to create its shade.
---------------------------------------------------------------------------------------------*/
-/*Mixes a color with white to create its tint.
---------------------------------------------------------------------------------------------*/
-/* Converts a color to a comma separated rgb.
---------------------------------------------------------------------------------------------*/
-/* Str functions.
-___________________________________________________________________________________________*/
-/* Creates a pulse animation.
-  @param {color} $begin-color [stable-20] - starting color for pulse.
-  @param {color} $end-color [stable-20] - ending color for pulse.
-  @author Ben Morgan
-  @author Damien Arondel 
-*/
-/* Execute a content if the hover state is supported.
-
- @content the content to execute if relevant
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Properly hide overflow on rounded corner elements for Webkit based browsers.
- This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
-
- @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate every overflown elements with an ellipsis.
- This mixin does not work with flex box on the same level.
-
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate text at a specific number of lines.
- */
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
-/* Text Direction - ltr / rtl
-$app-direction: multi | rtl | ltr | null (default)
-multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
-rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
-ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
-null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
----------------------------------------------------------- */
-/* Add property horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add property for all directions
-  @param {string} $prop
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-  @param {boolean} $content include content or use default
-----------------------------------------------------------*/
-/* Add margin for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add padding for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/*Font smoothing
---------------------------------------------------*/
-/* SVG Background Image Mixin
-  @param {string} $svg
-----------------------------------------------------------*/
-/* Add padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add margin horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add safe area padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add border radius for all directions
-  @param {string} $top-start
-  @param {string} $top-end
-  @param {string} $bottom-end
-  @param {string} $bottom-start
-----------------------------------------------------------*/
-/* Sets correct text align with support for old browsers
-  @param {string} $direction - text direction
-  @param {string} $decorator - !important
-----------------------------------------------------------*/
-/* Add position for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add position horizontal
-  @param {string} $start - amount to position start
-  @param {string} $end - amount to left: 0; end
-----------------------------------------------------------*/
-/**
- * NOTE DO NOT USE FOR NEW COMPONENTS
- * LEGACY CODE -- Styles maintained only to prevent breaking changes
- * For all Font Sizes please use the appropreate font-size-XX Variables.
- */
-/**
-* Global style mixin for being able to change the background / font-color and border-color
-* programmatically using global classes
-*/
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-:host {
-  height: 100%;
-  font-weight: var(--font-weight-400, 400);
-  font-size: var(--font-size-16, 1rem);
-}
-:host .course-detail {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  margin: var(--spacing-32, 2rem) var(--spacing-48, 3rem);
-}
-:host .course-detail .scroll-spacer {
-  height: 5.75rem;
-}
-:host .course-detail .title-container {
-  display: flex;
-  flex-direction: column;
-}
-:host .course-detail .title-container yoo-tag {
-  margin-bottom: var(--spacing-16, 1rem);
-}
-:host .course-detail .title-container .title {
-  margin-bottom: var(--spacing-16, 1rem);
-  font-weight: var(--font-weight-700, 700);
-  font-size: var(--font-size-28, 1.75rem);
-}
-:host .course-detail .title-container .due-date .first {
-  color: var(--dark, #000000);
-}
-:host .course-detail .title-container .due-date .second {
-  color: var(--app-color, #5a30f4);
-}
-:host .course-detail .menu {
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-  list-style: none outside none;
-  background: none repeat scroll 0 0 transparent;
-  border: 0 none;
-  outline: 0 none;
-  -webkit-tap-highlight-color: transparent;
-  margin-top: 1.875rem;
-  padding: var(--spacing-16, 1rem);
-  list-style: none;
-}
-:host .course-detail .menu .menu-item {
-  display: flex;
-  flex-direction: row;
-}
-:host .course-detail .menu .menu-item:not(:last-child) .menu-content {
-  margin-bottom: var(--spacing-24, 1.5rem);
-}
-:host .course-detail .menu .menu-item .menu-left {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-:host .course-detail .menu .menu-item .menu-left.with-dot {
-  width: 2rem;
-  margin-left: 0.0313rem;
-}
-:host .course-detail .menu .menu-item .menu-left .menu-icon {
-  z-index: 2;
-  width: 1.875rem;
-  height: 1.875rem;
-  text-align: center;
-}
-:host .course-detail .menu .menu-item .menu-left .menu-icon.menu-dot {
-  width: 1rem;
-  height: 1rem;
-}
-:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon {
-  display: flex;
-  justify-content: center;
-  width: 1.875rem;
-  height: 1.875rem;
-  padding: 0;
-  color: var(--light, #ffffff);
-  font-size: var(--font-size-18, 1.125rem);
-  line-height: 1.875rem;
-  background-color: var(--app-color, #5a30f4);
-  border-radius: 50%;
-}
-:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon.dark {
-  background-color: var(--dark, #000000);
-}
-:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon.info {
-  background-color: var(--info, #d84c96);
-}
-:host .course-detail .menu .menu-item .menu-left .menu-icon yoo-icon.danger {
-  background-color: var(--danger, #d44333);
-}
-:host .course-detail .menu .menu-item .menu-left .border {
-  width: 0.0625rem;
-  height: 100%;
-  background-color: var(--stable-alt, #d0d0d0);
-}
-:host .course-detail .menu .menu-item .menu-left .border.border-pre {
-  height: 2.5rem;
-}
-:host .course-detail .menu .menu-item .menu-left .border.border-pre.last {
-  height: 1rem;
-}
-:host .course-detail .menu .menu-item .menu-left .border.dark {
-  background-color: var(--dark, #000000);
-}
-:host .course-detail .menu .menu-item .menu-left .border.danger {
-  background-color: var(--danger, #d44333);
-}
-:host .course-detail .menu .menu-item .menu-left .border.info {
-  background-color: var(--info, #d84c96);
-}
-:host .course-detail .menu .menu-item .menu-right {
-  width: 100%;
-  margin-left: var(--spacing-08, 0.5rem);
-  overflow: hidden;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-title {
-  font-weight: bold;
-  line-height: 1;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content {
-  color: var(--text-color, #807f83);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content.menu-chart {
-  margin-bottom: 0;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-title {
-  display: flex;
-  align-items: center;
-  height: 2rem;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content span {
-  margin-right: 0.5rem;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content yoo-avatar {
-  margin-right: 0.3125rem;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .font-medium {
-  font-size: var(--font-size-14, 0.875rem);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .font-small {
-  font-size: var(--font-size-12, 0.75rem);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .dark {
-  color: var(--dark, #000000);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .success {
-  color: var(--success, #3aa76d);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .danger {
-  color: var(--danger, #d44333);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .text-color {
-  color: var(--text-color, #807f83);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content table {
-  width: 100%;
-  table-layout: fixed;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content table td {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .tags {
-  display: flex;
-  flex-direction: row;
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .tags .badge-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 4rem;
-  margin: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
-  font-size: var(--font-size-12, 0.75rem);
-}
-:host .course-detail .menu .menu-item .menu-right .menu-content .tags .badge-container .tag-title {
-  color: var(--dark, #000000);
-  text-align: center;
-}
-:host .course-detail .menu .menu-item:last-child .menu-left .border {
-  display: none;
-}
-
-:host(.web) {
-  border-radius: 8px;
-  box-shadow: var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));
-}

package/dist/collection/feature-learn/learning/course-detail/course-detail.js

@@ -1,244 +0,0 @@
-import { formatDistanceFromNow, getPlanDueDate, minsToMinsAndSecs, translateMulti } from '@shared/utils';
-import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
-import { get } from 'lodash-es';
-import { getAppContext } from '../../../utils/helpers/common-helpers';
-export class YooCourseDetailComponent {
-  constructor() {
-    this.imageScale = 1;
-  }
-  onCourseChanged(newValue) {
-    this.actualPlan = newValue === null || newValue === void 0 ? void 0 : newValue.plan;
-  }
-  onPlanChanged(newValue) {
-    this.actualPlan = newValue;
-  }
-  onLessonsChanged(newValue) {
-    this.lessons = newValue;
-  }
-  componentWillLoad() {
-    var _a;
-    this.actualPlan = this.plan || ((_a = this.course) === null || _a === void 0 ? void 0 : _a.plan);
-  }
-  get badges() {
-    if (this.lessons && this.lessons.length > 0) {
-      const badges = [];
-      this.lessons.forEach(_lesson => {
-        const b = get(_lesson, 'badge', false);
-        if (b) {
-          badges.push(b);
-        }
-      });
-      return badges;
-    }
-    return [];
-  }
-  get duration() {
-    if (this.lessons && this.lessons.length > 0) {
-      let duration = 0;
-      this.lessons.forEach(_lesson => {
-        const dur = get(_lesson, 'duration', false);
-        if (dur) {
-          duration += dur;
-        }
-      });
-      return duration;
-    }
-    return null;
-  }
-  renderSimpleSection(value, title, icon, isInnerHTML = false) {
-    return (h("li", { class: "menu-item" },
-      h("div", { class: "menu-left" },
-        h("span", { class: "menu-icon" },
-          h("yoo-tag", { icon: icon, color: "app-color-10", iconOnlySize: "small", size: "medium" })),
-        h("div", { class: "border" })),
-      h("div", { class: "menu-right" },
-        h("div", { class: "menu-title" }, translateMulti(title)),
-        isInnerHTML ?
-          h("div", { class: "menu-content" },
-            h("yoo-truncate", { maxLength: 400, content: translateMulti(value) })) :
-          h("div", { class: "menu-content" }, value))));
-  }
-  renderBadge(badge) {
-    var _a, _b;
-    const badgeEarned = (_b = (_a = this.course) === null || _a === void 0 ? void 0 : _a.badges) === null || _b === void 0 ? void 0 : _b.find(earnedRef => earnedRef === (badge === null || badge === void 0 ? void 0 : badge._id));
-    return badge && (h("div", { class: "badge-container" },
-      h("yoo-tag", { size: "extra-large", icon: badgeEarned ? badge.icon : 'lock', customColor: badgeEarned ? badge.color : '#807F83' }),
-      h("div", { class: "tag-title" }, translateMulti(badge.title))));
-  }
-  renderCourseBadges(badges) {
-    return (h("div", { class: "tags" }, badges.map(badge => this.renderBadge(badge))));
-  }
-  renderAvailablePoints() {
-    return (h("yoo-tag", { color: "app-color-10", size: "medium" },
-      h("yoo-icon", { name: "star", size: "small", slot: "start", color: "app-color" }),
-      (this.actualPlan.availablePoints || 0).toString()));
-  }
-  renderDueDate() {
-    var _a;
-    if (this.course && this.course.assignmentDate) {
-      const dueDate = getPlanDueDate(this.actualPlan, this.course.assignmentDate);
-      if (dueDate) {
-        return (h("div", { class: "due-date" },
-          h("span", { class: "first" }, translateMulti('DUEDATE') + ' '),
-          h("span", { class: "second" }, formatDistanceFromNow(getPlanDueDate(this.actualPlan, (_a = this.course) === null || _a === void 0 ? void 0 : _a.assignmentDate)))));
-      }
-    }
-  }
-  renderCourse() {
-    const badges = this.badges;
-    const duration = this.duration;
-    return (this.course || this.actualPlan) ?
-      h("div", { class: "course-detail" },
-        h("yoo-ion-content", { class: "bg-light" },
-          h("div", { class: "title-container" },
-            this.renderAvailablePoints(),
-            h("span", { class: "title" }, translateMulti(this.actualPlan.title)),
-            this.planDueDate && this.renderDueDate()),
-          h("ul", { class: "menu" },
-            get(this.actualPlan, 'description', false) && this.renderSimpleSection(this.actualPlan.description, 'DESCRIPTION', 'lesson', true),
-            duration && this.renderSimpleSection(minsToMinsAndSecs(duration).toString(), 'DURATION', 'schedule-user', true),
-            !!badges.length && this.renderSimpleSection(this.renderCourseBadges(badges), badges.length > 1 ? 'YOOBICBADGES' : 'YOOBICBADGE', 'badge', false)),
-          h("slot", null),
-          h("slot", { name: "end" }),
-          h("div", { class: "scroll-spacer" })))
-      : null;
-  }
-  render() {
-    return (h(Host, { class: getAppContext(this.host) }, this.renderCourse()));
-  }
-  static get is() { return "yoo-course-detail"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["course-detail.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["course-detail.css"]
-  }; }
-  static get properties() { return {
-    "imageScale": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "image-scale",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "planDueDate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "plan-due-date",
-      "reflect": false
-    },
-    "lessons": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "ILesson[]",
-        "resolved": "ILesson[]",
-        "references": {
-          "ILesson": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "course": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "ICourse",
-        "resolved": "ICourse",
-        "references": {
-          "ICourse": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "plan": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IPlanWithStats",
-        "resolved": "IPlanWithStats",
-        "references": {
-          "IPlanWithStats": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "scrollHeight": {}
-  }; }
-  static get events() { return [{
-      "method": "starting",
-      "name": "starting",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "course",
-      "methodName": "onCourseChanged"
-    }, {
-      "propName": "plan",
-      "methodName": "onPlanChanged"
-    }, {
-      "propName": "lessons",
-      "methodName": "onLessonsChanged"
-    }]; }
-}