@yoobic/yobi 8.3.0-41 → 8.3.0-42

package/dist/collection/feature-learn/learning/card-course/row/card-course-row.js

@@ -1,4 +1,4 @@
-import { dateFormat, getPlanDueDate, getPlanStartDate, isDateAfter, isOffline, isPlanRatingEnabled, isWeb, pipes, showRatingDialog, translate, translateMulti } from '@shared/utils';
+import { dateFormat, getCourseFinishedItemsCount, getCourseProgress, getPlanDueDate, getPlanStartDate, getPlanTotalItemsCount, getPlanTypeTagProps, isDateAfter, isOffline, isPlanRatingEnabled, isWeb, pipes, showRatingDialog, translate, translateMulti } from '@shared/utils';
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { get, isObject } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../../utils/cache/localForage';
@@ -10,7 +10,9 @@ export class YooCardCourseRowComponent {
   async prepareData() {
     this.actualPlan = this.entry['plan'] || this.entry;
     this.isLocked = this.entry['isLocked'] === true && !this.entry['forceUnlocked'];
-    this.finishedLessonsCount = this.entry['finishedLessonsCount'] || 0;
+    this.forceShowProgressBar = this.host.classList.contains('force-show-progress-bar');
+    this.forceHideProgressBar = this.host.classList.contains('force-hide-progress-bar');
+    this.forceHideProgressTags = this.host.classList.contains('force-hide-progress-tags');
     this.isFinished = this.calcIsFinished();
     this.hasRating = this.calcHasRating();
     const backgroundImage = get(this.actualPlan, 'background._downloadURL', get(this.actualPlan, 'background', get(this.actualPlan, 'imageData', null)));
@@ -50,9 +52,9 @@ export class YooCardCourseRowComponent {
     return pipes.timeAgo.transform(date);
   }
   calcIsFinished() {
-    const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
-    const finishedCount = get(this.entry, 'finishedLessonsCount', 0);
-    return lessonsCount > 0 && finishedCount > 0 && lessonsCount === finishedCount;
+    const totalCount = getPlanTotalItemsCount(this.actualPlan);
+    const finishedCount = getCourseFinishedItemsCount(this.entry);
+    return totalCount > 0 && finishedCount > 0 && totalCount === finishedCount;
   }
   calcHasRating() {
     var _a;
@@ -75,11 +77,6 @@ export class YooCardCourseRowComponent {
       h("yoo-icon", { slot: "start", name: "calendar", color: iconColor, size: "small" }),
       this.dateToDisplay));
   }
-  getLessonsCountText(lessonsCount) {
-    const pluralizedLabel = translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
-    const denominator = this.entry && this.entry['finishedLessonsCount'] && !this.isFinished ? this.finishedLessonsCount + '/' : '';
-    return denominator + lessonsCount + ' ' + pluralizedLabel;
-  }
   renderBookmarkIcon() {
     if (this.host.classList.contains('show-bookmark') && this.entry.isSelfAssigned) {
       return h("yoo-icon", { name: "bookmark", class: "enabled", color: "app-color", size: "medium" });
@@ -91,33 +88,37 @@ export class YooCardCourseRowComponent {
     }
   }
   renderCourseContent() {
-    var _a, _b;
-    let points;
-    if (this.actualPlan.availablePoints > 0 && !this.isSelectedContent()) {
-      points = (_b = (_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints) === null || _b === void 0 ? void 0 : _b.toString();
-      if (this.entry['finishedLessonsCount'] && this.entry['finishedLessonsCount'] >= 1) {
-        points = `${Math.round(get(this.entry, 'earnedPoints', 0))}/${this.actualPlan.availablePoints}`;
-      }
-    }
-    return isWeb(this.host) ? this.renderCourseContentWeb(points) : this.renderCourseContentMobile(points);
+    return isWeb(this.host) ? this.renderCourseContentWeb() : this.renderCourseContentMobile();
   }
   renderProgress() {
-    const plan = get(this.entry, 'plan', {});
-    const lessonsCount = get(plan, 'missiondescriptionsRef', []).length;
-    const { finishedLessonsCount } = this.entry || {};
-    const progress = finishedLessonsCount ? (finishedLessonsCount / lessonsCount) * 100 : 0;
-    return !!progress && progress <= 100 && h("yoo-progress-bar", { value: progress, colorsRepartition: {
+    if (this.forceHideProgressBar) {
+      return;
+    }
+    const progress = getCourseProgress(this.entry);
+    return (!!progress && progress < 100 || this.forceShowProgressBar) && h("yoo-progress-bar", { value: progress, colorsRepartition: {
         colors: ['var(--danger)', 'var(--warning)', 'var(--success)'],
         thresholds: [.39, .79, 1]
       } });
   }
-  renderLessonsText() {
-    const lessonsCount = get(this.actualPlan, 'missiondescriptionsRef', []).length;
-    return lessonsCount > 0 ? (h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
+  renderItemsCountTag() {
+    const key = `SMARTCOUNT${this.entry.type === 'learningpath' ? 'COURSES' : 'LESSONS'}`;
+    const finishedItemsCount = getCourseFinishedItemsCount(this.entry);
+    const finishedItemsText = !this.isFinished && finishedItemsCount > 0 ? finishedItemsCount + '/' : '';
+    const total = getPlanTotalItemsCount(this.actualPlan);
+    return total > 0 ? (h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
       h("yoo-icon", { slot: "start", name: "lesson", color: "stable", size: "small" }),
-      this.getLessonsCountText(lessonsCount))) : null;
+      translateMulti(key, { numerator: finishedItemsText, smart_count: total }))) : null;
   }
-  renderPoints(points) {
+  renderPoints() {
+    var _a, _b, _c;
+    if (!((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.availablePoints)) {
+      return;
+    }
+    let points = (_c = (_b = this.actualPlan) === null || _b === void 0 ? void 0 : _b.availablePoints) === null || _c === void 0 ? void 0 : _c.toString();
+    const finishedItemsCount = getCourseFinishedItemsCount(this.entry);
+    if (finishedItemsCount > 0) {
+      points = `${Math.round(get(this.entry, 'earnedPoints', 0))}/${this.actualPlan.availablePoints}`;
+    }
     return (h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
       h("yoo-icon", { slot: "start", name: "star", color: "app-color", size: "small" }),
       points));
@@ -147,14 +148,19 @@ export class YooCardCourseRowComponent {
     }
     return null;
   }
-  renderCourseContentMobile(points) {
+  renderCourseContentMobile() {
     var _a;
     return (h("div", { class: "content-container" },
       h("div", { class: "inner-container" },
         !this.isSelectedContent() && (h("div", { class: "info-row" },
-          h("div", null,
-            points && this.renderPoints(points),
-            !this.host.classList.contains('selected-content') && this.renderLessonsText()),
+          h("div", { class: "left-part" },
+            h("div", { class: "type-tag" },
+              this.renderTag({ color: 'app-color', icon: 'courses', content: 'COURSE' }),
+              this.isFinished && !this.forceHideProgressTags && this.renderTag({ color: 'success', icon: 'tick', content: 'YOOBICCOMPLETED' }),
+              !this.isFinished && !this.forceHideProgressTags && getCourseFinishedItemsCount(this.entry) > 0 && this.renderTag({ color: 'info', icon: 'ongoing', content: 'ONGOING' })),
+            h("div", { class: "info" },
+              this.renderPoints(),
+              !this.host.classList.contains('selected-content') && this.renderItemsCountTag())),
           h("div", null,
             !this.hideLessonsCount && this.renderBookmarkIcon(),
             this.renderSyncedOffline()))),
@@ -164,16 +170,25 @@ export class YooCardCourseRowComponent {
         this.renderProgress(),
         this.renderRating())));
   }
-  renderCourseContentWeb(points) {
+  renderTag(tagParams) {
+    const { color, icon, content } = tagParams;
+    const iconElement = `<yoo-icon slot="start" name="${icon}" color="${color}" size="small"></yoo-icon>`;
+    return (h("yoo-tag", { color: color, class: "inverse-color", innerHTML: `${iconElement} ${translate(content)}` }));
+  }
+  renderCourseContentWeb() {
     var _a;
     return (h("div", { class: "content-container web-content-container" },
       h("div", { class: "inner-container" },
         !this.isSelectedContent() && (h("div", { class: "info-row web" },
-          h("div", null,
-            points && this.renderPoints(points),
-            !this.host.classList.contains('selected-content') && this.renderLessonsText(),
-            !this.isFinished && this.dateToDisplay && this.renderDate(),
-            this.actualPlan.isActive === false && (h("yoo-tag", { size: "small", color: "stable-light" }, translate('INACTIVE')))),
+          h("div", { class: "left-part" },
+            h("div", { class: "type-tag" }, this.renderTag(getPlanTypeTagProps({ type: this.actualPlan.type }))),
+            h("div", { class: "info" },
+              this.renderPoints(),
+              !this.host.classList.contains('selected-content') && this.renderItemsCountTag(),
+              !this.isFinished && this.dateToDisplay && this.renderDate(),
+              this.actualPlan.isActive === false && (h("yoo-tag", { size: "small", color: "stable-light" }, translate('INACTIVE'))),
+              this.isFinished && !this.forceHideProgressTags && this.renderTag({ color: 'success', icon: 'tick', content: 'YOOBICCOMPLETED' }),
+              !this.isFinished && !this.forceHideProgressTags && getCourseFinishedItemsCount(this.entry) > 0 && this.renderTag({ color: 'info', icon: 'ongoing', content: 'ONGOING' }))),
           h("div", null,
             !this.hideLessonsCount && this.renderBookmarkIcon(),
             this.renderSyncedOffline()))),

package/dist/collection/feature-learn/learning/card-menu/card-menu.css

@@ -208,11 +208,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --icon-margin-left: 0;
   --icon-border-radius: 0;
   --icon-padding: 0;
+  --icon-end-display: initial;
   --arrow-margin: 0 0 0 var(--spacing-08, 0.5rem);
   --container-box-shadow: 0;
   --container-padding-bottom: 0.4rem;
   --container-border-radius: 0;
   --title-padding: 0;
+  --title-font-weight: normal;
+  --title-font-size: cssvar(font-size-14);
+  --title-color: cssvar(dark);
+  --background-color: transparent;
 }
 :host .outer-container {
   display: flex;
@@ -221,6 +226,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: var(--container-padding-bottom);
   overflow: hidden;
   white-space: nowrap;
+  background-color: var(--background-color);
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
   border-radius: var(--container-border-radius);
   box-shadow: var(--container-box-shadow);
@@ -231,7 +237,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   text-overflow: ellipsis;
   flex: 1;
   padding: var(--title-padding);
-  color: var(--dark, #000000);
+  color: var(--title-color);
+  font-weight: var(--title-font-weight);
+  font-size: var(--title-font-size);
 }
 :host .outer-container yoo-icon.start {
   margin-right: var(--spacing-08, 0.5rem);
@@ -242,6 +250,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   fill: var(--icon-color);
 }
 :host .outer-container yoo-icon.end {
+  display: var(--icon-end-display);
   margin: var(--arrow-margin);
 }
 :host .outer-container .counter {

package/dist/collection/feature-learn/learning/card-menu/card-menu.js

@@ -12,11 +12,12 @@ export class YooCardMenuComponent {
     }
   }
   render() {
+    var _a, _b, _c, _d;
     return (h(Host, { class: getAppContext(this.el) },
-      h("div", { class: "outer-container" },
-        h("yoo-icon", { class: "start", name: this.renderIcon(), size: this.sizeLeftIcon || 'medium' }),
-        h("div", { class: "title" }, translateMulti(this.entry.title)),
-        this.entry.count && h("div", { class: "counter" }, this.entry.count),
+      h("div", { class: "outer-container", style: { 'background-color': (_a = this.entry) === null || _a === void 0 ? void 0 : _a.backgroundCustomColor } },
+        h("yoo-icon", { class: "start", name: this.renderIcon(), size: this.sizeLeftIcon || 'medium', customColor: (_b = this.entry) === null || _b === void 0 ? void 0 : _b.iconCustomColor, style: { 'background-color': ((_c = this.entry) === null || _c === void 0 ? void 0 : _c.iconBackgroundColor) || 'transparent' } }),
+        h("div", { class: "title", style: { 'color': (_d = this.entry) === null || _d === void 0 ? void 0 : _d.titleCustomColor } }, translateMulti(this.entry.title)),
+        this.entry.count !== null && h("div", { class: "counter" }, this.entry.count),
         h("yoo-icon", { class: "end", size: this.sizeLeftIcon || 'medium', name: this.typeRightIcon || 'right', color: "stable" }))));
   }
   static get is() { return "yoo-card-menu"; }

package/dist/collection/feature-operate/campaign/detail-bar/detail-bar.js

@@ -190,7 +190,7 @@ export class YooDetailBarComponent {
         h("yoo-tag", { color: "text-color-10" }, this.status))),
       this.renderContent('ACTIVE', isBoolean(this.isActive) ? (this.isActive ? 'YES' : 'NO') : '-'),
       this.period && this.period !== '-' && this.renderContent('PERIOD', this.period),
-      this.isFeatured !== null && this.renderContent('FEATUREDCOURSE', this.isFeatured ? 'YES' : 'NO'),
+      this.isFeatured !== null && this.renderContent('FEATURED', this.isFeatured ? 'YES' : 'NO'),
       this.progressiveLessons != null && this.renderContent('PROGRESSIVELESSONS', this.progressiveLessons ? 'Yes' : 'No'),
       this.category && this.renderContent('CATEGORY', this.category),
       havePoints &&

package/dist/collection/utils/helpers/common-helpers.js

@@ -1,5 +1,5 @@
 import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation';
-import { animations, cleanupWKWebViewFilePath, Cloudinary, CloudinaryGradientLayer, dateDiffInCalendarDays, debounce, findParent, getAsyncExtraData, getCssColor, getModalAnimation, getProtocol, isAndroid, isDateAfter, isDateBefore, isFullScreenFalse, isIOS, isIpadPro, isIphoneX, isNativeFilePath, isNativeMobile, isTablet, isWeb, querySelectorDeep as _querySelectorDeep, setAnimation, showModal, startOf, translate, YOOBICON_ENTITIES_MAP } from '@shared/utils';
+import { animations, cleanupWKWebViewFilePath, Cloudinary, CloudinaryGradientLayer, dateDiffInCalendarDays, debounce, findDevice, findParent, getAsyncExtraData, getCssColor, getModalAnimation, getProtocol, isAndroid, isDateAfter, isDateBefore, isFullScreenFalse, isIOS, isIpadPro, isIphoneX, isNativeFilePath, isNativeMobile, isTablet, isWeb, querySelectorDeep as _querySelectorDeep, setAnimation, showModal, startOf, translate, YOOBICON_ENTITIES_MAP } from '@shared/utils';
 import { get } from 'lodash-es';
 function getDefaultModalAnimation() {
   return ['Enter', 'Leave'].map((v) => getModalAnimation(v, 'X', true));
@@ -94,7 +94,7 @@ export function getAppContext(host) {
     root = host.__device;
   }
   else if (host) {
-    const device = findParent(host, 'yoo-device');
+    const device = findDevice(host);
     if (device) {
       root = device;
       host.__device = device;

package/dist/design-system/{button.factory-5170e025.js → button.factory-6c7aab55.js}

@@ -1,6 +1,6 @@
-import './index-3e01f8b1.js';
+import './index-1b38d4f3.js';
 import { h } from './index-becca019.js';
-import { X as translateMulti } from './overlays-3034a4ab.js';
+import { Z as translateMulti } from './overlays-be5a9ab3.js';
 
 const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },

package/dist/design-system/{camera-helpers-55474ba9.js → camera-helpers-34aebfda.js}

@@ -1,5 +1,5 @@
-import { ci as cordova, cj as AwesomeCordovaNativePlugin, ck as cordovaPropertyGet, cl as cordovaPropertySet, cm as registerPlugin, $ as getSession, cn as isIonic, j as isNativeMobile, co as Device, k as isAndroid, H as isIOS, cp as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-3034a4ab.js';
-import './index-5f5d7926.js';
+import { cm as cordova, cn as AwesomeCordovaNativePlugin, co as cordovaPropertyGet, cp as cordovaPropertySet, cq as registerPlugin, a3 as getSession, cr as isIonic, j as isNativeMobile, cs as Device, k as isAndroid, H as isIOS, ct as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-be5a9ab3.js';
+import './index-c7d02f02.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -243,7 +243,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-75eed30a.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-54bac092.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;

package/dist/{esm/chat-helpers-82a33f4b.js → design-system/chat-helpers-fcd6508c.js}

@@ -1,6 +1,6 @@
-import './index-5f5d7926.js';
+import './index-c7d02f02.js';
 import { i as isArray } from './lodash-f6e59a8e.js';
-import { ai as is24Hour, aj as isFile, z as showModal, A as isWeb, ak as replaceAtTagToMentionTag, al as replaceAllLinks, X as translateMulti } from './overlays-3034a4ab.js';
+import { am as is24Hour, an as isFile, z as showModal, A as isWeb, ao as replaceAtTagToMentionTag, ap as replaceAllLinks, Z as translateMulti } from './overlays-be5a9ab3.js';
 
 /**
  * Get the proper data format for a single message aswell as grouped messages

package/dist/design-system/{common-helpers-e349cedf.js → common-helpers-0071c2da.js}

@@ -1,5 +1,5 @@
-import { y as getModalAnimation, t as translate, z as showModal, A as isWeb, C as debounce, D as querySelectorDeep$1, j as isNativeMobile, S as ScreenOrientation, F as findParent, G as isIphoneX, l as isIpadPro, n as isTablet, h as isFullScreenFalse, H as isIOS, k as isAndroid, I as setAnimation, J as animations, K as getCssColor, Y as YOOBICON_ENTITIES_MAP, L as startOf, M as isDateBefore, N as dateDiffInCalendarDays, O as isDateAfter, P as getAsyncExtraData, Q as isNativeFilePath, R as cleanupWKWebViewFilePath, T as Cloudinary, U as getProtocol, V as CloudinaryGradientLayer } from './overlays-3034a4ab.js';
-import './index-5f5d7926.js';
+import { y as getModalAnimation, t as translate, z as showModal, A as isWeb, C as debounce, D as querySelectorDeep$1, j as isNativeMobile, S as ScreenOrientation, F as findDevice, G as isIphoneX, l as isIpadPro, n as isTablet, h as isFullScreenFalse, H as isIOS, k as isAndroid, I as setAnimation, J as animations, K as getCssColor, Y as YOOBICON_ENTITIES_MAP, L as startOf, M as isDateBefore, N as dateDiffInCalendarDays, O as isDateAfter, P as getAsyncExtraData, Q as findParent, R as isNativeFilePath, T as cleanupWKWebViewFilePath, U as Cloudinary, V as getProtocol, W as CloudinaryGradientLayer } from './overlays-be5a9ab3.js';
+import './index-c7d02f02.js';
 import { C as get } from './lodash-f6e59a8e.js';
 
 function getDefaultModalAnimation() {
@@ -95,7 +95,7 @@ function getAppContext(host) {
     root = host.__device;
   }
   else if (host) {
-    const device = findParent(host, 'yoo-device');
+    const device = findDevice(host);
     if (device) {
       root = device;
       host.__device = device;