@yoobic/yobi 8.3.0-41 → 8.3.0-42

package/dist/collection/components/form/form-dynamic/helpers/index.js

@@ -48,12 +48,12 @@ export function getInputType(field) {
       return FormFieldType.text;
   }
 }
-export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTranslationKey, isDisabled, nextButtonHandler, previousButtonHandler, size }) {
+export function getPreviousAndNextButtons({ host, hasPreviousButton, lastButtonTranslationKey, isDisabled, nextButtonHandler, previousButtonHandler, size }) {
   const buttons = [];
   if (hasPreviousButton) {
     buttons.push({
       actionType: 'goback',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('GOBACK'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => previousButtonHandler()
@@ -63,7 +63,7 @@ export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTransla
     buttons.push({
       text: translate(lastButtonTranslationKey),
       color: 'app-color',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       disabled: isDisabled,
       handler: () => nextButtonHandler()
@@ -71,24 +71,24 @@ export function getPreviousAndNextButtons({ hasPreviousButton, lastButtonTransla
   }
   return buttons;
 }
-export function getNextButton(nextButtonHandler, size) {
+export function getNextButton(host, nextButtonHandler, size) {
   return [
     {
       actionType: 'next',
       text: translate('YOOBICNEXT'),
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       color: 'app-color',
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => nextButtonHandler()
     }
   ];
 }
-export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview, previousButtonHandler, previewButtonHandler, size) {
+export function getLastButtons(host, submitButtonEntry, hasPreviousButton, showPreview, previousButtonHandler, previewButtonHandler, size) {
   const buttons = [];
   if (hasPreviousButton) {
     buttons.push({
       actionType: 'goback',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('GOBACK'),
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
       handler: () => previousButtonHandler()
@@ -97,7 +97,7 @@ export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview
   else if (showPreview) {
     buttons.push({
       actionType: 'preview',
-      size: size || (isWeb() ? 'medium' : 'large'),
+      size: size || (isWeb(host) ? 'medium' : 'large'),
       text: translate('PREVIEW'),
       color: 'light',
       cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
@@ -107,7 +107,7 @@ export function getLastButtons(submitButtonEntry, hasPreviousButton, showPreview
   buttons.push({ ...submitButtonEntry });
   return buttons;
 }
-export function getRecapButton(validity, showPreview, isPreview, previewHandler, submitHandler, startHandler) {
+export function getRecapButton(host, validity, showPreview, isPreview, previewHandler, submitHandler, startHandler) {
   const buttons = [];
   if (validity) {
     if (showPreview) {
@@ -115,25 +115,25 @@ export function getRecapButton(validity, showPreview, isPreview, previewHandler,
         actionType: 'preview',
         text: translate('PREVIEW'),
         color: 'light',
-        size: isWeb() ? 'medium' : 'large',
+        size: isWeb(host) ? 'medium' : 'large',
         cssClass: isNativeMobile() ? '' : 'swiper-no-swiping',
         handler: () => previewHandler()
       });
     }
     buttons.push({
       text: translate('SUBMIT'),
-      size: isWeb() ? 'medium' : 'large',
+      size: isWeb(host) ? 'medium' : 'large',
       color: 'app-color',
       handler: (ev) => submitHandler(ev)
     });
   }
   else {
     const startText = isPreview ? 'STARTPREVIEWING' : 'START';
-    const buttonText = isWeb() ? 'YOOBICNEXT' : startText;
+    const buttonText = isWeb(host) ? 'YOOBICNEXT' : startText;
     buttons.push({
       text: translate(buttonText),
       color: 'app-color',
-      size: isWeb() ? 'medium' : 'large',
+      size: isWeb(host) ? 'medium' : 'large',
       handler: () => startHandler()
     });
   }

package/dist/collection/components/form/form-footer/form-footer.css

@@ -209,6 +209,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container {
   z-index: 2;
+  padding-bottom: var(--safe-area-inset-bottom);
   background-color: var(--light, #ffffff);
 }
 :host .outer-container yoo-copyright {
@@ -262,10 +263,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   left: 0;
 }
 
-:host(.iphone-x) .outer-container {
-  padding-bottom: 20px;
-}
-
 :host(.no-gradient) .mission-footer {
   height: 3.125rem;
 }

package/dist/collection/components/form/form-image-collection/form-image-collection.css

@@ -282,6 +282,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host([detailed-view]) {
+  overflow: auto;
   background: transparent !important;
 }
 

package/dist/collection/components/form/form-signature-pad-dialog/form-signature-pad-dialog.css

@@ -202,6 +202,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host {
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 :host .signature-pad-dialog {

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.css

@@ -310,9 +310,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   line-height: 1.13;
 }
 :host .outer-container .columns-container .form-dynamic-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
   flex-direction: column;
-  height: calc(100% - 2rem);
 }
 :host .outer-container .columns-container .form-dynamic-container .slot-container {
   position: relative;
@@ -359,22 +363,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   cursor: pointer;
 }
 
-:host(.iphone-x) .form-dynamic-container {
-  position: absolute;
-  top: 2rem;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-:host(:not(.iphone-x)) .form-dynamic-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
 :host(.panel) .outer-container {
   display: flex;
   flex-direction: column;

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.js

@@ -94,7 +94,7 @@ export class YooFormCreatorLivePreviewComponent {
   }
   render() {
     var _a;
-    return (h(Host, { class: { panel: this.mode === 'panel', 'iphone-x': this.selectedDevice.device === 'iphone-x', ...getAppContext(this.host) } },
+    return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } },
       h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
         !this.hideHeading && h("div", { class: "heading" },
           this.mode === 'fullscreen' && this.renderFullscreenHeader(),

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) {
@@ -1410,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

@@ -583,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;
@@ -3312,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%;
 }
 
@@ -3403,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));
@@ -3818,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 {
@@ -3865,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);
 }

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

@@ -770,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({
@@ -1395,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);
@@ -2372,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'),
@@ -2629,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) {
@@ -2662,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: {
@@ -7970,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-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;