@yoobic/yobi 8.2.0-0 → 8.2.0-11

package/dist/collection/components/entities/card-list/color/card-list-color.css

@@ -205,6 +205,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --title-padding-top: 0;
   --title-margin-bottom: var(--spacing-16, 1rem);
   --card-border-radius: var(--border-radius-08, 0.5rem);
+  --align-items: normal;
+  --flex-direction: row;
   display: block;
 }
 :host p {
@@ -248,7 +250,10 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .heading-container {
   display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: var(--align-items);
   font-weight: bold;
+  background: var(--test-color);
 }
 :host .outer-container .heading-container .icon-left {
   margin-right: var(--spacing-08, 0.5rem);
@@ -262,6 +267,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .heading-container .icon-right yoo-icon:not([color]) {
   fill: inherit;
 }
+:host .outer-container .heading-container .icon-middle yoo-icon:not([color]) {
+  fill: inherit;
+}
 :host .outer-container .heading-container .heading {
   flex: 1;
   overflow: hidden;
@@ -357,11 +365,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.horizontal[size=small]) .outer-container .heading-container {
   font-weight: normal;
   font-size: var(--font-size-14, 0.875rem);
+  background: var(--test-color);
 }
 
 :host(.horizontal[size=medium]) .outer-container .heading-container {
   font-weight: normal;
   font-size: var(--font-size-16, 1rem);
+  background: var(--test-color);
 }
 
 :host(:not(.horizontal)) .outer-container {
@@ -384,6 +394,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(.dashboards) .outer-container .heading-container,
 :host(.missiondescriptions) .outer-container .heading-container {
   font-weight: normal;
+  background: var(--test-color);
 }
 :host(.dashboards) .outer-container .heading-container .heading,
 :host(.missiondescriptions) .outer-container .heading-container .heading {
@@ -410,6 +421,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--spacing-08, 0.5rem);
+  background: var(--test-color);
 }
 :host(.dashboards.cell) .outer-container .heading-container .heading,
 :host(.missiondescriptions.cell) .outer-container .heading-container .heading {
@@ -421,10 +433,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   grid-row: 1;
   grid-column: 2;
 }
-:host(.dashboards.cell) .outer-container .heading-container .icon-left,
-:host(.dashboards.cell) .outer-container .heading-container .icon-right,
-:host(.missiondescriptions.cell) .outer-container .heading-container .icon-left,
-:host(.missiondescriptions.cell) .outer-container .heading-container .icon-right {
+:host(.dashboards.cell) .outer-container .heading-container [class^=icon],
+:host(.missiondescriptions.cell) .outer-container .heading-container [class^=icon] {
   margin: 0;
 }
 
@@ -490,9 +500,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 
-:host(.missiondescriptiontemplates) .outer-container .heading-container {
-  flex-direction: column;
-}
 :host(.missiondescriptiontemplates) .outer-container .heading-container .heading {
   white-space: normal;
 }

package/dist/collection/components/entities/card-list/color/card-list-color.js

@@ -1,5 +1,6 @@
 import { isWeb, translate, translateMulti } from '@shared/utils';
 import { Component, Element, h, Prop } from '@stencil/core';
+import { isFinite } from 'lodash-es';
 export class YooCardListColorComponent {
   constructor() {
     this.notif = false;
@@ -7,33 +8,42 @@ export class YooCardListColorComponent {
   }
   renderHeader() {
     var _a, _b, _c, _d;
+    const { iconTopMiddle, iconTopMiddleColor, iconTopRight, iconTopRightColor, iconTopLeft, iconTopLeftColor, color, heading } = this.entry;
     const bigIcon = ((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('campaigntypes')) || ((_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('missiondescriptiontemplates'));
-    return (h("div", { class: "heading-container", style: { fill: this.entry.color } },
-      !!this.entry.iconTopLeft && (h("div", { class: "icon-left" },
-        h("yoo-icon", { size: bigIcon ? 'large' : 'medium', name: this.entry.iconTopLeft, color: this.entry.iconTopLeftColor }),
+    return (h("div", { class: "heading-container", style: { '--align-items': iconTopMiddle ? 'center' : 'normal', '--flex-direction': iconTopMiddle ? 'column-reverse' : 'row', fill: color } },
+      !!iconTopLeft && (h("div", { class: "icon-left" },
+        h("yoo-icon", { size: bigIcon ? 'large' : 'medium', name: iconTopLeft, color: iconTopLeftColor }),
         this.notif && h("yoo-badge", { shape: "dot" }))),
-      h("div", { class: "heading", innerHTML: translateMulti(this.entry.heading || '') }),
-      !!this.entry.iconTopRight && (h("div", { class: "icon-right" },
-        h("yoo-icon", { size: "medium", name: this.entry.iconTopRight, color: this.entry.iconTopRightColor }),
+      h("div", { class: "heading", innerHTML: translateMulti(heading || '') }),
+      !!iconTopRight && (h("div", { class: "icon-right" },
+        h("yoo-icon", { size: "medium", name: iconTopRight, color: iconTopRightColor }),
+        this.notif && h("yoo-badge", { shape: "dot" }))),
+      !!iconTopMiddle && (h("div", { class: "icon-middle" },
+        h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor }),
         this.notif && h("yoo-badge", { shape: "dot" })))));
   }
   renderSubHeader() {
-    return (this.entry.subHeading && (h("p", { class: { 'subheading-container': true, 'multi-truncated': !this.entry.subHeadingDescription }, innerHTML: translateMulti(this.entry.subHeading) })));
+    const { subHeading, subHeadingDescription } = this.entry;
+    return subHeading && h("p", { class: { 'subheading-container': true, 'multi-truncated': !subHeadingDescription }, innerHTML: translateMulti(subHeading) });
   }
   renderSubHeaderDescription() {
-    return (this.entry.subHeadingDescription && (h("p", { class: { 'subheading-container-description': true, 'multi-truncated': !this.entry.subHeading }, innerHTML: translateMulti(this.entry.subHeadingDescription) })));
+    const { subHeading, subHeadingDescription } = this.entry;
+    return subHeadingDescription && h("p", { class: { 'subheading-container-description': true, 'multi-truncated': !subHeading }, innerHTML: translateMulti(subHeadingDescription) });
   }
   renderProgress() {
-    return (this.entry.progress > 0 && (h("div", { class: "progress-container" },
-      h("yoo-progress-bar", { value: this.entry.progress || 0 }))));
+    const { progress } = this.entry;
+    return (isFinite(progress) &&
+      progress >= 0 && (h("div", { class: "progress-container" },
+      h("yoo-progress-bar", { value: progress || 0 }))));
   }
   renderTags() {
-    var _a, _b;
-    return (((_a = this.entry.tagElements) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "tags-container" }, (_b = this.entry.tagElements) === null || _b === void 0 ? void 0 : _b.map((tag) => (h("yoo-tag", { color: tag.color || 'stable', icon: tag.icon, innerHTML: tag.innerHTML, closable: tag.closable, size: tag.size, noBackground: tag.noBackground, customColor: tag.customColor }))))));
+    const { tagElements } = this.entry;
+    return ((tagElements === null || tagElements === void 0 ? void 0 : tagElements.length) > 0 && (h("div", { class: "tags-container" }, tagElements.map((tag) => (h("yoo-tag", { color: tag.color || 'stable', icon: tag.icon, innerHTML: tag.innerHTML, closable: tag.closable, size: tag.size, noBackground: tag.noBackground, customColor: tag.customColor }))))));
   }
   renderImage() {
-    return this.entry.imgSrc && h("div", { class: "image-container" },
-      h("yoo-img", { src: this.entry.imgSrc }));
+    const { imgSrc } = this.entry;
+    return (imgSrc && (h("div", { class: "image-container" },
+      h("yoo-img", { src: imgSrc }))));
   }
   render() {
     var _a;

package/dist/collection/components/entities/card-list/default/card-list.js

@@ -2,7 +2,7 @@ import { Cloudinary, downloadFile, getSession, isCloudinaryLink, isFieldWithNoVa
 import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 import { compact, isEmpty, isNumber, isString } from 'lodash-es';
 import { toggleElementTapped } from '../../../../utils/helpers/card-list-helpers';
-import { execHandlerAndStopEvent, getAppContext, showPhotoEditor } from '../../../../utils/helpers/common-helpers';
+import { execHandlerAndStopEvent, getAppContext, removeHtmlFromString, showPhotoEditor } from '../../../../utils/helpers/common-helpers';
 const MAX_AVATAR_DISPLAY = 3;
 export class YooCardListComponent {
   constructor() {
@@ -65,6 +65,10 @@ export class YooCardListComponent {
   getHeading() {
     var _a;
     const renderUserHeading = this.isQuestionCardList() && ((_a = this.entry.users) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    if (this.host.classList.contains('feeds')) {
+      this.entry.heading = this.entry.heading.replace(/(<img([^>]+)>)/ig, ` ${translate('IMAGE')} `);
+      this.entry.heading = removeHtmlFromString(this.entry.heading);
+    }
     return renderUserHeading ? `${this.entry.users[0].firstName} ${this.entry.users[0].lastName}` : this.entry.heading;
   }
   renderBottomContent() {
@@ -212,18 +216,19 @@ export class YooCardListComponent {
       h("div", { class: "translation-button", onClick: (ev) => this.onTranslateToggle(ev) }, this.showTranslatedText ? h("span", null, translate('HIDETRANSLATION')) : translate('SEETRANSLATION'))));
   }
   renderHeadingContainerContent() {
-    var _a;
+    var _a, _b, _c;
     return [
       h("div", { class: "heading-container" },
-        this.renderTags(this.entry.tagElementsInHeader, 'margin-right'),
+        ((_a = this.entry.tagElementsInHeader) === null || _a === void 0 ? void 0 : _a.location) === 'start' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right'),
         this.entry.heading ? this.renderHeading() : null,
         this.hasUsersInline() ? this.renderInlineUsers() : null,
         !this.entry.showDateAsTag && this.entry.date && !this.isQuestionCardList() && h("div", { class: "date-card-text" }, this.entry.date),
         isNumber(this.entry.points) && this.renderPointsContainerContent(),
         this.entry.rightAction && (h("yoo-button", { color: "app-color", fill: "transparent", rippleType: "unbounded", onClick: (ev) => execHandlerAndStopEvent(ev, this.entry.rightAction.handler) }, this.entry.rightAction.text)),
         this.entry.distance ? this.renderDistance() : null,
-        this.entry.progress || this.entry.progress === 0 ? this.renderProgress() : null),
-      ((_a = this.entry.topActions) === null || _a === void 0 ? void 0 : _a.length) ? this.renderTopActions() : null,
+        this.entry.progress || this.entry.progress === 0 ? this.renderProgress() : null,
+        ((_b = this.entry.tagElementsInHeader) === null || _b === void 0 ? void 0 : _b.location) === 'end' && this.renderTags(this.entry.tagElementsInHeader.tags, 'margin-right')),
+      ((_c = this.entry.topActions) === null || _c === void 0 ? void 0 : _c.length) ? this.renderTopActions() : null,
       this.renderSubheadings(),
       this.isRenderBadgeOutside && this.entry.translationCallback && this.renderTranslation(),
       this.hasHeadingBottomContent() && !this.isQuestionCardList() && !this.isRenderBadgeOutside && this.renderHeadingContainerBottom()

package/dist/collection/components/entities/card-placeholder/card-placeholder.js

@@ -345,7 +345,7 @@ export class YooCardPlaceholderComponent {
       "mutable": false,
       "complexType": {
         "original": "EntityType",
-        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
+        "resolved": "\"aisles\" | \"community\" | \"courses\" | \"dashboards\" | \"operations\" | \"pages\" | \"questions\" | \"scoring\" | \"tableau\" | \"tag\" | \"user\" | \"weekdays\" | \"campaignfilters\" | \"channel\" | \"communities\" | \"custommodels\" | \"geofilters\" | \"hierarchy\" | \"incentives\" | \"locationtypes\" | \"plans\" | \"translations\" | \"aclRole\" | \"blog\" | \"emails\" | \"feeds\" | \"files\" | \"groups\" | \"htmltemplates\" | \"lessons\" | \"locations\" | \"memos\" | \"missiondescriptions\" | \"missiondescriptiontemplates\" | \"missions\" | \"productbatch\" | \"products\" | \"tenants\" | \"userranks\" | \"users\" | \"type\" | \"aclPermission\" | \"aclPermissionList\" | \"aislelist\" | \"algorithm\" | \"apps\" | \"arexperience\" | \"armodel\" | \"badges\" | \"broadcasts\" | \"calendarEvents\" | \"campaigntypes\" | \"catalogs\" | \"certificates\" | \"channels\" | \"charttype\" | \"contacts\" | \"coursecategories\" | \"courses-small\" | \"courseselection\" | \"currencies\" | \"customapps\" | \"customforms\" | \"days\" | \"entitycomments\" | \"environnement\" | \"feedsComments\" | \"filesFolders\" | \"folders\" | \"formfield\" | \"giphy\" | \"googlemaps\" | \"hashtags\" | \"icons\" | \"language\" | \"lessondescriptions\" | \"liveshoppings\" | \"locationspublic\" | \"markas\" | \"mediacapturedevices\" | \"memolist\" | \"missiondatas\" | \"missiondescriptioncategories\" | \"missionfield\" | \"notes\" | \"notifications\" | \"photos\" | \"productbatchlist\" | \"productweightpair\" | \"publicAPITokens\" | \"questionsAnswers\" | \"regex\" | \"reporttemplates\" | \"reviewapps\" | \"salesdata\" | \"scorms\" | \"scormcloud\" | \"slots\" | \"tableauShared\" | \"tagGroups\" | \"topusers\" | \"unsplash\" | \"userlearningmanager\" | \"usercourseinfo\" | \"violetproducts\" | \"violetproductofferskus\" | \"violetbasketitems\" | \"violetshippingmethods\" | \"version\" | \"videocallusers\" | \"visits\" | \"waitlistvisit\" | \"waitlistcustomer\" | \"waitliststats\" | \"plansorlessons\" | \"widgets\"",
         "references": {
           "EntityType": {
             "location": "import",

package/dist/collection/components/entities/card-sticky/card-sticky.css

@@ -206,11 +206,24 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --feed-card-max-height: 230px;
   cursor: pointer;
 }
+:host yoo-tag {
+  --padding: 0 var(--spacing-04, 0.25rem) 0 var(--spacing-04, 0.25rem);
+  color: var(--text-color);
+}
 :host yoo-tag.top.left {
   position: absolute;
-  top: var(--spacing-08, 0.5rem);
-  left: var(--spacing-08, 0.5rem);
+  top: var(--spacing-16, 1rem);
+  left: var(--spacing-16, 1rem);
   z-index: 9;
+  border-radius: var(--border-radius-04, 0.25rem);
+}
+:host yoo-icon {
+  width: var(--spacing-16, 1rem);
+  height: var(--spacing-16, 1rem);
+}
+:host yoo-icon[name=bookmark] {
+  right: var(--spacing-16, 1rem);
+  background-color: var(--light-20, rgba(255, 255, 255, 0.2));
 }
 :host .outer-container {
   position: relative;
@@ -233,8 +246,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   position: absolute;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, var(--light, #ffffff), var(--light, #ffffff) 40%, rgba(255, 255, 255, 0));
-  border-radius: 0.25rem;
+  background: linear-gradient(90deg, var(--light, #ffffff), var(--light, #ffffff) 40%, var(--dark-10, rgba(0, 0, 0, 0.1)));
+  border-radius: var(--border-radius-04, 0.25rem);
 }
 :host .outer-container .gradient-container .text-container {
   display: flex;
@@ -468,34 +481,49 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-left: auto;
 }
 :host .outer-container.courses, :host .outer-container.plans, :host .outer-container.courses-small {
+  --text-color: var(--light, #ffffff);
   display: flex;
   flex-direction: column;
   box-shadow: var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));
 }
 :host .outer-container.courses yoo-img, :host .outer-container.plans yoo-img, :host .outer-container.courses-small yoo-img {
+  position: relative;
   width: 100%;
   height: 100%;
+  border-radius: var(--border-radius-08, 0.5rem);
 }
 :host .outer-container.courses yoo-img yoo-icon, :host .outer-container.plans yoo-img yoo-icon, :host .outer-container.courses-small yoo-img yoo-icon {
   position: absolute;
-  top: var(--spacing-08, 0.5rem);
-  right: var(--spacing-08, 0.5rem);
+  top: var(--spacing-16, 1rem);
   z-index: 1;
-  padding: 0.5rem;
-  background: var(--stable-alt-60, rgba(208, 208, 208, 0.6));
+  padding: var(--spacing-04, 0.25rem);
   border: none;
-  border-radius: 50%;
-  fill: var(--app-color, #5a30f4);
+  border-radius: var(--border-radius-24, 1.5rem);
+}
+:host .outer-container.courses yoo-img::after, :host .outer-container.plans yoo-img::after, :host .outer-container.courses-small yoo-img::after {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 14%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.5) 85%, black 100%);
+  background-blend-mode: multiply;
+  border-radius: var(--border-radius-08, 0.5rem);
+  content: "";
+}
+:host .outer-container.courses .tags-container, :host .outer-container.plans .tags-container, :host .outer-container.courses-small .tags-container {
+  margin-bottom: -0.2rem;
+  padding: 0 0 0 var(--spacing-16, 1rem);
 }
 :host .outer-container.courses .bottom-container, :host .outer-container.plans .bottom-container, :host .outer-container.courses-small .bottom-container {
   position: absolute;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   background-color: var(--dark-40, rgba(0, 0, 0, 0.4));
+  border-radius: var(--border-radius-08, 0.5rem);
   /* Track */
   /* Handle */
 }
@@ -518,27 +546,58 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   background: var(--stable, #adadad);
 }
 :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper, :host .outer-container.courses-small .bottom-container .text-wrapper {
+  overflow: hidden;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
   overflow-y: hidden;
   color: var(--light, #ffffff);
   font-weight: var(--font-weight-700, 700);
 }
+@supports (display: -webkit-box) {
+  :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper, :host .outer-container.courses-small .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
 :host .outer-container.courses .bottom-container .subheading, :host .outer-container.plans .bottom-container .subheading, :host .outer-container.courses-small .bottom-container .subheading {
   color: transparent;
 }
 :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper {
+  overflow: hidden;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   max-width: 90%;
-  margin: auto;
-  font-size: var(--font-size-24, 1.5rem);
-  text-align: center;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
+  font-size: var(--font-size-18, 1.125rem);
+  text-align: left;
+}
+@supports (display: -webkit-box) {
+  :host .outer-container.courses .bottom-container .text-wrapper, :host .outer-container.plans .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }
 :host .outer-container.courses-small {
   width: 133px;
   height: 90px;
 }
 :host .outer-container.courses-small .bottom-container .text-wrapper {
+  overflow: hidden;
+  flex-direction: column-reverse;
+  justify-content: flex-start;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
   font-size: var(--font-size-18, 1.125rem);
   line-height: var(--font-size-18, 1.125rem);
 }
+@supports (display: -webkit-box) {
+  :host .outer-container.courses-small .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
 
 @media only screen and (max-width: 320px) {
   :host .outer-container.feeds {
@@ -648,5 +707,33 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 
 :host(.courses.horizontal:not(.web)) .outer-container.courses .bottom-container .text-wrapper {
+  overflow: hidden;
+  margin: 0 0 var(--spacing-16, 1rem) var(--spacing-16, 1rem);
   font-size: var(--font-size-16, 1rem);
+}
+@supports (display: -webkit-box) {
+  :host(.courses.horizontal:not(.web)) .outer-container.courses .bottom-container .text-wrapper {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+
+:host([bookmarked]) yoo-icon[name=bookmark] {
+  right: var(--spacing-16, 1rem);
+  background-color: var(--app-color-10, rgba(90, 48, 244, 0.1));
+}
+
+:host([ticked]) yoo-icon[name=tick] {
+  right: var(--spacing-48, 3rem);
+  background-color: var(--success-10, rgba(58, 167, 109, 0.1));
+}
+
+:host([ongoing]) yoo-icon[name=ongoing] {
+  right: var(--spacing-48, 3rem);
+  background-color: var(--info-20, rgba(216, 76, 150, 0.2));
+}
+
+:host([locked]) yoo-icon[name=lock] {
+  right: var(--spacing-16, 1rem);
 }

package/dist/collection/components/entities/card-sticky/card-sticky.js

@@ -32,17 +32,22 @@ export class YooCardStickyComponent {
     const isPlan = this.type === 'plans';
     const standardWidth = isCourse ? 190 : isPlan ? 239 : 310;
     const standardHeight = isCourse ? 130 : isPlan ? 180 : 230;
-    this.imageWidth = isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * .8;
-    this.imageHeight = isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * .75;
+    this.imageWidth = isWeb(this.host) || isCourse ? standardWidth : window.innerWidth * 0.8;
+    this.imageHeight = isWeb(this.host) || isCourse ? standardHeight : this.imageWidth * 0.75;
     return { width: `${this.imageWidth}px`, height: `${this.imageHeight}px` };
   }
+  renderIcons() {
+    const { isLocked, isBookmarked, isOngoing, isTicked } = this.entry;
+    return [
+      isLocked && h("yoo-icon", { class: "isLocked", name: "lock", size: "small" }),
+      !isLocked && h("yoo-icon", { name: "bookmark", size: "small", color: isBookmarked ? 'app-color' : 'stable-alt' }),
+      !isLocked && isOngoing && h("yoo-icon", { class: "ongoing", name: "ongoing", size: "small", color: "info" }),
+      !isLocked && isTicked && h("yoo-icon", { class: "tick", name: "tick", size: "small", color: "success" })
+    ];
+  }
   renderMediaBadges(badges, size, headerView) {
     return badges.map((badge) => {
-      return (badge.iconOnlyInHeaderView && headerView ? h("yoo-icon", { size: size === 'extra-small' ? 'small' : size, name: badge.icon, color: badge.color, class: "header" }) :
-        h("yoo-tag", { class: !headerView ? badge.position : null, size: size, icon: headerView ? badge.icon : null, color: badge.color }, !headerView && [
-          h("yoo-icon", { slot: "start", size: "small", color: "light", name: badge.icon }),
-          badge.text
-        ]));
+      return badge.iconOnlyInHeaderView && headerView ? (h("yoo-icon", { size: size === 'extra-small' ? 'small' : size, name: badge.icon, color: badge.color, class: "header" })) : (h("yoo-tag", { class: !headerView ? badge.position : null, size: size, icon: headerView ? badge.icon : null, color: badge.color }, !headerView && [h("yoo-icon", { slot: "start", size: "small", color: "light", name: badge.icon }), badge.text]));
     });
   }
   renderNewsfeedCard() {
@@ -52,29 +57,39 @@ export class YooCardStickyComponent {
     const isFullWidth = this.host.classList.contains('full-width');
     const showMainViewBadge = hasMediaBadges && (isFullWidth || !isWeb(this.host));
     const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !isWeb(this.host));
-    return (h("div", { class: `outer-container  ${this.type} ${isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => { this.onOuterContainerClick(ev); } },
+    return (h("div", { class: `outer-container  ${this.type} ${isGif((_e = this.entry) === null || _e === void 0 ? void 0 : _e.imgSrc) ? 'gif' : ''}`, onClick: (ev) => {
+        this.onOuterContainerClick(ev);
+      } },
       showMainViewBadge && this.renderMediaBadges(this.entry.mediaBadges),
       h("yoo-img", { instant: true, type: "background", class: { 'image-container': true, 'no-radius': isWeb(this.host) }, src: this.entry.imgSrc }),
       h("div", { class: "bottom-container" },
         h("yoo-truncate", { class: "text-wrapper", innerHTML: removeTextStyle((_f = this.entry) === null || _f === void 0 ? void 0 : _f.title) }),
         this.entry.subheadings && this.entry.subheadings[0] && (h("div", { class: "subheading" },
-          this.entry.user && h("yoo-avatar", { onClick: (ev) => { this.onUserClicked(ev); }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: (isWeb(this.host) ? 'extra-small' : 'small'), user: this.entry.user }),
+          this.entry.user && (h("yoo-avatar", { onClick: (ev) => {
+              this.onUserClicked(ev);
+            }, iconSize: (_g = this.entry) === null || _g === void 0 ? void 0 : _g.avatarIconSize, size: isWeb(this.host) ? 'extra-small' : 'small', user: this.entry.user })),
           this.entry.postedBy && h("span", null,
             `${this.entry.postedBy} • ${this.entry.subheadings[0]}`,
             " "),
           showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'extra-small', true),
-          hasActions && !isWeb(this.host) && h("yoo-icon", { name: "more", color: "stable", size: ((_h = this.entry) === null || _h === void 0 ? void 0 : _h.actionIconSize) || 'small', onClick: (ev) => this.onMoreClicked(ev) }),
-          hasActions && isWeb(this.host) && h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() },
-            h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' })))))));
+          hasActions && !isWeb(this.host) && (h("yoo-icon", { name: "more", color: "stable", size: ((_h = this.entry) === null || _h === void 0 ? void 0 : _h.actionIconSize) || 'small', onClick: (ev) => this.onMoreClicked(ev) })),
+          hasActions && isWeb(this.host) && (h("yoo-context-menu", { contentButtons: this.entry.secondaryActionSheet, onClick: (ev) => ev.stopPropagation() },
+            h("yoo-icon", { color: "stable", name: "more", size: ((_j = this.entry) === null || _j === void 0 ? void 0 : _j.actionIconSize) || 'small' }))))))));
   }
   renderCoursesCard() {
-    return (h("div", { class: `outer-container  ${this.type}`, style: this.getCardSize() },
-      h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc },
-        this.entry.isLocked && h("yoo-icon", { name: "lock", size: "small" }),
-        this.entry.isBookmarked && h("yoo-icon", { name: "bookmark", size: "small" })),
+    var _a, _b;
+    const hasMediaBadges = ((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.mediaBadges) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    const isFullWidth = this.host.classList.contains('full-width');
+    const showHeaderViewBadge = hasMediaBadges && !(isFullWidth || !isWeb(this.host));
+    return (h("div", { class: { 'outer-container': true, [this.type]: true, ticked: this.entry.isTicked }, style: this.getCardSize() },
+      h("yoo-img", { instant: true, type: "background", class: "image-container", disabled: this.entry.isLocked, src: this.entry.imgSrc }, this.renderIcons()),
       h("div", { class: "bottom-container" },
+        h("div", { class: "tags-container" }, showHeaderViewBadge && this.renderMediaBadges(this.entry.mediaBadges, 'small')),
         h("div", { class: "text-wrapper" }, removeTextStyle(this.title)),
-        this.entry.subheadings && this.entry.subheadings[0] && h("div", { class: "subheading" }, this.entry.subheadings[0]))));
+        this.entry.subheadings && this.entry.subheadings[0] && h("div", { class: "subheading" }, this.entry.subheadings[0]),
+        h("div", { class: "subheading" }, this.entry.postedBy && h("span", null,
+          `${this.entry.postedBy} • ${this.entry.subheadings[0]}`,
+          " ")))));
   }
   renderBase() {
     return (h("div", { class: "outer-container image" },
@@ -84,7 +99,7 @@ export class YooCardStickyComponent {
             h("span", null, this.entry.category))),
           this.title && (h("div", { class: "title" },
             h("span", null, this.title))),
-          this.entry.buttonText && h("yoo-button", { color: "app-color", size: "small", onClick: () => (this.entry.handler ? this.entry.handler() : {}) }, this.entry.buttonText))),
+          this.entry.buttonText && (h("yoo-button", { color: "app-color", size: "small", onClick: () => { var _a, _b; return (_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.handler) === null || _b === void 0 ? void 0 : _b.call(_a); } }, this.entry.buttonText)))),
       h("yoo-img", { instant: true, type: "background", class: "image-container", src: this.entry.imgSrc })));
   }
   renderBasedOnType() {
@@ -100,7 +115,7 @@ export class YooCardStickyComponent {
     }
   }
   render() {
-    return h(Host, { class: { web: isWeb(this.host), ...getAppContext(this.host) } }, this.entry && this.renderBasedOnType());
+    return (this.entry && (h(Host, { ...{ locked: this.entry.isLocked, bookmarked: this.entry.isBookmarked, ticked: this.entry.isTicked, ongoing: this.entry.isOngoing }, class: { ...getAppContext(this.host) } }, this.renderBasedOnType())));
   }
   static get is() { return "yoo-card-sticky"; }
   static get encapsulation() { return "shadow"; }
@@ -125,7 +140,7 @@ export class YooCardStickyComponent {
         }
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
@@ -135,9 +150,14 @@ export class YooCardStickyComponent {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "TCardStickyType",
+        "resolved": "\"courses\" | \"courses-small\" | \"feeds\" | \"plans\"",
+        "references": {
+          "TCardStickyType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
       },
       "required": false,
       "optional": true,