@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-card-avatar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const tag_factory = require('./tag.factory-a7a2d2c1.js');
+const index = require('./index-e182c32d.js');
+const tag_factory = require('./tag.factory-25f910c0.js');
 
 const cardAvatarCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;overflow:hidden}:host ::slotted(*){position:absolute}:host yoo-tag{--padding:0;width:100%;font-size:var(--font-size-12, 0.75rem)}:host .heading{margin-top:var(--spacing-04, 0.25rem)}";
 

package/dist/cjs/yoo-card-avatars.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const tag_factory = require('./tag.factory-a7a2d2c1.js');
+const index = require('./index-e182c32d.js');
+const tag_factory = require('./tag.factory-25f910c0.js');
 
 const cardAvatarsCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;overflow:hidden}:host ::slotted(*){position:absolute}:host yoo-tag{--padding:0;width:100%;font-size:var(--font-size-12, 0.75rem)}:host .heading{margin-top:var(--spacing-04, 0.25rem)}";
 

package/dist/cjs/yoo-card-battle-result.cjs.entry.js

@@ -2,16 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardBattleResultCss = ":host{display:grid;grid-template-columns:3rem 1fr 3rem;-ms-flex-align:center;align-items:center}:host p{margin:0}:host yoo-truncate{--line-height:1;width:100%;padding-top:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);text-align:center}:host .score{font-weight:bold;text-align:center}:host .score .lost{color:var(--danger, #d44333)}:host .score .won{color:var(--success, #3aa76d)}:host .score .result{line-height:1}";
 
 const Participant = ({ instant, label, user }) => (index.h("div", { class: "participant" }, index.h("yoo-avatar", { instant: instant, user: user }), label && index.h("yoo-truncate", null, label)));
-const Score = ({ opponent, status, user }) => (index.h("div", { class: "score" }, ['lost', 'won'].includes(status) && index.h("p", { class: status }, index$1.translate(status === 'won' ? 'VICTORY' : 'DEFEAT')), index.h("p", { class: "result" }, user > 0 ? user : 0, " - ", opponent > 0 ? opponent : 0)));
+const Score = ({ opponent, status, user }) => (index.h("div", { class: "score" }, ['lost', 'won'].includes(status) && index.h("p", { class: status }, overlays.translate(status === 'won' ? 'VICTORY' : 'DEFEAT')), index.h("p", { class: "result" }, user > 0 ? user : 0, " - ", opponent > 0 ? opponent : 0)));
 const YooCardBattleResultComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -21,7 +22,7 @@ const YooCardBattleResultComponent = class {
     this.instant = false;
   }
   render() {
-    return (index.h(index.Host, null, index.h(Participant, { instant: this.instant, label: this.user && index$1.translate('YOOBICME'), user: this.user }), index.h(Score, { opponent: this.opponentScore, status: this.status, user: this.userScore }), index.h(Participant, { instant: this.instant, label: this.opponent && (this.opponent.firstName || this.opponent.lastName || this.opponent.username), user: this.opponent })));
+    return (index.h(index.Host, null, index.h(Participant, { instant: this.instant, label: this.user && overlays.translate('YOOBICME'), user: this.user }), index.h(Score, { opponent: this.opponentScore, status: this.status, user: this.userScore }), index.h(Participant, { instant: this.instant, label: this.opponent && (this.opponent.firstName || this.opponent.lastName || this.opponent.username), user: this.opponent })));
   }
 };
 YooCardBattleResultComponent.style = cardBattleResultCss;

package/dist/cjs/yoo-card-battle.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardBattleCss = ":host{display:grid;grid-gap:var(--spacing-08, 0.5rem);color:var(--text-color, #807f83)}:host header{display:grid;grid-auto-flow:column;-ms-flex-pack:justify;justify-content:space-between;height:1.5rem;color:var(--dark, #000000)}:host main yoo-icon{fill:var(--text-color, #807f83)}:host footer{display:grid;grid-auto-columns:-webkit-max-content;grid-auto-columns:max-content;grid-auto-flow:column;grid-gap:var(--spacing-08, 0.5rem)}:host .info{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .info yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host([mode=compact]) main,:host([mode=compact]) footer{font-size:var(--font-size-12, 0.75rem)}:host([mode=compact]) header{grid-gap:var(--spacing-04, 0.25rem)}:host([mode=compact]) yoo-avatar{justify-self:center}:host([mode=large]),:host(:not([mode])){grid-template-columns:auto minmax(0, 1fr)}:host([mode=large]) header,:host(:not([mode])) header{grid-gap:var(--spacing-16, 1rem)}:host(.no-answers) footer{display:none}:host(.no-course) main .info{display:none}:host(.no-email) .email{display:none}:host(.no-points) yoo-tag{display:none}";
 
@@ -32,7 +33,7 @@ const YooCardBattleComponent = class {
     const correctAnswers = this.correctAnswers > 0 ? this.correctAnswers : 0;
     const incorrectAnswers = this.incorrectAnswers > 0 ? this.incorrectAnswers : 0;
     const iconSize = this.mode === 'large' ? 'small' : 'extra-small';
-    return (index.h(index.Host, null, index.h("yoo-avatar", { instant: this.instant, user: this.opponent }), index.h("div", null, index.h("header", null, index.h("yoo-truncate", null, index$1.getUserDisplayName(this.opponent)), this.points > 0 && index.h(Points, { iconSize: iconSize, value: this.points })), index.h("main", null, !!email && index.h("yoo-truncate", { class: "email" }, email), !!this.course && index.h(Info, { icon: { name: 'lesson', size: iconSize }, text: index$1.translateMulti(this.course) })), index.h("footer", null, index.h(Info, { icon: { color: 'success', name: 'check', size: iconSize }, text: `${correctAnswers} ${index$1.translate('CORRECT')}` }), index.h(Info, { icon: { color: 'danger', name: 'cross', size: iconSize }, text: `${incorrectAnswers} ${index$1.translate('INCORRECT')}` })))));
+    return (index.h(index.Host, null, index.h("yoo-avatar", { instant: this.instant, user: this.opponent }), index.h("div", null, index.h("header", null, index.h("yoo-truncate", null, overlays.getUserDisplayName(this.opponent)), this.points > 0 && index.h(Points, { iconSize: iconSize, value: this.points })), index.h("main", null, !!email && index.h("yoo-truncate", { class: "email" }, email), !!this.course && index.h(Info, { icon: { name: 'lesson', size: iconSize }, text: overlays.translateMulti(this.course) })), index.h("footer", null, index.h(Info, { icon: { color: 'success', name: 'check', size: iconSize }, text: `${correctAnswers} ${overlays.translate('CORRECT')}` }), index.h(Info, { icon: { color: 'danger', name: 'cross', size: iconSize }, text: `${incorrectAnswers} ${overlays.translate('INCORRECT')}` })))));
   }
 };
 YooCardBattleComponent.style = cardBattleCss;

package/dist/cjs/yoo-card-calendar.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardCalendarCss = ":host([color=accent]){background-color:var(--accent, #276ef1)}:host([color=accent]) .heading,:host([color=accent]) .description{color:var(--#ffffff)}:host([color=app-color]){background-color:var(--app-color, #5a30f4)}:host([color=app-color]) .heading,:host([color=app-color]) .description{color:var(--#ffffff)}:host([color=energized]){background-color:var(--energized, #ffc043)}:host([color=energized]) .heading,:host([color=energized]) .description{color:var(--#ffffff)}:host([color=info]){background-color:var(--info, #d84c96)}:host([color=info]) .heading,:host([color=info]) .description{color:var(--#ffffff)}:host([color=success]){background-color:var(--success, #3aa76d)}:host([color=success]) .heading,:host([color=success]) .description{color:var(--#ffffff)}:host([color=warning]){background-color:var(--warning, #ed6e33)}:host([color=warning]) .heading,:host([color=warning]) .description{color:var(--#ffffff)}:host([color=wood]){background-color:var(--wood, #99644c)}:host([color=wood]) .heading,:host([color=wood]) .description{color:var(--#ffffff)}:host([color=accent-10]){background-color:var(--accent-10, rgba(39, 110, 241, 0.1))}:host([color=accent-10]) .heading,:host([color=accent-10]) .description{color:var(--accent, #276ef1)}:host([color=app-color-10]){background-color:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host([color=app-color-10]) .heading,:host([color=app-color-10]) .description{color:var(--app-color, #5a30f4)}:host([color=energized-10]){background-color:var(--energized-10, rgba(255, 192, 67, 0.1))}:host([color=energized-10]) .heading,:host([color=energized-10]) .description{color:var(--energized, #ffc043)}:host([color=info-10]){background-color:var(--info-10, rgba(216, 76, 150, 0.1))}:host([color=info-10]) .heading,:host([color=info-10]) .description{color:var(--info, #d84c96)}:host([color=success-10]){background-color:var(--success-10, rgba(58, 167, 109, 0.1))}:host([color=success-10]) .heading,:host([color=success-10]) .description{color:var(--success, #3aa76d)}:host([color=warning-10]){background-color:var(--warning-10, rgba(237, 110, 51, 0.1))}:host([color=warning-10]) .heading,:host([color=warning-10]) .description{color:var(--warning, #ed6e33)}:host([color=wood-10]){background-color:var(--wood-10, rgba(153, 100, 76, 0.1))}:host([color=wood-10]) .heading,:host([color=wood-10]) .description{color:var(--wood, #99644c)}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:var(--spacing-56, 3.5rem);padding:0 var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host .description-container{display:-ms-flexbox;display:flex}:host .description-container .flex-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:var(--spacing-08, 0.5rem)}:host .description-container .flex-container yoo-truncate{--max-lines:1}:host .description-container .flex-container .icon{margin-right:var(--spacing-04, 0.25rem)}:host .description-container .flex-container .description{font-size:var(--font-size-12, 0.75rem)}:host .heading,:host .description{color:var(--light, #ffffff)}:host .heading{--max-lines:1;font-size:var(--font-size-14, 0.875rem)}:host(.web){min-width:8rem}";
 
