@yoobic/yobi 8.3.0-39 → 8.3.0-42

package/dist/collection/components/form-creator/form-creator-translate/form-creator-translate.js

@@ -117,7 +117,7 @@ export class YooFormCreatorTranslateComponent {
         text: translate('DELETEALL'),
         icon: 'delete',
         handler: () => this.onLanguageDeleteAllConfirm(),
-        isVisible: () => { var _a, _b; return (!this.isTranslator && !((_a = this.plan) === null || _a === void 0 ? void 0 : _a.isActive) && !((_b = this.missionDescription) === null || _b === void 0 ? void 0 : _b.active)) || getAuthentication().isRoleAdmin(); }
+        isVisible: () => { var _a, _b; return (!this.isTranslator && !((_a = this.plan) === null || _a === void 0 ? void 0 : _a.isActive) && !((_b = this.missionDescription) === null || _b === void 0 ? void 0 : _b.active)) || getAuthentication().isYoobicTenantAdmin(); }
       }
     ];
     this.gridConfig = {

package/dist/collection/components/form-creator/workflow/workflow.js

@@ -38,7 +38,7 @@ export class YooWorkflowComponent {
       this.currentWorkflowStep = this.steps[0];
     }
     this.wheelListener = this.onWorkflowZoom.bind(this);
-    window.addEventListener('wheel', this.wheelListener, { passive: false });
+    window.addEventListener('wheel', this.wheelListener, { passive: true });
   }
   componentDidLoad() {
     this.centerWorkflow();

package/dist/collection/components/grid/ag-grid/ag-grid.css

@@ -9071,4 +9071,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
 
 :host(.filesFolders) [col-id=entity] .ag-cell-wrapper {
   align-items: flex-start;
+}
+
+:host(.coursecategories) [col-id=actions] {
+  padding: var(--spacing-04, 0.25rem) var(--spacing-04, 0.25rem) !important;
 }

package/dist/collection/components/grid/ag-grid/grid-renderers.js

@@ -748,6 +748,11 @@ function entityArrayTextRenderer(params) {
   const value = entities.map((e) => get(e, params.fieldName)).join(', ');
   return truncateRenderer({ ...params, value });
 }
+function categoryIconRenderer(params) {
+  const category = params.data;
+  const img = `<yoo-avatar style="margin-right:0.5rem" size="small" icon="${category.icon}" color="${category.color || 'dark'}"></yoo-avatar>`;
+  return truncateRenderer({ value: translateMulti(category.title), maxLine: 1 }, img);
+}
 function buttonRenderer(params) {
   var _a;
   if ((_a = params.colDef) === null || _a === void 0 ? void 0 : _a.cellRendererParams) {
@@ -1174,7 +1179,6 @@ class EntityRenderer {
     this.entity.displayType = params.displayType || 'card-list';
     this.entity.entityType = entityType;
     this.entity.customModel = params.customModel;
-    this.entity.disableRowClick = params.disableRowClick;
     this.entity.isGridCell = true;
     this.entity.item = params.useValue ? params.value : params.data;
     if (entityType === 'missiondatas' && ((_b = (_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a.mission) === null || _b === void 0 ? void 0 : _b.hasWorkflow)) {
@@ -1411,6 +1415,8 @@ export function getRenderer(renderer) {
       return pricecheckRenderer;
     case 'folderIconRenderer':
       return folderIconRenderer;
+    case 'categoryIconRenderer':
+      return categoryIconRenderer;
     case 'entityArrayTextRenderer':
       return entityArrayTextRenderer;
     case 'campaignStatusRenderer':

package/dist/collection/components/grid/grid/grid.css

@@ -244,6 +244,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --framed-radius: initial;
   --framed-margin: 0;
   --card-feed-border-color: var(--stable-alt-60, rgba(208, 208, 208, 0.6));
+  --arrows-background-left: var(--linear-gradient-left, linear-gradient(to left, rgba(255, 255, 255, 0), white));
+  --arrows-background-right: var(--linear-gradient-right, linear-gradient(to right, rgba(255, 255, 255, 0), white));
   display: block;
 }
 :host .flex {
@@ -581,6 +583,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: inline-block;
   padding-left: 0.2rem;
 }
+:host .container-base .header-container .see-all {
+  color: var(--app-color, #5a30f4);
+  font-size: var(--font-size-14, 0.875rem);
+  cursor: pointer;
+}
 :host .container-base .empty-state-container {
   display: flex;
   align-items: center;
@@ -2744,11 +2751,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host(.web:not(.framed)) .container-base .gradient-overlay.left {
   left: -1rem;
-  background: var(--linear-gradient-left, linear-gradient(to left, rgba(255, 255, 255, 0), white));
+  background: var(--arrows-background-left);
 }
 :host(.web:not(.framed)) .container-base .gradient-overlay.right {
   right: 0;
-  background: var(--linear-gradient-right, linear-gradient(to right, rgba(255, 255, 255, 0), white));
+  background: var(--arrows-background-right);
 }
 :host(.web:not(.framed)) .container-base .title-container {
   display: flex;
@@ -3310,13 +3317,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-bottom: 0;
 }
 
-:host(.card-cell-color) .grid-cell {
+:host(.card-cell-color) .grid-cell,
+:host(.card-menu) .grid-cell {
   display: grid !important;
   grid-template-columns: var(--grid-template-columns, repeat(2, minmax(0, 1fr)));
   gap: var(--grid-template-gap, var(--spacing-08, 0.5rem));
 }
-:host(.card-cell-color) .entity-inner-container {
+:host(.card-cell-color) .entity-inner-container,
+:host(.card-menu) .entity-inner-container {
   width: 100%;
+}
+
+:host(.card-cell-color) .entity-inner-container {
   height: 100%;
 }
 
@@ -3401,7 +3413,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   grid-gap: var(--spacing-16, 1rem);
 }
 
-:host(.card-cell-color:not(.framed.small)) .grid-cell {
+:host(.card-cell-color:not(.framed.small)) .grid-cell, :host(.card-menu:not(.framed.small)) .grid-cell {
   display: grid !important;
   grid-template-columns: var(--grid-template-columns, repeat(2, minmax(0, 1fr)));
   gap: var(--grid-template-gap, var(--spacing-16, 1rem));
@@ -3816,16 +3828,27 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --heading-font-size-card-list: var(--font-size-16, 1rem);
 }
 
-:host(.web.coursecategory) .header-title {
-  padding-bottom: 0.5rem;
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
+:host(.discover) .header-title {
+  margin-top: 0 !important;
+  font-weight: var(--font-weight-700, 700) !important;
+  font-size: var(--font-size-20, 1.25rem) !important;
 }
-:host(.web.coursecategory) .header-title div:first-child {
-  display: flex;
-  flex-direction: row-reverse;
+
+:host(.mobile.discover) .header-title {
+  margin-left: 0 !important;
+  font-weight: var(--font-weight-900, 900) !important;
+  font-size: var(--font-size-18, 1.125rem) !important;
 }
-:host(.web.coursecategory) .header-title div:first-child .total-number {
-  padding-left: 0.25rem;
+
+:host(.discover.featured) .body-container.card-sticky {
+  padding: var(--spacing-08, 0.5rem) 0 0 0;
+}
+:host(.discover.featured) .header-title {
+  margin: 0 0 0 var(--spacing-16, 1rem) !important;
+}
+
+:host(.subcategories) .grid-cell {
+  margin-top: 0;
 }
 
 :host(.card-sticky.courses) yoo-ion-slides {
@@ -3863,12 +3886,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-bottom: var(--spacing-16, 1rem);
 }
 
-:host(.web.plans.card-sticky) .header-title {
-  padding-top: 1rem;
-  padding-bottom: 0.75rem;
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);
-}
-
 :host(.web.card-plan) yoo-ion-item.selected:not(.card-plan) {
   background-color: var(--light, #ffffff);
 }
@@ -4072,7 +4089,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-top: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
 }
 
-:host(.course-live-preview.web) .container-base {
+:host(.course-preview.web) .container-base {
   margin-right: var(--spacing-16, 1rem);
 }
 

package/dist/collection/components/grid/grid/grid.js

@@ -526,6 +526,9 @@ export class YooGridComponent {
       this.slidesOptions.spaceBetween = 0;
       this.slidesOptions.slidesPerView = 'auto';
     }
+    if (this.displayType === 'card-sticky' && this.entityType === 'photos') {
+      this.slidesOptions.slidesOffsetBefore = 0;
+    }
     if (!isWeb(this.host)) {
       this.setDisplayIcon();
     }
@@ -767,6 +770,11 @@ export class YooGridComponent {
         if (this.gridApi.destroyCalled) {
           return;
         }
+        if (this.isTree()) {
+          this.gridApi.addRowDropZone({
+            getContainer: () => this.host
+          });
+        }
         // this.isEmptyAgGrid = !this.disconnected && this.gridApi?.getDisplayedRowCount() <= 0;
         if (!this.isLocal && !this.disconnected) {
           this.gridApi.setServerSideDatasource({
@@ -933,7 +941,7 @@ export class YooGridComponent {
     }
   }
   preventSlidePerView() {
-    const preventArr = ['courses-small', 'feeds', 'courses', 'plans', 'missiondescriptions', 'badges', 'tenants'];
+    const preventArr = ['courses-small', 'feeds', 'courses', 'plans', 'missiondescriptions', 'badges', 'tenants', 'photos'];
     return preventArr.includes(this.entityType) && (this.displayType === 'card-sticky' || this.displayType === 'card-list-color' || this.profileSummary);
   }
   async updateSlides(forceAnimation) {
@@ -1392,10 +1400,10 @@ export class YooGridComponent {
       this.field.isSelectAll = this.isSelectAll;
     }
   }
-  onToggleSelectAll() {
+  async onToggleSelectAll(forceSelectAll) {
     const isCurrentSelectAll = this.isSelectAll;
     this.clearSelection(false);
-    this.updateSelectAll(!isCurrentSelectAll);
+    this.updateSelectAll(forceSelectAll || !isCurrentSelectAll);
     this.updateGridSelectAllState();
     this.setFormFieldValue();
     this.selectallToggled.emit(this.isSelectAll);
@@ -2369,7 +2377,7 @@ export class YooGridComponent {
             this.total > 0 || !this.hideHeadingIfEmpty ? title : null,
             !this.hideTotal && this.renderTotalNumber())),
         (this.entityType === 'courses' || this.entityType === 'plans' || this.entityType === 'courses-small') && this.renderDisplayMode(),
-        this.showSeeAll && this.total > 0 && (h("div", { class: "icon-container", onClick: () => this.onHeadingClick() }, translate('YOOBICSEEALL'))))) : (this.renderProgressBar()),
+        this.showSeeAll && this.total > 0 && (h("div", { class: "icon-container see-all", onClick: () => this.onHeadingClick() }, translate('YOOBICSEEALL'))))) : (this.renderProgressBar()),
       (this.gridIsExpanded && this.forceHideSearch) || this.isFramed || this.hideToolbar || (!renderSearchOrAutocomplete && !renderEntityTags) ? null : (h("yoo-navbar", { centerTitle: false, class: {
           'grid': !this.isAutoComplete,
           'card-inbox': (_f = (_e = this.host) === null || _e === void 0 ? void 0 : _e.classList) === null || _f === void 0 ? void 0 : _f.contains('card-inbox'),
@@ -2626,7 +2634,7 @@ export class YooGridComponent {
     else if (this.isKanban()) {
       return this.renderKanban();
     }
-    else if (['card-cell', 'card-cell-color', 'card-cell-image', 'card-media', 'card-template'].includes(this.displayType) &&
+    else if (['card-cell', 'card-cell-color', 'card-cell-image', 'card-media', 'card-template', 'card-menu'].includes(this.displayType) &&
       ((_b = this.filteredItems) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
       this.direction !== 'horizontal') {
       if (this.headerFn) {
@@ -2659,9 +2667,9 @@ export class YooGridComponent {
       else {
         return [
           h("slot", { name: "header" }),
-          h("div", { class: { 'grid-cell': this.displayType.includes('card-cell'), 'grid-media': this.displayType === 'card-media' } }, (_c = this.filteredItems) === null || _c === void 0 ? void 0 :
+          h("div", { class: { 'grid-cell': this.displayType.includes('card-cell') || this.displayType === 'card-menu', 'grid-media': this.displayType === 'card-media' } }, (_c = this.filteredItems) === null || _c === void 0 ? void 0 :
             _c.map((item, index) => this.renderEntity(item, null, index)),
-            !['card-cell-color', 'card-cell-image', 'card-template'].includes(this.displayType) &&
+            !['card-cell-color', 'card-cell-image', 'card-template', 'card-menu'].includes(this.displayType) &&
               !['channel', 'channels', 'contacts', 'locations'].includes(this.entityType) &&
               !this.host.classList.contains('grid-cell-channels') &&
               range(6).map(() => (h("yoo-entity", { class: {
@@ -7967,6 +7975,25 @@ export class YooGridComponent {
         "text": "",
         "tags": []
       }
+    },
+    "onToggleSelectAll": {
+      "complexType": {
+        "signature": "(forceSelectAll?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "host"; }

package/dist/collection/components/layout/layout-two-columns/layout-two-columns.js

@@ -1,6 +1,9 @@
 import { translate } from '@shared/utils';
 import { Component, h, Host, Prop } from '@stencil/core';
 export class YooLayoutTwoColumsComponent {
+  constructor() {
+    this.hideHeader = false;
+  }
   renderHeader() {
     return h("yoo-header", { class: "no-border" },
       h("yoo-navbar", { centerTitle: false },
@@ -22,7 +25,7 @@ export class YooLayoutTwoColumsComponent {
   }
   render() {
     return h(Host, null,
-      this.renderHeader(),
+      !this.hideHeader && this.renderHeader(),
       this.renderBody());
   }
   static get is() { return "yoo-layout-two-columns"; }
@@ -50,6 +53,24 @@ export class YooLayoutTwoColumsComponent {
       },
       "attribute": "header",
       "reflect": false
+    },
+    "hideHeader": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hide-header",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
 }

package/dist/collection/feature-communicate/chat/chat-message/chat-message.js

@@ -1,9 +1,9 @@
 import { MessageType } from '@shared/interfaces';
-import { dateFormat, getExtension, getResizedImageSize, getSession, isAudio, isBase64, isDocument, isFile, isImage, isIOS, isNativeMobile, isPdf, isPhotoEdited, isRichContentMessage, isUnsplashUrl, isVideo, replaceAllLinks, replaceAndGetAllLinks, replaceAtTagToMentionTag, showMessageInfoDialog, translate, translateMulti } from '@shared/utils';
+import { dateFormat, getExtension, getResizedImageSize, getSession, isAudio, isBase64, isDocument, isFile, isImage, isIOS, isNativeMobile, isPdf, isPhotoEdited, isRichContentMessage, isUnsplashUrl, isVideo, replaceAndGetAllLinks, showMessageInfoDialog, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State } from '@stencil/core';
 import { debounce } from 'lodash-es';
 import { assignPressActions } from '../../../utils/gesture';
-import { getDateFormats } from '../../../utils/helpers/chat-helpers';
+import { convertTags, getDateFormats } from '../../../utils/helpers/chat-helpers';
 const DEFAULT_VIDEO_DIMENSIONS = { width: 240, height: 175 };
 export class YooChatMessageComponent {
   constructor() {
@@ -47,10 +47,6 @@ export class YooChatMessageComponent {
     var _a;
     return !!((_a = this.message) === null || _a === void 0 ? void 0 : _a.replyMessage);
   }
-  get hasMentions() {
-    var _a, _b;
-    return !!((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.mentions) === null || _b === void 0 ? void 0 : _b.length);
-  }
   get hasPreviewLinks() {
     var _a;
     return !!((_a = this.linkPreviews) === null || _a === void 0 ? void 0 : _a.length);
@@ -226,11 +222,9 @@ export class YooChatMessageComponent {
   renderBasicMessage() {
     const { mentions, content } = this.message || {};
     const textColor = this.isMe ? 'light' : 'app-color';
-    const convertMentions = (text) => this.hasMentions ? replaceAtTagToMentionTag(text, mentions, textColor) : text;
-    const convertLinks = (text) => replaceAllLinks(translateMulti(text), false, textColor);
     return h("section", { id: "text", ...(isRichContentMessage(this.message) || this.mediaUrl) && { 'is-between': true }, class: "content" },
       !this.isReply && !this.hasPreviewLinks && this.renderMoreOptions(),
-      h("yoo-text", { ref: (el) => (this.textElement = el), content: content, extraConversion: [convertLinks, convertMentions] }));
+      h("yoo-text", { ref: (el) => (this.textElement = el), content: content, extraConversion: (host) => convertTags(host, { mentions, textColor }) }));
   }
   renderAudio() {
     return (h("yoo-audio-player", { boost: 100, src: this.mediaUrl }));

package/dist/collection/feature-communicate/chat/chat-message-preview/chat-message-preview.js

@@ -1,6 +1,7 @@
 import { MessageType } from '@shared/interfaces';
-import { getAudioDuration, getUserDisplayName, isChatMessageTypeMedia, isFile, pipes, replaceAllLinks, replaceAndGetAllLinks, translate, translateMulti } from '@shared/utils';
+import { getAudioDuration, getUserDisplayName, isChatMessageTypeMedia, isFile, pipes, replaceAndGetAllLinks, translate } from '@shared/utils';
 import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { convertTags } from '../../../utils/helpers/chat-helpers';
 export class YooChatMessagePreviewComponent {
   constructor() {
     this.animated = true;
@@ -72,7 +73,6 @@ export class YooChatMessagePreviewComponent {
   }
   renderMedia(type) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const convertLinks = (text) => replaceAllLinks(translateMulti(text), false, 'app-color');
     return [
       h("yoo-icon", { name: this.getMediaIcon(type), color: !this.isInputBarMode ? 'app-color' : 'stable', size: "small" }),
       (type === MessageType.photo) && translate('YOOBIC' + ((_b = (_a = this.message) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.toUpperCase())),
@@ -80,7 +80,7 @@ export class YooChatMessagePreviewComponent {
       type === MessageType.audio && (pipes.timer.transform(Math.round((_f = (_e = this.message) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.duration)).substr(3)),
       type === MessageType.document && h("yoo-truncate", null, ((_h = (_g = this.message) === null || _g === void 0 ? void 0 : _g.payload) === null || _h === void 0 ? void 0 : _h._filename) || translate('YOOBICDOCUMENT')),
       type === MessageType.texturlpreview && h("yoo-truncate", null,
-        h("yoo-text", { content: (_j = this.message) === null || _j === void 0 ? void 0 : _j.content, extraConversion: [convertLinks] }))
+        h("yoo-text", { content: (_j = this.message) === null || _j === void 0 ? void 0 : _j.content, extraConversion: (host) => convertTags(host, { textColor: 'app-color' }) }))
     ];
   }
   renderMediaPreview(type, source) {

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

@@ -1,4 +1,4 @@
-import { getPlanDueDate, translate, translateMulti } from '@shared/utils';
+import { getCourseFinishedItemsCount, getCourseProgress, getPlanDueDate, getPlanTotalItemsCount, translateMulti } from '@shared/utils';
 import { Component, Event, h, Prop } from '@stencil/core';
 import { get } from 'lodash-es';
 export class YooCardCourseComponent {
@@ -24,59 +24,70 @@ export class YooCardCourseComponent {
     const isLocked = this.entry.isLocked;
     const isSavedOffline = this.entry.isSavedOffline;
     const isSelfAssigned = this.entry.isSelfAssigned;
-    const hasIcons = isLocked || isSavedOffline || isSelfAssigned;
+    const isFinished = getCourseProgress(this.entry) === 100;
+    const isOngoing = !isFinished && getCourseProgress(this.entry) > 0;
+    const hasIcons = isLocked || isSavedOffline || isSelfAssigned || isFinished || isOngoing;
     const iconSize = this.cardSize === 'small' ? 'small' : 'medium';
     return (backgroundImage && (h("yoo-img", { type: hasIcons ? 'background' : 'default', disabled: isLocked, class: "image", instant: this.entry.isGridCell, src: backgroundImage }, hasIcons && (h("yoo-items", null,
       isLocked && h("yoo-icon", { color: "light", name: "lock", size: iconSize }),
       isSavedOffline && h("yoo-icon", { name: "downloaded", size: iconSize }),
-      isSelfAssigned && h("yoo-icon", { color: "app-color", name: "bookmark", size: iconSize }))))));
+      isFinished && h("yoo-icon", { color: "success", name: "tick", size: iconSize }),
+      isOngoing && h("yoo-icon", { color: "info", name: "ongoing", size: iconSize }),
+      isSelfAssigned && !isFinished && !isOngoing && h("yoo-icon", { color: "app-color", name: "bookmark", size: iconSize }))))));
   }
-  renderProgressBar(lessonsCount) {
-    const { finishedLessonsCount } = this.entry;
-    return h("yoo-progress-bar", { class: { 'app-color': !this.profileSummary }, value: finishedLessonsCount ? (finishedLessonsCount / lessonsCount) * 100 : 0 });
+  renderProgressBar() {
+    const progress = getCourseProgress(this.entry);
+    return h("yoo-progress-bar", { class: { 'app-color': !this.profileSummary }, value: progress });
   }
   renderCourseTitle(plan) {
     return [h("div", { class: "course-title" }, translateMulti(plan.title)), plan.description && h("div", { class: "course-description" }, translateMulti(plan.description))];
   }
-  renderCourseLessonAndPointInfo(lessonsCount, dueDate, isFinished) {
-    const lessonLabel = translate((lessonsCount || 0) > 1 ? 'LESSONS' : 'LESSON');
+  renderCourseLessonAndPointInfo(dueDate) {
+    var _a, _b, _c, _d, _e, _f;
+    const isFinished = getCourseProgress(this.entry) === 100;
+    const key = `SMARTCOUNT${this.entry.type === 'learningpath' ? 'COURSES' : 'LESSONS'}`;
+    const finishedItemsCount = getCourseFinishedItemsCount(this.entry);
+    const finishedItemsText = !isFinished && finishedItemsCount > 0 ? finishedItemsCount + '/' : '';
+    const total = getPlanTotalItemsCount((_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan);
+    let points = (_d = (_c = (_b = this.entry) === null || _b === void 0 ? void 0 : _b.plan) === null || _c === void 0 ? void 0 : _c.availablePoints) === null || _d === void 0 ? void 0 : _d.toString();
+    if (finishedItemsCount > 0) {
+      points = `${Math.round(get(this.entry, 'earnedPoints', 0))}/${(_f = (_e = this.entry) === null || _e === void 0 ? void 0 : _e.plan) === null || _f === void 0 ? void 0 : _f.availablePoints}`;
+    }
     return (h("div", { class: "course-info" },
       this.profileSummary && (h("div", { class: "points" },
         h("yoo-tag", { color: "dark", noBackground: true, size: "small" },
           h("yoo-icon", { color: "app-color", name: "star", size: this.iconSize, slot: "start" }),
-          this.entry.earnedPoints || 0,
-          "/",
-          this.entry.plan.availablePoints || 0))),
-      lessonsCount > 0 && (h("div", { class: "lessons" }, !this.entry.finished && (h("yoo-tag", { color: this.profileSummary ? 'dark' : 'stable', noBackground: true, size: "small" },
-        h("yoo-icon", { color: "stable", name: "lesson", size: this.iconSize, slot: "start" }),
-        this.entry.finishedLessonsCount || 0,
-        "/",
-        lessonsCount || 0,
-        " ",
-        lessonLabel)))),
+          points))),
+      h("div", { class: "lessons" },
+        h("yoo-tag", { color: this.profileSummary ? 'dark' : 'stable', noBackground: true, size: "small" },
+          h("yoo-icon", { color: "stable", name: "lesson", size: this.iconSize, slot: "start" }),
+          translateMulti(key, { numerator: finishedItemsText, smart_count: total }))),
       !isFinished && dueDate && !this.profileSummary && (h("div", { class: "date" },
         h("yoo-tag", { color: "danger", noBackground: true, size: "small" },
           h("yoo-icon", { color: "danger", name: "alarm", size: this.iconSize, slot: "start" }),
           dueDate.toLocaleDateString())))));
   }
-  renderEarnedCoursePoints(plan) {
+  renderEarnedCoursePoints() {
+    var _a, _b, _c, _d, _e;
+    let points = (_c = (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan) === 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))}/${(_e = (_d = this.entry) === null || _d === void 0 ? void 0 : _d.plan) === null || _e === void 0 ? void 0 : _e.availablePoints}`;
+    }
     return (h("div", { class: "course-points" },
       h("yoo-tag", { color: this.isSmall ? 'light' : 'app-color-10', noBackground: this.isSmall },
         h("yoo-icon", { slot: "start", color: this.isSmall ? 'light' : 'app-color', size: this.iconSize, name: "star" }),
-        Math.round(this.entry.earnedPoints),
-        "/",
-        plan.availablePoints)));
+        points)));
   }
-  renderCourseContent(plan, lessonsCount, dueDate) {
-    const isFinished = this.entry.finishedLessonsCount > 0 && lessonsCount > 0 && this.entry.finishedLessonsCount === lessonsCount;
+  renderCourseContent(dueDate) {
     if (this.profileSummary) {
-      return [this.renderProgressBar(lessonsCount), this.renderCourseLessonAndPointInfo(lessonsCount, dueDate, isFinished)];
+      return [this.renderProgressBar(), this.renderCourseLessonAndPointInfo(dueDate)];
     }
     else {
       return [
-        !!this.entry.earnedPoints && !!plan.availablePoints && this.renderEarnedCoursePoints(plan),
-        this.renderCourseLessonAndPointInfo(lessonsCount, dueDate, isFinished),
-        this.renderProgressBar(lessonsCount)
+        this.renderEarnedCoursePoints(),
+        this.renderCourseLessonAndPointInfo(dueDate),
+        this.renderProgressBar()
       ];
     }
   }
@@ -88,8 +99,8 @@ export class YooCardCourseComponent {
       lessonsCount = get(plan, 'lessonsCount', 0);
     }
     return (h("div", { class: { 'content-container': true, 'profile-summary': this.profileSummary } }, this.profileSummary
-      ? [this.renderCourseContent(plan, lessonsCount, dueDate), this.renderCourseTitle(plan)]
-      : [this.renderCourseTitle(plan), this.renderCourseContent(plan, lessonsCount, dueDate)]));
+      ? [this.renderCourseContent(dueDate), this.renderCourseTitle(plan)]
+      : [this.renderCourseTitle(plan), this.renderCourseContent(dueDate)]));
   }
   render() {
     var _a;

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

@@ -312,6 +312,22 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   align-items: center;
   justify-content: space-between;
 }
+:host .outer-container .content-container .inner-container .info-row .left-part {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+:host .outer-container .content-container .inner-container .info-row .left-part .type-tag {
+  padding-bottom: var(--spacing-08, 0.5rem);
+}
+:host .outer-container .content-container .inner-container .info-row .left-part .info {
+  display: flex;
+  flex-direction: row;
+}
+:host .outer-container .content-container .inner-container .info-row .left-part .info yoo-tag {
+  padding-right: var(--spacing-08, 0.5rem);
+}
 :host .outer-container .content-container .inner-container .info-row.web {
   gap: var(--spacing-16, 1rem);
 }
@@ -323,10 +339,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .content-container .inner-container .info-row div {
   display: flex;
-  gap: inherit;
   align-items: center;
 }
 :host .outer-container .content-container .inner-container .info-row yoo-tag {
+  margin-right: var(--spacing-08, 0.5rem);
   overflow: hidden;
 }
 :host .outer-container .content-container .inner-container .info-row yoo-icon.enabled {
@@ -367,7 +383,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --max-lines: 1;
 }
 :host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container {
-  height: 6rem;
+  height: auto;
 }
 :host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container .content-container {
   max-height: 12rem;