@@ -16,17 +17,17 @@ const YooCardCalendarComponent = class {
     index.registerInstance(this, hostRef);
   }
   renderLocation() {
-    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: "pin", size: "small", color: index$1.getEventTypeColor(this.type) }), index.h("yoo-truncate", { class: "description" }, this.location)));
+    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: "pin", size: "small", color: overlays.getEventTypeColor(this.type) }), index.h("yoo-truncate", { class: "description" }, this.location)));
   }
   renderDueDate() {
-    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: "calendar", size: "small", color: index$1.getEventTypeColor(this.type) }), index.h("yoo-truncate", { class: "description" }, this.dueDate)));
+    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: "calendar", size: "small", color: overlays.getEventTypeColor(this.type) }), index.h("yoo-truncate", { class: "description" }, this.dueDate)));
   }
   renderCreator() {
-    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: "user", size: "small", color: index$1.getEventTypeColor(this.type) }), index.h("yoo-truncate", { class: "description" }, this.creator)));
+    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: "user", size: "small", color: overlays.getEventTypeColor(this.type) }), index.h("yoo-truncate", { class: "description" }, this.creator)));
   }
   renderAttendance() {
-    const eventInfo = index$1.getEventStatusInfo({ participantStatus: this.attendance }, null);
-    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.iconName, size: "small", color: "success" }), index.h("yoo-truncate", { class: "description" }, index$1.translate(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.title))));
+    const eventInfo = overlays.getEventStatusInfo({ participantStatus: this.attendance }, null);
+    return (index.h("div", { class: "flex-container" }, index.h("yoo-icon", { class: "icon", name: eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.iconName, size: "small", color: "success" }), index.h("yoo-truncate", { class: "description" }, overlays.translate(eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.title))));
   }
   render() {
     var _a;

package/dist/cjs/yoo-card-campaign.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardCampaignCss = ":host yoo-kpi-card{--value-direction:column;--value-font-size:var(--font-size-14, 0.875rem);--value-font-weight:normal;--value-separator:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);--value-title-color:var(--text-color, #807f83);--value-title-font-size:var(--font-size-12, 0.75rem);margin-top:var(--spacing-08, 0.5rem)}:host yoo-tag:first-of-type{margin-left:calc(var(--spacing-08, 0.5rem) * -1)}:host yoo-truncate{--max-lines:2;margin-bottom:var(--spacing-04, 0.25rem)}:host .top-container{display:var(--card-campaign-top-container-display, block)}:host .indicators{display:var(--card-campaign-indicators-display, flex);-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .create-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-04, 0.25rem)}:host(.feed) yoo-kpi-card{--value-font-size:var(--font-size-36, 2.25rem);--value-font-weight:bold;--value-title-font-size:var(--font-size-14, 0.875rem);margin-top:var(--spacing-08, 0.5rem)}:host(.feed) .outer-container .top-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}:host(.feed) .outer-container .bottom-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}:host(.feed) .outer-container .bottom-container .view-all{color:var(--stable, #adadad);font-size:var(--font-size-16, 1rem)}:host(.feed) .outer-container.service .top-container{-ms-flex-pack:unset !important;justify-content:unset !important}:host(.feed) .outer-container.empty{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.feed) .outer-container.empty .restricted-icon{margin:var(--spacing-16, 1rem)}:host(.feed) .outer-container.empty .empty-text{margin-right:var(--spacing-16, 1rem)}:host(.feed) .outer-container.empty .empty-text .empty-heading{color:var(--text-color, #807f83)}:host(.feed) .outer-container.empty yoo-empty-state{max-height:7rem}";
 
@@ -33,24 +34,24 @@ const YooCardCampaignComponent = class {
     this.keepUndefinedValues = false;
   }
   keepUndefinedKpi(kpiName) {
-    return this.keepUndefinedValues && !index$1.isPresent(this[kpiName]);
+    return this.keepUndefinedValues && !overlays.isPresent(this[kpiName]);
   }
   get kpis() {
     const kpis = lodash.compact([
-      (index$1.isPresent(this.locations) && this.locations >= 0) || this.keepUndefinedKpi('locations') ? { title: index$1.translate('LOCATIONS'), type: 'number', value: this.locations } : undefined,
-      (index$1.isPresent(this.users) && this.users >= 0) || this.keepUndefinedKpi('users') ? { title: index$1.translate('USERS'), type: 'number', value: this.users } : undefined,
-      (index$1.isPresent(this.completed) && this.completed >= 0) || this.keepUndefinedKpi('completed') ? { title: index$1.translate('COMPLETED'), type: 'number', value: this.completed } : undefined,
-      (index$1.isPresent(this.available) && this.available > 0) || this.keepUndefinedKpi('available') ? { title: index$1.translate('MISSIONSTODO'), type: 'number', value: this.available } : undefined,
-      (index$1.isPresent(this.completion) && this.completion >= 0) || this.keepUndefinedKpi('completion') ? { title: index$1.translate('COMPLETION'), type: 'percent', value: index$1.isPresent(this.completion) ? +(this.completion * 100).toFixed(0) : undefined } : undefined,
-      (index$1.isPresent(this.compliance) && this.compliance >= 0) || this.keepUndefinedKpi('compliance') ? { title: index$1.translate('COMPLIANCE'), type: 'percent', value: index$1.isPresent(this.compliance) ? +(this.compliance * 100).toFixed(0) : undefined } : undefined,
+      (overlays.isPresent(this.locations) && this.locations >= 0) || this.keepUndefinedKpi('locations') ? { title: overlays.translate('LOCATIONS'), type: 'number', value: this.locations } : undefined,
+      (overlays.isPresent(this.users) && this.users >= 0) || this.keepUndefinedKpi('users') ? { title: overlays.translate('USERS'), type: 'number', value: this.users } : undefined,
+      (overlays.isPresent(this.completed) && this.completed >= 0) || this.keepUndefinedKpi('completed') ? { title: overlays.translate('COMPLETED'), type: 'number', value: this.completed } : undefined,
+      (overlays.isPresent(this.available) && this.available > 0) || this.keepUndefinedKpi('available') ? { title: overlays.translate('MISSIONSTODO'), type: 'number', value: this.available } : undefined,
+      (overlays.isPresent(this.completion) && this.completion >= 0) || this.keepUndefinedKpi('completion') ? { title: overlays.translate('COMPLETION'), type: 'percent', value: overlays.isPresent(this.completion) ? +(this.completion * 100).toFixed(0) : undefined } : undefined,
+      (overlays.isPresent(this.compliance) && this.compliance >= 0) || this.keepUndefinedKpi('compliance') ? { title: overlays.translate('COMPLIANCE'), type: 'percent', value: overlays.isPresent(this.compliance) ? +(this.compliance * 100).toFixed(0) : undefined } : undefined,
       ...this.extraKpis || []
     ]);
     if (this.keepUndefinedValues) {
       kpis.sort((item1, item2) => {
-        if (!index$1.isPresent(item1.value) && index$1.isPresent(item2.value)) {
+        if (!overlays.isPresent(item1.value) && overlays.isPresent(item2.value)) {
           return -1;
         }
-        else if (!index$1.isPresent(item2.value) && index$1.isPresent(item1.value)) {
+        else if (!overlays.isPresent(item2.value) && overlays.isPresent(item1.value)) {
           return 1;
         }
         return 0;
@@ -59,20 +60,20 @@ const YooCardCampaignComponent = class {
     return kpis;
   }
   renderTopContainer() {
-    return (index.h("div", { class: "top-container" }, !!this.heading && index.h("yoo-truncate", null, index$1.translateMulti(this.heading))));
+    return (index.h("div", { class: "top-container" }, !!this.heading && index.h("yoo-truncate", null, overlays.translateMulti(this.heading))));
   }
   renderIndicators() {
-    return (index.h("div", { class: "indicators" }, index.h("yoo-tag", { size: this.host.classList.contains('feed') ? 'medium' : 'small' }, index.h("yoo-icon", { color: this.active ? 'success' : 'stable', name: "circle2", size: "extra-small", slot: "start" }), index$1.translate(this.active ? 'ACTIVE' : 'INACTIVE')), !!this.category && index.h("yoo-tag", { customColor: this.categoryColor }, this.category)));
+    return (index.h("div", { class: "indicators" }, index.h("yoo-tag", { size: this.host.classList.contains('feed') ? 'medium' : 'small' }, index.h("yoo-icon", { color: this.active ? 'success' : 'stable', name: "circle2", size: "extra-small", slot: "start" }), overlays.translate(this.active ? 'ACTIVE' : 'INACTIVE')), !!this.category && index.h("yoo-tag", { customColor: this.categoryColor }, this.category)));
   }
   renderCampaign() {
     const hasKpis = !!this.kpis.length;
     return (index.h("div", { class: "outer-container" }, this.renderTopContainer(), !this.hideIndicator && this.renderIndicators(), hasKpis && index.h("yoo-kpi-card", { hideEmptyState: true, keepUndefinedValues: this.keepUndefinedValues, class: "content-only", kpiData: this.kpis })));
   }
   renderCampaignNoLesson() {
-    return (index.h("div", { class: "outer-container empty" }, index.h("yoo-empty-state", { type: "lessons" }), index.h("span", { class: "empty-text" }, index$1.translate('MISSIONSCAMPAIGNEMPTY'), index.h("span", { class: "empty-heading" }, " ", index$1.translateMulti(this.heading)))));
+    return (index.h("div", { class: "outer-container empty" }, index.h("yoo-empty-state", { type: "lessons" }), index.h("span", { class: "empty-text" }, overlays.translate('MISSIONSCAMPAIGNEMPTY'), index.h("span", { class: "empty-heading" }, " ", overlays.translateMulti(this.heading)))));
   }
   renderRestrictedCampaign() {
-    return (index.h("div", { class: "outer-container empty" }, index.h("yoo-tag", { class: "restricted-icon", icon: "lock", size: "large", customColor: index$1.getCssColor('app-color') }), index.h("span", { class: "empty-text" }, index$1.translate('RESTRICTEDCAMPAIGN'))));
+    return (index.h("div", { class: "outer-container empty" }, index.h("yoo-tag", { class: "restricted-icon", icon: "lock", size: "large", customColor: overlays.getCssColor('app-color') }), index.h("span", { class: "empty-text" }, overlays.translate('RESTRICTEDCAMPAIGN'))));
   }
   renderFeedCampaign() {
     const hasKpis = !!this.kpis.length;

package/dist/cjs/yoo-card-cell.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardCellCss = ":host{--display-after-image:none;--position-image-container:unset;--opacity-image:1;cursor:pointer}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:var(--spacing-08, 0.5rem) 0.5rem;border:0}:host .outer-container .image-container{position:var(--position-image-container);-ms-flex-item-align:center;align-self:center;width:7rem;max-width:80px;height:7rem;max-height:80px;text-align:center;-webkit-box-shadow:var(--card-shadow, 0 0.125rem 0.25rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--card-shadow, 0 0.125rem 0.25rem 0 rgba(40, 47, 54, 0.08))}:host .outer-container .image-container .image{--border-radius:var(--border-radius-04, 0.25rem);display:inline-block;width:100%;max-width:80px;height:100%;max-height:80px;opacity:var(--opacity-image)}:host .outer-container .image-container.badge{width:60px;height:60px;-webkit-box-shadow:none;box-shadow:none}:host .outer-container .image-container.badge .image{border-radius:none;-webkit-box-shadow:none;box-shadow:none}:host .outer-container .image-container .image-overlay{position:absolute;top:15%;right:15%;bottom:auto;left:auto;display:var(--display-after-image);-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);-webkit-clip-path:circle(12px at center);clip-path:circle(12px at center)}:host .outer-container .image-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;font-size:var(--font-size-36, 2.25rem);border:solid 0.5px var(--stable-light, #f1f1f1);border-radius:50%}:host .outer-container .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-top:0.5625rem;color:var(--dark, #000000);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .text-container .text,:host .outer-container .text-container .subheading,:host .outer-container .text-container .text-truncate,:host .outer-container .text-container .date-label{text-align:center}:host .outer-container .text-container .text.badge{font-size:var(--font-size-12, 0.75rem)}:host .outer-container .text-container .text-truncate,:host .outer-container .text-container .subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:5rem}:host .outer-container .text-container .subheading{color:var(--stable, #adadad)}:host .outer-container .text-container .date-label{color:var(--app-color, #5a30f4)}:host .outer-container .action-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-top:var(--spacing-04, 0.25rem);color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host .outer-container .action-container .icon-action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:0.875rem;height:0.875rem;border:solid 0.5px var(--stable-light, #f1f1f1);border-radius:50%}:host .outer-container .icon-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff)}:host .outer-container .icon-overlay.top-right{top:var(--spacing-04, 0.25rem);right:var(--spacing-04, 0.25rem);-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;font-size:var(--icon-size-01, 1rem)}:host .outer-container .icon-overlay.bottom-left,:host .outer-container .icon-overlay.bottom-right{bottom:var(--spacing-04, 0.25rem);-ms-flex-align:end;align-items:flex-end;font-size:var(--icon-size-01, 1rem)}:host .outer-container .icon-overlay.bottom-left{left:var(--spacing-04, 0.25rem);-ms-flex-pack:start;justify-content:flex-start}:host .outer-container .icon-overlay.bottom-right{right:var(--spacing-04, 0.25rem);-ms-flex-pack:end;justify-content:flex-end}:host .outer-container .icon-overlay .icon-overlay-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.0625rem;height:1.0625rem;padding:0.125rem;background-color:var(--dark-40, rgba(0, 0, 0, 0.4));border-radius:50%}:host .outer-container .validated{position:absolute;top:5px;right:auto;bottom:auto;left:5px;-webkit-box-sizing:border-box;box-sizing:border-box;width:20px;height:20px;background-color:var(--success, #3aa76d);border:3px solid var(--light, #ffffff);border-radius:50%}:host .outer-container .validated.danger{background-color:var(--danger, #d44333)}@media only screen and (max-width: 370px){:host(.files) .outer-container .image-container{position:var(--position-image-container);-ms-flex-item-align:center;align-self:center;width:5rem !important;height:5rem !important}}:host(.files) .outer-container{margin-bottom:1rem;padding:0 0.5rem 0 0.5rem;overflow:hidden;border-radius:4px}:host(.files) .outer-container .action-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;color:var(--stable-light, #f1f1f1)}:host(.files) .outer-container .action-container .icon-action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:var(--font-size-20, 1.25rem);border:none;border-radius:50%}:host(.files) .outer-container .text-container{color:var(--dark, #000000)}:host(.files.framed:not(.horizontal)) .outer-container .image-container .icon-container{background:var(--light, #ffffff);border-radius:0}:host(.files.framed.horizontal) .outer-container .image-container{height:var(--spacing-64, 4rem);-webkit-box-shadow:none;box-shadow:none}:host(.files.framed.horizontal) .outer-container .image-container .icon-container{border:none}:host(.files.framed.horizontal) .outer-container .text-container{margin-top:0}:host(.filesFolders) .outer-container .action-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;color:var(--stable-light, #f1f1f1)}:host(.filesFolders) .outer-container .action-container .icon-action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:var(--font-size-20, 1.25rem);border:none;border-radius:50%}:host(.filesFolders) .outer-container .image-container .image{background-position-y:50%;background-size:contain !important}:host(.filesFolders.folder) .outer-container .image-container{-webkit-box-shadow:unset;box-shadow:unset}:host(.filesFolders.folder) .outer-container .image-container .icon-container{border:none}:host(.apps){display:block;padding:0.5rem;border-radius:0.5rem;-webkit-box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1))}:host(.apps) .outer-container .image-container .image{width:50%;height:50%;margin:auto;margin-top:2rem}:host(.photos),:host(.giphy),:host(.unsplash){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;border-radius:0.5rem;cursor:pointer}:host(.photos) .outer-container,:host(.giphy) .outer-container,:host(.unsplash) .outer-container{position:relative;width:100%;height:100%;padding:0}:host(.photos) .outer-container .image-container,:host(.giphy) .outer-container .image-container,:host(.unsplash) .outer-container .image-container{position:var(--position-image-container);-ms-flex-item-align:center;align-self:center;width:100%;max-width:120px;height:100%;max-height:120px}:host(.photos) .outer-container .image-container .image,:host(.giphy) .outer-container .image-container .image,:host(.unsplash) .outer-container .image-container .image{width:100%;max-width:120px;height:100%;max-height:120px;background:var(--stable-light, #f1f1f1);border-radius:0.5rem;opacity:var(--opacity-image)}:host(.photos) .outer-container .image-container .image-overlay,:host(.giphy) .outer-container .image-container .image-overlay,:host(.unsplash) .outer-container .image-container .image-overlay{position:absolute;top:15%;right:15%;bottom:auto;left:auto;display:var(--display-after-image);-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%);-webkit-clip-path:circle(12px at center);clip-path:circle(12px at center)}:host(.photos) .outer-container .image-container .icon-container,:host(.giphy) .outer-container .image-container .icon-container,:host(.unsplash) .outer-container .image-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;font-size:var(--font-size-36, 2.25rem);border:solid 0.5px var(--stable-light, #f1f1f1);border-radius:0.5rem}:host(.photos) .outer-container .text-container,:host(.giphy) .outer-container .text-container,:host(.unsplash) .outer-container .text-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin-top:0.5625rem;font-size:var(--font-size-12, 0.75rem)}:host(.photos) .outer-container .text-container .text,:host(.giphy) .outer-container .text-container .text,:host(.unsplash) .outer-container .text-container .text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:5rem;text-align:center}:host(.photos) .outer-container .action-container,:host(.giphy) .outer-container .action-container,:host(.unsplash) .outer-container .action-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-top:var(--spacing-08, 0.5rem);color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host(.photos) .outer-container .action-container .icon-action,:host(.giphy) .outer-container .action-container .icon-action,:host(.unsplash) .outer-container .action-container .icon-action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:0.875rem;height:0.875rem;border:solid 0.5px var(--stable-light, #f1f1f1);border-radius:50%}:host(.giphy) .outer-container .text-container,:host(.unsplash) .outer-container .text-container{margin-top:0;margin-bottom:0.3rem}:host(.giphy) .outer-container .image-container,:host(.unsplash) .outer-container .image-container{-webkit-box-shadow:none;box-shadow:none}:host(.photos.framed) .outer-container .image-container,:host(.giphy.framed) .outer-container .image-container,:host(.unsplash.framed) .outer-container .image-container{max-width:100px;max-height:100px}:host(.photos.web) .outer-container,:host(.giphy.web) .outer-container{position:unset}:host(.photos.web) .icon-overlay .icon-overlay-container,:host(.giphy.web) .icon-overlay .icon-overlay-container{width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem)}:host(.courses) .outer-container,:host(.plans) .outer-container{width:6.125rem}:host(.courses) .outer-container .image-container,:host(.plans) .outer-container .image-container{max-width:unset;height:10.125rem;max-height:unset;-o-object-fit:contain;object-fit:contain;border-radius:4px}:host(.courses) .outer-container .image-container yoo-img,:host(.plans) .outer-container .image-container yoo-img{max-width:unset !important;max-height:unset !important}:host(.courses) .outer-container .image-container yoo-img yoo-icon,:host(.plans) .outer-container .image-container yoo-img yoo-icon{position:absolute;right:var(--spacing-08, 0.5rem);bottom:var(--spacing-08, 0.5rem);padding:0.5rem;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);background:var(--stable, #adadad);border:none;border-radius:50%}:host(.badges) .outer-container{width:80px}:host(.file-uploader) :host(.force-select) .outer-container{padding:0}:host(.file-uploader) :host(.force-select) .outer-container .text-container{display:none}:host(.file-uploader.files) .outer-container .image-container{max-width:6.5rem;-webkit-box-shadow:none;box-shadow:none}:host(.file-uploader.files) .outer-container .image-container .icon-container{border:none;border-radius:none}:host(.file-uploader.files) .outer-container .text-container{margin-top:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem)}:host(.broadcasts){--gradient-background-image:linear-gradient(transparent 60%, var(--dark-80, rgba(0, 0, 0, 0.8))100%)}:host(.broadcasts) .outer-container{height:100%;padding:0}:host(.broadcasts) .outer-container span.timeago{position:absolute;top:var(--spacing-16, 1rem);left:var(--spacing-16, 1rem);z-index:1;color:var(--light, #ffffff)}:host(.broadcasts) .outer-container .image-container{position:relative;width:100%;min-width:100%;height:100%;max-height:100%}:host(.broadcasts) .outer-container .image-container .overlay{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--gradient-background-image)}:host(.broadcasts) .outer-container .image-container yoo-img{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}:host(.broadcasts) .outer-container .image-container .user-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;bottom:var(--spacing-16, 1rem);z-index:2;-ms-flex-direction:column;flex-direction:column;width:100%}:host(.broadcasts) .outer-container .image-container .user-container .subheading{margin-top:var(--spacing-04, 0.25rem);color:var(--light, #ffffff)}:host(.icons) .outer-container.icon-only{padding-top:var(--spacing-04, 0.25rem)}:host(.icons) .outer-container.icon-only .image-container{width:3rem;height:3rem;background:var(--stable-ultralight, #fafafa);-webkit-box-shadow:none;box-shadow:none}:host(.icons) .outer-container.icon-only .image-container .icon-container{border:none;border-radius:0}:host(.autocomplete) .outer-container .image-container .play{display:-ms-flexbox;display:flex;padding:var(--spacing-08, 0.5rem) 0 0 var(--spacing-08, 0.5rem)}:host(.autocomplete-web-display) .outer-container .image-container{width:2rem;height:2rem;-webkit-box-shadow:none;box-shadow:none}:host(.autocomplete-web-display) .outer-container .image-container .image-overlay{margin-top:var(--spacing-08, 0.5rem)}:host(.autocomplete-web-display) .outer-container .image-container .icon-container{border:none}:host(.autocomplete-web-display) .outer-container .text-container{font-size:var(--font-size-12, 0.75rem)}:host(.autocomplete-mobile-display) .outer-container .image-container{-webkit-box-shadow:none;box-shadow:none}:host(.autocomplete-mobile-display) .outer-container .image-container .play{padding:var(--spacing-24, 1.5rem)}:host(.autocomplete-mobile-display) .outer-container .image-container .icon-container{border:none}";
 
@@ -18,7 +19,7 @@ const YooCardCellComponent = class {
   }
   presentActionSheet() {
     // IONIC ACTION SHEETS
-    index$1.showActionSheet(this.entry.actions.map((item) => {
+    overlays.showActionSheet(this.entry.actions.map((item) => {
       item.icon = null;
       return item;
     }));
@@ -53,9 +54,9 @@ const YooCardCellComponent = class {
         'badge': this.entry.isBadge
       } }, ((_e = this.entry) === null || _e === void 0 ? void 0 : _e.icon) ?
       ((_f = this.entry) === null || _f === void 0 ? void 0 : _f.isBadge) ?
-        index.h("yoo-tag", { size: "extra-large", icon: this.entry.icon, customColor: this.entry.isLocked ? index$1.getCssColor('text-color') : this.entry.color }) :
+        index.h("yoo-tag", { size: "extra-large", icon: this.entry.icon, customColor: this.entry.isLocked ? overlays.getCssColor('text-color') : this.entry.color }) :
         (this.entry.imgSrc ?
-          index.h("yoo-img", { type: "background", disabled: this.entry.isLocked, class: "image", instant: this.entry.isGridCell, src: this.entry.imgSrc }, isAutocompleteVideoEntry && index.h("yoo-icon", { class: "play", name: "play", color: "light", size: index$1.isWeb(this.host) ? 'small' : 'large' }), this.entry.isLocked && index.h("yoo-icon", { size: "medium", name: "lock" })) :
+          index.h("yoo-img", { type: "background", disabled: this.entry.isLocked, class: "image", instant: this.entry.isGridCell, src: this.entry.imgSrc }, isAutocompleteVideoEntry && index.h("yoo-icon", { class: "play", name: "play", color: "light", size: overlays.isWeb(this.host) ? 'small' : 'large' }), this.entry.isLocked && index.h("yoo-icon", { size: "medium", name: "lock" })) :
           index.h("div", { class: "icon-container" }, index.h("yoo-icon", { size: this.entry.iconSize || this.getIconSize(), name: this.entry.icon, color: this.entry.color, style: this.host.classList.contains('folder') && { fill: this.entry.color } })))
       : this.entry.imgSrc && index.h("yoo-img", { type: "background", class: "image", instant: this.entry.isGridCell, src: this.entry.imgSrc }), this.entry.timeago && (index.h("span", { class: "overlay" })), index.h("yoo-icon", { size: "medium", class: "image-overlay", name: "check", color: "app-color" }), this.entry.user && this.entry.avatarParams && this.renderUser()));
   }
@@ -81,7 +82,7 @@ const YooCardCellComponent = class {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: { 'outer-container': true, 'icon-only': this.entry.icon && !this.entry.imgSrc } }, this.renderImageContainer(), ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.text) && this.renderTextContainer(), !index$1.isWeb(this.host) && ((_c = (_b = this.entry) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) > 0 && this.renderMobileActionContainer(), this.host.classList.contains('photo-video') && this.renderPhotoVideo(), this.entry.timeago && (index.h("span", { class: "timeago" }, this.entry.timeago)), ((_d = this.entry) === null || _d === void 0 ? void 0 : _d.flagged) && this.renderFlagged(), ((_e = this.entry) === null || _e === void 0 ? void 0 : _e.annotated) && this.renderAnnotated(), ((_f = this.entry) === null || _f === void 0 ? void 0 : _f.validated) ? index.h("div", { class: "validated" }) : ((_g = this.entry) === null || _g === void 0 ? void 0 : _g.validated) === false ? index.h("div", { class: "validated danger" }) : null, index$1.isWeb(this.host) && ((_j = (_h = this.entry) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.length) > 0 && this.renderWebActionContainer()));
+    return index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: { 'outer-container': true, 'icon-only': this.entry.icon && !this.entry.imgSrc } }, this.renderImageContainer(), ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.text) && this.renderTextContainer(), !overlays.isWeb(this.host) && ((_c = (_b = this.entry) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.length) > 0 && this.renderMobileActionContainer(), this.host.classList.contains('photo-video') && this.renderPhotoVideo(), this.entry.timeago && (index.h("span", { class: "timeago" }, this.entry.timeago)), ((_d = this.entry) === null || _d === void 0 ? void 0 : _d.flagged) && this.renderFlagged(), ((_e = this.entry) === null || _e === void 0 ? void 0 : _e.annotated) && this.renderAnnotated(), ((_f = this.entry) === null || _f === void 0 ? void 0 : _f.validated) ? index.h("div", { class: "validated" }) : ((_g = this.entry) === null || _g === void 0 ? void 0 : _g.validated) === false ? index.h("div", { class: "validated danger" }) : null, overlays.isWeb(this.host) && ((_j = (_h = this.entry) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.length) > 0 && this.renderWebActionContainer()));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-card-chat.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardChatCss = ":host{display:-ms-flexbox;display:flex;gap:var(--spacing-04, 0.25rem);-ms-flex-align:center;align-items:center;width:100%;padding:var(--spacing-08, 0.5rem) 0;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4))}:host #content{width:100%}:host #content #heading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host #content #heading yoo-truncated-line{width:calc(100% - (var(--logo-05, 3rem) + var(--spacing-08, 0.5rem)));margin-right:var(--spacing-02, 0.125rem);font-size:var(--font-size-18, 1.125rem)}:host #content #heading span{display:contents;height:var(--spacing-24, 1.5rem);color:var(--text-color, #807f83);font-size:var(--font-size-12, 0.75rem);white-space:nowrap}:host #content #subcontent,:host #content #message{display:-ms-flexbox;display:flex;gap:var(--spacing-04, 0.25rem);-ms-flex-align:center;align-items:center;width:100%}:host #content #message yoo-truncated-line{width:100%;color:var(--text-color, #807f83);font-size:var(--font-size-16, 1rem)}:host #content #message yoo-icon+yoo-truncated-line{width:calc(100% - (var(--icon-size-01, 1rem) + var(--spacing-04, 0.25rem)))}";
 
@@ -16,7 +17,7 @@ const YooCardChatComponent = class {
   }
   get senderText() {
     var _a, _b;
-    return `${((_a = this.entry.sender) === null || _a === void 0 ? void 0 : _a.firstName) || ((_b = this.entry.sender) === null || _b === void 0 ? void 0 : _b.lastName) || index$1.getUserDisplayName(this.entry.sender)}:`;
+    return `${((_a = this.entry.sender) === null || _a === void 0 ? void 0 : _a.firstName) || ((_b = this.entry.sender) === null || _b === void 0 ? void 0 : _b.lastName) || overlays.getUserDisplayName(this.entry.sender)}:`;
   }
   renderHeader() {
     const { title, lastMessageDate } = this.entry || {};

package/dist/cjs/yoo-card-course-row-compact.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardCourseRowCompactCss = ":host{display:-ms-flexbox;display:flex}:host yoo-img{-ms-flex-negative:0;flex-shrink:0;width:3rem;height:2.25rem}:host yoo-progress-bar{--progress-value-font-size:var(--font-size-14, 0.875rem);max-width:7.5rem}:host yoo-tag{--padding:0;margin-right:var(--spacing-08, 0.5rem)}:host yoo-truncate{--max-lines:2;font-weight:bold}:host .indicators{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .information{margin-left:var(--spacing-08, 0.5rem)}";
 
@@ -25,7 +26,7 @@ const YooCardCourseRowCompactComponent = class {
     const earnedPoints = lodash.clamp(availablePoints, getRoundedPositive(this.earnedPoints));
     const finishedLessons = lodash.clamp(availableLessons, getRoundedPositive(this.finishedLessons));
     const image = this.image || {};
-    return (index.h(index.Host, null, index.h("yoo-img", { instant: image.instant, src: image.src }), index.h("div", { class: "information" }, index.h("div", { class: "indicators" }, index.h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, index.h("yoo-icon", { color: "app-color", name: "star", size: "extra-small", slot: "start" }), earnedPoints, "/", availablePoints), index.h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, index.h("yoo-icon", { color: "text-color", name: "lesson", size: "extra-small", slot: "start" }), finishedLessons, "/", availableLessons), index.h("yoo-progress-bar", { animated: this.animated, value: availableLessons === 0 ? 0 : (finishedLessons / availableLessons) * 100 })), index.h("yoo-truncate", null, index$1.translateMulti(this.heading)))));
+    return (index.h(index.Host, null, index.h("yoo-img", { instant: image.instant, src: image.src }), index.h("div", { class: "information" }, index.h("div", { class: "indicators" }, index.h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, index.h("yoo-icon", { color: "app-color", name: "star", size: "extra-small", slot: "start" }), earnedPoints, "/", availablePoints), index.h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, index.h("yoo-icon", { color: "text-color", name: "lesson", size: "extra-small", slot: "start" }), finishedLessons, "/", availableLessons), index.h("yoo-progress-bar", { animated: this.animated, value: availableLessons === 0 ? 0 : (finishedLessons / availableLessons) * 100 })), index.h("yoo-truncate", null, overlays.translateMulti(this.heading)))));
   }
 };
 YooCardCourseRowCompactComponent.style = cardCourseRowCompactCss;

package/dist/cjs/yoo-card-course-row.cjs.entry.js

@@ -2,13 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
-const localForage = require('./localForage-f618f824.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const localForage = require('./localForage-e52707b9.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardCourseRowCss = ":host{cursor:pointer}:host yoo-truncate{--max-lines:2}:host p{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}:host yoo-img{-ms-flex-negative:0;flex-shrink:0;width:6.625rem;height:5rem;border-radius:var(--spacing-04, 0.25rem)}:host yoo-tag[no-background]{--padding:0;font-size:var(--font-size-16, 1rem)}:host yoo-tag[no-background]:not(:last-child){-ms-flex-negative:0;flex-shrink:0}:host .ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;padding:var(--spacing-08, 0.5rem) 0;background:var(--light-10, rgba(255, 255, 255, 0.1))}:host .outer-container.web{-ms-flex-align:initial;align-items:initial}:host .outer-container .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:center;justify-content:center;width:100%;min-width:0;margin:0 0 0 0.75rem;font-size:var(--font-size-14, 0.875rem)}:host .outer-container .content-container.web-content-container{margin:0 0 0 1.2rem;padding-bottom:0;border-bottom:none}:host .outer-container .content-container.web-content-container .info-text{font-size:var(--font-size-16, 1rem)}:host .outer-container .content-container.web-content-container .time{color:var(--app-color, #5a30f4)}:host .outer-container .content-container.web-content-container .description-row{--line-height:1;display:block;margin-top:var(--spacing-04, 0.25rem);font-size:var(--font-size-16, 1rem) !important}:host .outer-container .content-container.web-content-container yoo-progress-bar{max-width:210px;margin-top:var(--spacing-04, 0.25rem)}:host .outer-container .content-container .inner-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}:host .outer-container .content-container .inner-container .progress-calendar-container{display:-ms-flexbox;display:flex}:host .outer-container .content-container .inner-container .progress-calendar-container .lesson-count{margin:var(--spacing-04, 0.25rem) 0 0 var(--spacing-04, 0.25rem)}:host .outer-container .content-container .inner-container .end-date-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .content-container .inner-container .end-date-container .end-date{margin-left:var(--spacing-04, 0.25rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-16, 1rem)}:host .outer-container .content-container .inner-container .rating-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:end;align-items:flex-end;font-size:var(--font-size-16, 1rem)}:host .outer-container .content-container .inner-container .rating-container .rating-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--app-color, #5a30f4)}:host .outer-container .content-container .inner-container .rating-container .rating-content yoo-icon{margin-right:var(--spacing-04, 0.25rem)}:host .outer-container .content-container .inner-container .info-row{display:grid;grid-template-columns:minmax(0, 1fr) auto;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}:host .outer-container .content-container .inner-container .info-row.web{gap:var(--spacing-16, 1rem)}:host .outer-container .content-container .inner-container .info-row.web div>yoo-icon{margin-right:var(--spacing-24, 1.5rem)}:host .outer-container .content-container .inner-container .info-row:not(.web){gap:var(--spacing-08, 0.5rem)}:host .outer-container .content-container .inner-container .info-row div{display:-ms-flexbox;display:flex;gap:inherit;-ms-flex-align:center;align-items:center}:host .outer-container .content-container .inner-container .info-row yoo-tag{overflow:hidden}:host .outer-container .content-container .inner-container .info-row yoo-icon.enabled{color:var(--app-color, #5a30f4)}:host .outer-container .content-container .inner-container .info-row yoo-icon.disabled{color:var(--stable, #adadad)}:host .outer-container .content-container .inner-container .title-row{color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-16, 1rem);line-height:normal}:host .outer-container .content-container .inner-container .description-row{min-height:1.5rem;color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .content-container .inner-container .course-points-date{display:-ms-flexbox;display:flex;margin:5px 0}:host .outer-container .content-container .inner-container .course-points-date .date{color:var(--app-color, #5a30f4);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem)}:host .outer-container .content-container .inner-container .course-points-date .date .date-label{color:var(--dark, #000000)}:host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) yoo-img{width:8rem;height:6rem}:host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) yoo-truncate{--max-lines:1}:host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container{height:6rem}:host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container .content-container{max-height:12rem}:host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container .content-container .inner-container{margin-top:0}:host(.web:not(.autocomplete-selection-mode):not(.selected-content):not(.calendar)) .outer-container .content-container .inner-container .title-row{--line-height:1.6;font-size:var(--font-size-20, 1.25rem)}:host(.web.grid-cell:not(.autocomplete-selection-mode):not(.selected-content)) .outer-container .content-container{width:100%}:host(.selection-mode) .outer-container .content-container{padding-right:var(--spacing-24, 1.5rem)}:host(.autocomplete-selection-mode) .web-content-container .inner-container .title-row{font-size:var(--font-size-14, 0.875rem)}:host(.selected-content) yoo-img{width:2rem;height:1.5rem;padding-right:var(--spacing-08, 0.5rem)}:host(.selected-content) .outer-container{-ms-flex-align:initial;align-items:initial;height:1.5rem;padding:0;border-bottom:none}:host(.selected-content) .outer-container .content-container{width:100%;margin:0;padding-bottom:0}:host(.selected-content) .outer-container .content-container .inner-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.selected-content) .outer-container .content-container .inner-container .title-row{font-weight:normal}:host(.selected-content) .outer-container .web-content-container .inner-container .title-row{font-size:var(--font-size-14, 0.875rem)}:host(.mobile.courses) .outer-container{padding-top:var(--spacing-24, 1.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--border-color)}:host(.mobile.courses) .outer-container .content-container{width:100%}:host(.mobile.courses) .outer-container .content-container yoo-progress-bar{margin-right:var(--spacing-08, 0.5rem)}:host(.web.calendar) .content-container .title-row{font-size:var(--spacing-16, 1rem)}:host(.mobile.calendar) .outer-container{-ms-flex-align:initial;align-items:initial}:host(.mobile.calendar) .outer-container yoo-progress-bar{max-width:8rem}:host(.mobile.calendar) .outer-container .lesson-count{margin:0 0 0 var(--spacing-04, 0.25rem) !important}:host(.mobile.calendar.framed) yoo-img{width:4rem;height:3rem}:host(.mobile.calendar.framed) .outer-container{border-bottom:unset !important}:host(.no-border-bottom.mobile) .outer-container{-ms-flex-align:initial;align-items:initial;border-bottom:none}:host(.no-border-bottom.mobile) .outer-container .content-container{padding-bottom:0}";
 
@@ -26,13 +27,13 @@ const YooCardCourseRowComponent = class {
     this.isFinished = this.calcIsFinished();
     this.hasRating = this.calcHasRating();
     const backgroundImage = lodash.get(this.actualPlan, 'background._downloadURL', lodash.get(this.actualPlan, 'background', lodash.get(this.actualPlan, 'imageData', null)));
-    this.backgroundImage = index$1.isOffline() ? await localForage.getFromOfflineStorage(backgroundImage) : backgroundImage;
+    this.backgroundImage = overlays.isOffline() ? await localForage.getFromOfflineStorage(backgroundImage) : backgroundImage;
     this.initPlanDates();
   }
   initPlanDates() {
     const creationDate = this.entry['assignmentDate'];
-    const startDate = index$1.getPlanStartDate(this.actualPlan, creationDate);
-    const dueDate = index$1.getPlanDueDate(this.actualPlan, creationDate);
+    const startDate = overlays.getPlanStartDate(this.actualPlan, creationDate);
+    const dueDate = overlays.getPlanDueDate(this.actualPlan, creationDate);
     const calendarEndDate = lodash.get(this.actualPlan, 'endDate', null);
     this.dueDateAfterToday = calendarEndDate ? this.isDateAfterToday(calendarEndDate) : this.isDateAfterToday(dueDate);
     if (dueDate || calendarEndDate) {
@@ -55,11 +56,11 @@ const YooCardCourseRowComponent = class {
   }
   // DD/MM/YYYY at HH:mm
   getScheduledAtFormattedDate(date) {
-    const formattedDate = index$1.dateFormat(date, 'DD/MM/YYYY HH:mm').split(' ');
-    return `${index$1.translate('SCHEDULEDAT', { date: formattedDate[0], time: formattedDate[1] })}`;
+    const formattedDate = overlays.dateFormat(date, 'DD/MM/YYYY HH:mm').split(' ');
+    return `${overlays.translate('SCHEDULEDAT', { date: formattedDate[0], time: formattedDate[1] })}`;
   }
   getTimeAgoFormattedDate(date) {
-    return index$1.pipes.timeAgo.transform(date);
+    return overlays.pipes.timeAgo.transform(date);
   }
   calcIsFinished() {
     const lessonsCount = lodash.get(this.actualPlan, 'missiondescriptionsRef', []).length;
@@ -75,7 +76,7 @@ const YooCardCourseRowComponent = class {
   }
   isDateAfterToday(date) {
     const now = new Date();
-    return index$1.isDateAfter(date, now);
+    return overlays.isDateAfter(date, now);
   }
   renderCardImage() {
     return (index.h("yoo-img", { type: this.isLocked ? 'background' : 'default', disabled: this.isLocked, instant: this.entry.isGridCell, src: this.backgroundImage }, this.isLocked && index.h("yoo-tag", { icon: "lock", iconOnlyColor: "light", color: "stable", size: "small" })));
@@ -86,7 +87,7 @@ const YooCardCourseRowComponent = class {
     return (index.h("yoo-tag", { color: tagColor, size: "small" }, index.h("yoo-icon", { slot: "start", name: "calendar", color: iconColor, size: "small" }), this.dateToDisplay));
   }
   getLessonsCountText(lessonsCount) {
-    const pluralizedLabel = index$1.translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
+    const pluralizedLabel = overlays.translate(lessonsCount > 1 ? 'LESSONS' : 'LESSON');
     const denominator = this.entry && this.entry['finishedLessonsCount'] && !this.isFinished ? this.finishedLessonsCount + '/' : '';
     return denominator + lessonsCount + ' ' + pluralizedLabel;
   }
@@ -109,7 +110,7 @@ const YooCardCourseRowComponent = class {
         points = `${Math.round(lodash.get(this.entry, 'earnedPoints', 0))}/${this.actualPlan.availablePoints}`;
       }
     }
-    return index$1.isWeb(this.host) ? this.renderCourseContentWeb(points) : this.renderCourseContentMobile(points);
+    return overlays.isWeb(this.host) ? this.renderCourseContentWeb(points) : this.renderCourseContentMobile(points);
   }
   renderProgress() {
     const plan = lodash.get(this.entry, 'plan', {});
@@ -129,14 +130,14 @@ const YooCardCourseRowComponent = class {
     return (index.h("yoo-tag", { color: "dark", noBackground: true, size: "small" }, index.h("yoo-icon", { slot: "start", name: "star", color: "app-color", size: "small" }), points));
   }
   renderRating() {
-    if (this.isFinished && index$1.isPlanRatingEnabled(this.actualPlan) && !this.hasRating) {
-      return (index.h("div", { class: "rating-container" }, index.h("div", { class: "rating-content", onClick: (ev) => this.onRatingClicked(ev) }, index.h("yoo-icon", { size: "small", name: "right-circle", color: "app-color" }), index.h("span", null, index$1.translate('RATEYOURCOURSE')))));
+    if (this.isFinished && overlays.isPlanRatingEnabled(this.actualPlan) && !this.hasRating) {
+      return (index.h("div", { class: "rating-container" }, index.h("div", { class: "rating-content", onClick: (ev) => this.onRatingClicked(ev) }, index.h("yoo-icon", { size: "small", name: "right-circle", color: "app-color" }), index.h("span", null, overlays.translate('RATEYOURCOURSE')))));
     }
   }
   onRatingClicked(ev) {
     var _a;
     ev.stopPropagation();
-    index$1.showRatingDialog((_a = this.entry) === null || _a === void 0 ? void 0 : _a._id);
+    overlays.showRatingDialog((_a = this.entry) === null || _a === void 0 ? void 0 : _a._id);
   }
   renderCalendarProgress() {
     const ongoing = lodash.get(this.actualPlan, 'ongoingLessons', 0);
@@ -150,14 +151,14 @@ const YooCardCourseRowComponent = class {
   }
   renderCourseContentMobile(points) {
     var _a;
-    return (index.h("div", { class: "content-container" }, index.h("div", { class: "inner-container" }, !this.isSelectedContent() && (index.h("div", { class: "info-row" }, index.h("div", null, points && this.renderPoints(points), !this.host.classList.contains('selected-content') && this.renderLessonsText()), index.h("div", null, !this.hideLessonsCount && this.renderBookmarkIcon(), this.renderSyncedOffline()))), !this.isSelectedContent() && !this.isFinished && this.dateToDisplay && this.renderDate(), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && index.h("yoo-truncate", { class: "title-row" }, index$1.translateMulti(this.actualPlan.title)), this.renderCalendarProgress(), this.renderProgress(), this.renderRating())));
+    return (index.h("div", { class: "content-container" }, index.h("div", { class: "inner-container" }, !this.isSelectedContent() && (index.h("div", { class: "info-row" }, index.h("div", null, points && this.renderPoints(points), !this.host.classList.contains('selected-content') && this.renderLessonsText()), index.h("div", null, !this.hideLessonsCount && this.renderBookmarkIcon(), this.renderSyncedOffline()))), !this.isSelectedContent() && !this.isFinished && this.dateToDisplay && this.renderDate(), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && index.h("yoo-truncate", { class: "title-row" }, overlays.translateMulti(this.actualPlan.title)), this.renderCalendarProgress(), this.renderProgress(), this.renderRating())));
   }
   renderCourseContentWeb(points) {
     var _a;
-    return (index.h("div", { class: "content-container web-content-container" }, index.h("div", { class: "inner-container" }, !this.isSelectedContent() && (index.h("div", { class: "info-row web" }, index.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 && (index.h("yoo-tag", { size: "small", color: "stable-light" }, index$1.translate('INACTIVE')))), index.h("div", null, !this.hideLessonsCount && this.renderBookmarkIcon(), this.renderSyncedOffline()))), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && index.h("yoo-truncate", { class: "title-row" }, index$1.translateMulti(this.actualPlan.title)), this.renderCalendarProgress(), this.renderProgress(), this.renderRating())));
+    return (index.h("div", { class: "content-container web-content-container" }, index.h("div", { class: "inner-container" }, !this.isSelectedContent() && (index.h("div", { class: "info-row web" }, index.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 && (index.h("yoo-tag", { size: "small", color: "stable-light" }, overlays.translate('INACTIVE')))), index.h("div", null, !this.hideLessonsCount && this.renderBookmarkIcon(), this.renderSyncedOffline()))), ((_a = this.actualPlan) === null || _a === void 0 ? void 0 : _a.title) && index.h("yoo-truncate", { class: "title-row" }, overlays.translateMulti(this.actualPlan.title)), this.renderCalendarProgress(), this.renderProgress(), this.renderRating())));
   }
   render() {
-    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host), onClick: (ev) => this.isLocked && ev.stopPropagation() }, this.entry && index.h("div", { class: { 'outer-container': true, web: index$1.isWeb(this.host) } }, [this.renderCardImage(), this.renderCourseContent()])));
+    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host), onClick: (ev) => this.isLocked && ev.stopPropagation() }, this.entry && index.h("div", { class: { 'outer-container': true, web: overlays.isWeb(this.host) } }, [this.renderCardImage(), this.renderCourseContent()])));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-card-course.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
 const lodash = require('./lodash-597bda6d.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardCourseCss = ":host{cursor:pointer}:host yoo-tag[no-background]{--padding:0;font-size:var(--font-size-16, 1rem)}:host yoo-tag[no-background]:not(:last-child){-ms-flex-negative:0;flex-shrink:0}:host .outer-container{margin-right:0.325rem;margin-bottom:var(--spacing-16, 1rem);margin-left:0.325rem;background:var(--light, #ffffff);border-radius:var(--border-radius-04, 0.25rem);-webkit-box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-01, 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.1))}:host .outer-container .image-container{position:relative;height:16.875rem;margin-top:var(--spacing-08, 0.5rem);margin-bottom:0.8rem}:host .outer-container .image-container .image{--border-radius:var(--border-radius-04, 0.25rem) var(--border-radius-04, 0.25rem) 0 0;width:100%;height:100%}:host .outer-container .image-container .image yoo-items{position:absolute;top:var(--spacing-16, 1rem);right:var(--spacing-16, 1rem)}:host .outer-container .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-16, 1rem);font-size:var(--font-size-16, 1rem)}:host .outer-container .content-container .course-title{padding-top:var(--spacing-04, 0.25rem);color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host .outer-container .content-container .course-description{position:relative;margin:var(--spacing-04, 0.25rem) 0;overflow:hidden;color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem);line-height:normal;white-space:normal}:host .outer-container .content-container .course-points{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin:var(--spacing-04, 0.25rem) 0}:host .outer-container .content-container .course-info{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;padding:var(--spacing-04, 0.25rem) 0;font-size:var(--font-size-14, 0.875rem)}:host .outer-container .content-container.profile-summary .course-title,:host .outer-container .content-container.profile-summary .course-info{-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:var(--font-size-16, 1rem)}:host .outer-container .content-container.profile-summary .course-title{margin:0;padding-top:var(--spacing-02, 0.125rem);text-align:left}:host .outer-container.summary yoo-progress-bar{--progress-value-font-size:var(--font-size-14, 0.875rem)}:host .outer-container.small{position:relative;height:100%;margin:0;border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container.small yoo-progress-bar{--progress-value-color:var(--light, #ffffff);--progress-value-font-size:var(--font-size-12, 0.75rem);--trail-bar-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host .outer-container.small yoo-tag{font-size:var(--font-size-12, 0.75rem)}:host .outer-container.small .content-container{position:absolute;bottom:0;padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem)}:host .outer-container.small .course-description{margin:0;font-size:var(--font-size-12, 0.75rem)}:host .outer-container.small .course-info{padding:0}:host .outer-container.small .course-points{-ms-flex-order:-1;order:-1;margin:0}:host .outer-container.small .course-title{overflow:hidden;padding:0;color:var(--light, #ffffff);font-size:var(--font-size-12, 0.75rem)}@supports (display: -webkit-box){:host .outer-container.small .course-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}:host .outer-container.small .image{--border-radius:var(--border-radius-08, 0.5rem);position:relative}:host .outer-container.small .image:after{position:absolute;width:100%;height:100%;background:-webkit-gradient(linear, left top, left bottom, from(var(--transparent-linear-gradient, rgba(255, 255, 255, 0))), color-stop(69%, rgba(0, 0, 0, 0.49)), to(rgba(0, 0, 0, 0.7)));background:linear-gradient(to bottom, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)), rgba(0, 0, 0, 0.49) 69%, rgba(0, 0, 0, 0.7));border-radius:var(--border-radius-08, 0.5rem);content:\"\"}:host .outer-container.small .image yoo-items{top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem)}:host .outer-container.small .image-container{height:100%;margin:0}:host .outer-container.medium{margin:0;border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container.medium .image-container{height:11.25rem;margin:0}:host .outer-container.large .image-container{height:16.875rem}:host(.offline) .outer-container{opacity:0.7}:host(.offline)::before,:host(.offline)::after{position:absolute;top:0;right:0;border-color:transparent;border-style:solid;content:\"\"}:host(.offline)::after{border-width:0.5em;border-top-color:var(--energized, #ffc043);border-right-color:var(--energized, #ffc043)}:host(.small) .outer-container{display:-ms-flexbox;display:flex;margin:0;padding-bottom:0}:host(.small) .outer-container .image-container{-ms-flex-negative:0;flex-shrink:0;width:8.125rem;height:5.5625rem;margin:0;padding:var(--spacing-08, 0.5rem);border-radius:var(--border-radius-04, 0.25rem)}:host(.small) .outer-container .image-container .image{--border-radius:var(--border-radius-04, 0.25rem)}:host(.small) .outer-container .content-container{margin:0}:host(.small) .outer-container .content-container yoo-progress-bar{display:none}:host(.small) .outer-container .content-container .course-title{font-weight:var(--font-weight-700, 700)}:host(.no-lessons) .lessons{display:none}";
 
@@ -44,10 +45,10 @@ const YooCardCourseComponent = class {
     return index.h("yoo-progress-bar", { class: { 'app-color': !this.profileSummary }, value: finishedLessonsCount ? (finishedLessonsCount / lessonsCount) * 100 : 0 });
   }
   renderCourseTitle(plan) {
-    return [index.h("div", { class: "course-title" }, index$1.translateMulti(plan.title)), plan.description && index.h("div", { class: "course-description" }, index$1.translateMulti(plan.description))];
+    return [index.h("div", { class: "course-title" }, overlays.translateMulti(plan.title)), plan.description && index.h("div", { class: "course-description" }, overlays.translateMulti(plan.description))];
   }
   renderCourseLessonAndPointInfo(lessonsCount, dueDate, isFinished) {
-    const lessonLabel = index$1.translate((lessonsCount || 0) > 1 ? 'LESSONS' : 'LESSON');
+    const lessonLabel = overlays.translate((lessonsCount || 0) > 1 ? 'LESSONS' : 'LESSON');
     return (index.h("div", { class: "course-info" }, this.profileSummary && (index.h("div", { class: "points" }, index.h("yoo-tag", { color: "dark", noBackground: true, size: "small" }, index.h("yoo-icon", { color: "app-color", name: "star", size: this.iconSize, slot: "start" }), this.entry.earnedPoints || 0, "/", this.entry.plan.availablePoints || 0))), lessonsCount > 0 && (index.h("div", { class: "lessons" }, !this.entry.finished && (index.h("yoo-tag", { color: this.profileSummary ? 'dark' : 'stable', noBackground: true, size: "small" }, index.h("yoo-icon", { color: "stable", name: "lesson", size: this.iconSize, slot: "start" }), this.entry.finishedLessonsCount || 0, "/", lessonsCount || 0, " ", lessonLabel)))), !isFinished && dueDate && !this.profileSummary && (index.h("div", { class: "date" }, index.h("yoo-tag", { color: "danger", noBackground: true, size: "small" }, index.h("yoo-icon", { color: "danger", name: "alarm", size: this.iconSize, slot: "start" }), dueDate.toLocaleDateString())))));
   }
   renderEarnedCoursePoints(plan) {
@@ -68,7 +69,7 @@ const YooCardCourseComponent = class {
   }
   renderCourseContainer() {
     const plan = this.entry.plan;
-    const dueDate = index$1.getPlanDueDate(plan, this.entry.assignmentDate);
+    const dueDate = overlays.getPlanDueDate(plan, this.entry.assignmentDate);
     let lessonsCount = lodash.get(plan, 'missiondescriptionsRef', []).length;
     if (lessonsCount === 0) {
       lessonsCount = lodash.get(plan, 'lessonsCount', 0);

package/dist/cjs/yoo-card-feed-row.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const cardFeedRowCss = ":host{display:grid;grid-template-columns:minmax(0, 1fr) 4rem;gap:var(--spacing-16, 1rem)}:host yoo-img{height:4rem}:host .details{display:-ms-flexbox;display:flex;gap:var(--spacing-04, 0.25rem);-ms-flex-align:center;align-items:center;overflow:hidden}:host .indicators{display:-ms-flexbox;display:flex;gap:var(--spacing-08, 0.5rem);-ms-flex-align:center;align-items:center;color:var(--text-color, #807f83);font-size:var(--font-size-14, 0.875rem)}:host .information{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-02, 0.125rem)}:host .information>yoo-truncate{--max-lines:2}:host .truncated{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
@@ -30,7 +31,7 @@ const YooCardFeedRowComponent = class {
     const image = this.image || {};
     const hasDate = this.validated && !!this.date;
     const hasUser = !!this.user;
-    return (index.h(index.Host, null, index.h("div", { class: "information" }, index.h("yoo-truncate", { innerHTML: index$1.translateMulti(this.heading) }), index.h("div", { class: "indicators" }, (hasDate || hasUser) && (index.h("div", { class: "details" }, hasUser && index.h("yoo-avatar", { size: "extra-small", user: this.user }), hasUser && index.h("span", { class: "truncated" }, index$1.getUserDisplayName(this.user)), hasDate && hasUser && ' • ', hasDate && index.h("span", null, index$1.fromNow(this.date, true)))), this.validated && this.featured && index.h("yoo-icon", { color: "app-color", name: "fixed", size: "small" }), this.validated && !!this.hasReadReceipts && index.h("yoo-icon", { color: "text-color", name: "read", size: "small" }), !this.validated && index.h("yoo-tag", { color: "text-color-10" }, index$1.translate('PENDINGVALIDATION')))), index.h("yoo-img", { fallbackIcon: { color: 'text-color', name: 'news', size: 'medium' }, instant: image.instant, src: image.src })));
+    return (index.h(index.Host, null, index.h("div", { class: "information" }, index.h("yoo-truncate", { innerHTML: overlays.translateMulti(this.heading) }), index.h("div", { class: "indicators" }, (hasDate || hasUser) && (index.h("div", { class: "details" }, hasUser && index.h("yoo-avatar", { size: "extra-small", user: this.user }), hasUser && index.h("span", { class: "truncated" }, overlays.getUserDisplayName(this.user)), hasDate && hasUser && ' • ', hasDate && index.h("span", null, overlays.fromNow(this.date, true)))), this.validated && this.featured && index.h("yoo-icon", { color: "app-color", name: "fixed", size: "small" }), this.validated && !!this.hasReadReceipts && index.h("yoo-icon", { color: "text-color", name: "read", size: "small" }), !this.validated && index.h("yoo-tag", { color: "text-color-10" }, overlays.translate('PENDINGVALIDATION')))), index.h("yoo-img", { fallbackIcon: { color: 'text-color', name: 'news', size: 'medium' }, instant: image.instant, src: image.src })));
   }
 };
 YooCardFeedRowComponent.style = cardFeedRowCss;