@yoobic/yobi 8.2.0-16 → 8.2.0-19

package/dist/collection/feature-learn/incentive/incentive-detail/incentive-detail.js

@@ -1,5 +1,5 @@
 import { IncentiveType } from '@shared/interfaces';
-import { appendIncentiveUnit, dateFormat, getIncentiveProgress, getIncentiveTargetHighestMilestone, getIncentiveTotalKpis, getIncentiveTotalTargets, getSession, gsapTo, isWeb, translate } from '@shared/utils';
+import { appendIncentiveUnit, dateFormat, getIncentiveProgress, getIncentiveProgressBase, getIncentiveProgressOf, getIncentiveTargetHighestMilestone, getSession, gsapTo, isWeb, translate } from '@shared/utils';
 import { Component, Element, forceUpdate, h, Host, Prop, Watch } from '@stencil/core';
 import { dateRangeState, getAppContext } from '../../../utils/helpers/common-helpers';
 import { getIncentiveStatusBadgeSettings, getParticipant, getPositionText, getProgressText, getTotalSalesBreakdown, getUserScore } from '../helpers/incentive-helpers';
@@ -23,7 +23,8 @@ export class YooIncentiveDetailComponent {
       return;
     }
     this.participant = getParticipant(this.incentive, this.userId, this.groups);
-    if (isWeb(this.host)) {
+    this.score = getUserScore(this.incentive, this.userId, this.groups);
+    if (this.showManagerView) {
       const length = (_a = this.incentive.targets) === null || _a === void 0 ? void 0 : _a.length; // the target will be opened by default if there is only one, or if the current user is also a participant
       this.targets = ((_b = this.incentive.targets) === null || _b === void 0 ? void 0 : _b.map(target => {
         var _a;
@@ -37,7 +38,6 @@ export class YooIncentiveDetailComponent {
     else if (this.participant) {
       const target = (_c = this.incentive.targets) === null || _c === void 0 ? void 0 : _c.find((target) => target.id === this.participant.target);
       this.targets = target ? [{ target, milestone: getIncentiveTargetHighestMilestone(target), isOpened: true }] : [];
-      this.score = getUserScore(this.incentive, this.userId, this.groups);
     }
   }
   getDate() {
@@ -47,15 +47,17 @@ export class YooIncentiveDetailComponent {
   renderTargetMilestone(tagetId, milestone) {
     var _a, _b;
     const isMilestoneReached = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.progress) >= milestone.value;
-    const reached = !isWeb(this.host) && (((_b = this.participant) === null || _b === void 0 ? void 0 : _b.target) === tagetId) && isMilestoneReached;
+    const reached = !this.showManagerView && (((_b = this.participant) === null || _b === void 0 ? void 0 : _b.target) === tagetId) && isMilestoneReached;
     return (h("tr", { class: { reached } },
       h("th", null, milestone.reward),
       h("td", null,
-        !isWeb(this.host) && h("yoo-icon", { name: "check", color: "app-color", class: { 'unvisible': !isMilestoneReached }, size: "small" }),
+        !this.showManagerView && h("yoo-icon", { name: "check", color: "app-color", class: { 'unvisible': !isMilestoneReached }, size: "small" }),
         appendIncentiveUnit(milestone.value, this.incentive.unit, this.incentive.isUnitCurrency, false))));
   }
   renderTargets() {
-    return (h("div", { class: "box-content targets" }, this.targets.map((target) => this.renderTarget(target))));
+    return [
+      h("div", { class: "box-content targets" }, this.targets.map((target) => this.renderTarget(target)))
+    ];
   }
   renderTarget(collapsible) {
     var _a;
@@ -74,13 +76,13 @@ export class YooIncentiveDetailComponent {
       h("div", { class: "target-title", onClick: toggleData },
         h("div", { class: "name" }, collapsible.target.title),
         h("div", { class: "reach" },
-          isWeb(this.host) ? milestoneText : translate('REACHTARGET', { n: milestoneText }),
+          this.showManagerView ? milestoneText : translate('REACHTARGET', { n: milestoneText }),
           h("yoo-icon", { name: collapsible.isOpened ? 'arrow-up' : 'arrow-down', color: "stable" }))),
       h("div", { class: "target-data", ref: el => dataEl = el },
         h("table", null, milestones === null || milestones === void 0 ? void 0 : milestones.sort((m1, m2) => m2.value - m1.value).map(m => this.renderTargetMilestone(collapsible.target.id, m))))));
   }
   renderMobileMilestones() {
-    var _a, _b;
+    var _a;
     if (!this.score)
       return;
     const progressText = getProgressText(this.score);
@@ -91,8 +93,10 @@ export class YooIncentiveDetailComponent {
         h("div", { class: "progress" }, progressText),
         h("div", { class: "leftover" }, leftOverText + ' ' + translate('INCENTIVELEFT'))),
       h("yoo-progress-bar", { class: "progress-bar app-color", value: (this.score.result || 0) * 100 }),
-      !!((_a = this.targets) === null || _a === void 0 ? void 0 : _a.length) && h("div", { class: "subtitle" }, translate('MILESTONES')),
-      !!((_b = this.targets) === null || _b === void 0 ? void 0 : _b.length) && this.renderTargets()));
+      !!((_a = this.targets) === null || _a === void 0 ? void 0 : _a.length) && [
+        h("div", { class: "subtitle" }, translate('MILESTONES')),
+        this.renderTargets()
+      ]));
   }
   renderTypes() {
     var _a, _b, _c, _d, _e;
@@ -166,7 +170,8 @@ export class YooIncentiveDetailComponent {
     ];
   }
   renderMobile() {
-    const positionText = getPositionText(this.score);
+    var _a;
+    const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && getPositionText(this.score.position);
     return (h("div", { class: "outer-container mobile" },
       h("div", { class: "title" }, this.incentive.title),
       h("div", { class: "types" }, this.renderTypes()),
@@ -183,60 +188,75 @@ export class YooIncentiveDetailComponent {
       h("div", { class: "subtitle" }, translate('INCENTIVELEADERBOARD')),
       h("slot", null)));
   }
+  renderWebTopContainer() {
+    var _a, _b;
+    return (h("div", { class: "top-container" },
+      h("div", { class: "image-container" },
+        h("yoo-img", { type: "background", src: (_b = (_a = this.incentive) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b._downloadURL.toString() })),
+      h("div", { class: "description-container" },
+        h("div", { class: "heading-container" },
+          h("span", { class: "title" }, this.incentive.title)),
+        h("div", { class: "info-container" },
+          this.renderTypes(),
+          this.renderDateRange(),
+          this.renderDate(),
+          this.renderOwner()),
+        this.incentive.description && h("div", { class: "description" }, this.incentive.description),
+        h("div", { class: "tags-container" }, this.renderTags()))));
+  }
+  renderWebMiddleContainer() {
+    var _a;
+    const isMilestones = this.incentive.type === IncentiveType.milestones;
+    const positionText = ((_a = this.score) === null || _a === void 0 ? void 0 : _a.position) && getPositionText(this.score.position);
+    const progressBaseValue = getIncentiveProgressBase(this.incentive, this.score, this.showManagerView);
+    const progressBaseText = appendIncentiveUnit(progressBaseValue, isMilestones ? null : this.incentive.unit, this.incentive.isUnitCurrency, false);
+    const progressOfValue = getIncentiveProgressOf(this.incentive, this.score, this.showManagerView);
+    const progressOfText = progressOfValue && appendIncentiveUnit(progressOfValue, this.incentive.unit, this.incentive.isUnitCurrency, false);
+    const progressPercent = getIncentiveProgress(this.incentive, this.score, this.showManagerView);
+    const leftOverValue = (progressOfValue - progressBaseValue);
+    const progressLeftOver = appendIncentiveUnit(leftOverValue > 0 ? leftOverValue : null, this.incentive.unit, this.incentive.isUnitCurrency);
+    return (h("div", { class: "middle-container" },
+      h("div", { class: "left-container" },
+        !this.showManagerView && isMilestones && positionText && h("div", { class: "position" },
+          h("yoo-tag", { color: "app-color-10", icon: "award-trophy-star", size: "extra-large" }),
+          positionText),
+        h("span", { class: "title-category" }, translate(this.showManagerView ? 'TOTALSALES' : 'SALES')),
+        h("span", { class: "total-number" }, progressBaseText),
+        isMilestones && progressOfText && h("span", { class: "total-description" },
+          translate('INCENTIVESOF'),
+          " ",
+          progressOfText),
+        isMilestones && progressLeftOver && h("yoo-tag", { color: "app-color-10" },
+          progressLeftOver,
+          " ",
+          translate('LEFT')),
+        isMilestones &&
+          h("div", { class: "progress-container" },
+            h("yoo-progress-bar", { value: (progressPercent || 0) * 100, shape: "line", percentValueColorScheme: true }))),
+      h("div", { class: "right-container" },
+        h("span", { class: "title-category" }, translate('PERFORMANCEEVOLUTIONINCENTIVES')),
+        this.renderChart())));
+  }
+  renderWebBottomContainer() {
+    var _a, _b;
+    return (h("div", { class: "bottom-container" },
+      !!((_a = this.salesBreakdown) === null || _a === void 0 ? void 0 : _a.length) && h("div", { class: "box" },
+        h("div", { class: "subtitle" }, translate('SALESBREAKDOWN')),
+        this.renderSalesBreakdown()),
+      !!this.targets.length && h("div", { class: "box milestones" },
+        h("div", { class: "subtitle" }, translate('MILESTONES')),
+        this.renderTargets()),
+      h("div", { class: "box" },
+        h("div", { class: "subtitle" }, translate('INCENTIVELEADERBOARD')),
+        h("div", { class: "box-content leaderboard" },
+          h("slot", null))),
+      !((_b = this.salesBreakdown) === null || _b === void 0 ? void 0 : _b.length) && h("div", { class: "box" })));
+  }
   renderWeb() {
-    var _a, _b, _c, _d;
-    // display the unit near the total progress only if this is a currency, or if the type of the incentive is not 'milestones'
-    const isMilestones = (this.incentive.type === IncentiveType.milestones);
-    const progressBaseUnit = this.incentive.isUnitCurrency ? this.incentive.unit : (isMilestones ? null : this.incentive.unit);
-    const progressBase = appendIncentiveUnit(getIncentiveTotalKpis(this.incentive), progressBaseUnit, this.incentive.isUnitCurrency, false);
-    let progressOf = null;
-    let progressPercent = null;
-    if (isMilestones) {
-      progressOf = appendIncentiveUnit(getIncentiveTotalTargets(this.incentive), this.incentive.unit, this.incentive.isUnitCurrency, false);
-      progressPercent = getIncentiveProgress(this.incentive);
-    }
     return (h("div", { class: "outer-container web" },
-      h("div", { class: "top-container" },
-        h("div", { class: "image-container" },
-          h("yoo-img", { type: "background", src: (_b = (_a = this.incentive) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b._downloadURL.toString() })),
-        h("div", { class: "description-container" },
-          h("div", { class: "heading-container" },
-            h("span", { class: "title" }, this.incentive.title)),
-          h("div", { class: "info-container" },
-            this.renderTypes(),
-            this.renderDateRange(),
-            this.renderDate(),
-            this.renderOwner()),
-          this.incentive.description && h("div", { class: "description" }, this.incentive.description),
-          h("div", { class: "tags-container" }, this.renderTags()))),
-      h("div", { class: "middle-container" },
-        h("div", { class: "left-container" },
-          h("span", { class: "title-category" }, translate('TOTALSALES')),
-          h("div", null,
-            h("span", { class: "total-number" }, progressBase),
-            progressOf && h("span", { class: "total-description" },
-              translate('INCENTIVESOF'),
-              " ",
-              progressOf)),
-          this.incentive.type === IncentiveType.milestones &&
-            h("div", { class: "progress-container" },
-              h("yoo-progress-bar", { value: (progressPercent || 0) * 100, shape: "circle", percentValueColorScheme: true }),
-              h("span", { class: "progress-bar-description" }, translate('INCENTIVEGENERALTARGET')))),
-        h("div", { class: "right-container" },
-          h("span", { class: "title-category" }, translate('PERFORMANCEEVOLUTIONINCENTIVES')),
-          this.renderChart())),
-      h("div", { class: "bottom-container" },
-        !!((_c = this.salesBreakdown) === null || _c === void 0 ? void 0 : _c.length) && h("div", { class: "box" },
-          h("div", { class: "subtitle" }, translate('SALESBREAKDOWN')),
-          this.renderSalesBreakdown()),
-        !!this.targets.length && h("div", { class: "box milestones" },
-          h("div", { class: "subtitle" }, translate('INCENTIVETARGETS')),
-          this.renderTargets()),
-        h("div", { class: "box" },
-          h("div", { class: "subtitle" }, translate('INCENTIVELEADERBOARD')),
-          h("div", { class: "box-content leaderboard" },
-            h("slot", null))),
-        !((_d = this.salesBreakdown) === null || _d === void 0 ? void 0 : _d.length) && h("div", { class: "box" }))));
+      this.renderWebTopContainer(),
+      this.renderWebMiddleContainer(),
+      this.renderWebBottomContainer()));
   }
   render() {
     if (!this.incentive) {
@@ -311,6 +331,23 @@ export class YooIncentiveDetailComponent {
         "tags": [],
         "text": ""
       }
+    },
+    "showManagerView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-manager-view",
+      "reflect": false
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -33,7 +33,7 @@ export class YooCardPlanComponent {
         "references": {
           "ICardListEntry": {
             "location": "import",
-            "path": "../../../interfaces"
+            "path": "@shared/interfaces"
           }
         }
       },

package/dist/collection/feature-operate/campaign/card-campaign/card-campaign.css

@@ -202,7 +202,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 /* spacing for padding, margin, etc... */
 /* shadow */
 :host yoo-kpi-card {
-  --value-direction: column-reverse;
+  --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);

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

@@ -143,7 +143,7 @@ export class YooDetailBarComponent {
           translate('LESSONS'))) : (h("div", null,
           this.getFieldsLength(),
           " ",
-          translate('FIELDS')))),
+          translate('YOOBICFIELDS')))),
       !this.isCourse && (h("yoo-button", { color: "light", size: "small", onClick: () => this.onPreview() },
         translate('OPENPREVIEW'),
         h("yoo-icon", { slot: "end", name: "view", size: "small" })))));

package/dist/collection/feature-operate/campaign/helpers/operation-helpers.js

@@ -293,7 +293,12 @@ export function cleanupTodoTaskSlides(slidesTodoTask, cleanDueDate) {
     slidesTodoTask.forEach((s) => {
       var _a;
       (_a = s === null || s === void 0 ? void 0 : s.items) === null || _a === void 0 ? void 0 : _a.forEach((f) => {
-        if (f.name === 'allowLibrary' || f.name === 'finished' || f.name === 'hasphoto' || f.name === 'isphotorequired' || f.name === 'text' || (f.name === 'duedate' && cleanDueDate)) {
+        if (f.name === 'allowLibrary' ||
+          f.name === 'finished' ||
+          f.name === 'hasphoto' ||
+          f.name === 'isphotorequired' ||
+          f.name === 'text' ||
+          (f.name === 'duedate' && cleanDueDate)) {
           f.deleteOnHidden = false;
           f.hideInReadOnly = true;
         }
@@ -303,11 +308,19 @@ export function cleanupTodoTaskSlides(slidesTodoTask, cleanDueDate) {
   return slidesTodoTask;
 }
 export function getCampaignStateTags(campaign, removeStats) {
-  var _a, _b;
+  var _a, _b, _c;
   const retVal = [];
   if (!campaign) {
     return [];
   }
+  if (((_a = campaign === null || campaign === void 0 ? void 0 : campaign.reviewState) === null || _a === void 0 ? void 0 : _a.state) && campaign.reviewState.state !== 'cancel') {
+    const icon = campaign.reviewState.state === 'request' ? 'eye' : campaign.reviewState.state === 'reject' ? 'warning' : 'like';
+    const color = campaign.reviewState.state === 'request' ? 'warning' : campaign.reviewState.state === 'reject' ? 'danger' : 'success';
+    retVal.push({
+      innerHTML: `<yoo-icon slot="start" name="${icon}" color="light" size="small"></yoo-icon>` + translate('YOOBICCAMPAIGNREVIEWSTATE' + campaign.reviewState.state.toUpperCase()),
+      color
+    });
+  }
   if (campaign.uniqueKeyPrefix) {
     retVal.push({
       innerHTML: campaign.uniqueKeyPrefix,
@@ -333,13 +346,13 @@ export function getCampaignStateTags(campaign, removeStats) {
       iconOnlySize: 'medium'
     });
   }
-  if ((_a = campaign.type) === null || _a === void 0 ? void 0 : _a.toUpperCase) {
+  if ((_b = campaign.type) === null || _b === void 0 ? void 0 : _b.toUpperCase) {
     retVal.push({
       innerHTML: translate(campaign.type === 'todo' ? 'CAMPAIGNTODO' : campaign.type.toUpperCase()),
       color: campaign.active ? 'app-color-10' : 'text-color-10'
     });
   }
-  if ((_b = campaign.category) === null || _b === void 0 ? void 0 : _b.title) {
+  if ((_c = campaign.category) === null || _c === void 0 ? void 0 : _c.title) {
     retVal.push({
       innerHTML: translate(campaign.category.title),
       customColor: campaign.category.color

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js

@@ -46,8 +46,8 @@ export class YooAnnouncementHeadingComponent {
   }
   renderPublicationDate() {
     const date = getMissionPublicationDate(this.announcement);
-    let dateText = isToday(date) ? translate('TODAY') : fromToday(date);
-    dateText = [translate('YESTERDAY'), translate('TOMORROW')].includes(dateText) ? dateText : dateText;
+    let dateText = isToday(date) ? translate('YOOBICTODAY') : fromToday(date);
+    dateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dateText) ? dateText : dateText;
     const timeText = translate('SCHEDULEDATTIME', { time: dateFormat(date, 'LT') });
     return this.renderTag(`${dateText} ${timeText}`, 'calendar', this.isLayoutFeed && this.hasPhotos ? getCssColor('light') : null);
   }
@@ -65,8 +65,8 @@ export class YooAnnouncementHeadingComponent {
     }
   }
   renderDueDate(dueDate) {
-    let dateText = isToday(dueDate) ? translate('TODAY').toLowerCase() : fromToday(dueDate);
-    dateText = [translate('YESTERDAY'), translate('TOMORROW')].includes(dateText) ? dateText.toLowerCase() : dateText;
+    let dateText = isToday(dueDate) ? translate('YOOBICTODAY').toLowerCase() : fromToday(dueDate);
+    dateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dateText) ? dateText.toLowerCase() : dateText;
     const title = translate('YOOBICDUEBY', { date: dateText, time: dateFormat(dueDate, 'LT') });
     const color = isDateAfter(dueDate, new Date(), 'day') ? this.color : getCssColor('danger');
     return this.renderTag(title, 'calendar-date', color);

package/dist/collection/feature-operate/mission/helpers/missions-helpers.js

@@ -58,9 +58,9 @@ export function getMissionDate(mission, isOngoing) {
   }
   return getMissionPublicationDate(mission);
 }
-function getMissionProgress(mission, forceProgressDisplay) {
+export function getMissionProgress(mission, forceProgressDisplay) {
   var _a, _b;
-  const isActionPlanWithTodos = isMissionActionPlan(mission) && !!((_b = (_a = mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length);
+  const isActionPlanWithTodos = !!((_b = (_a = mission === null || mission === void 0 ? void 0 : mission.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) && isMissionActionPlan(mission);
   if (isActionPlanWithTodos && (!isMissionDone(mission) || forceProgressDisplay)) {
     return {
       value: mission.todo.values.filter((todo) => { var _a, _b; return ((_a = todo.finished) === null || _a === void 0 ? void 0 : _a.value) === true || ((_b = todo.finished) === null || _b === void 0 ? void 0 : _b.value) === false; }).length,
@@ -143,8 +143,8 @@ export function getMissionTags(mission, session = getSession()) {
   else {
     const duedate = getMissionDueDate(mission);
     if (duedate) {
-      let dueDateText = isToday(duedate) ? translate('TODAY').toLowerCase() : fromToday(duedate);
-      dueDateText = [translate('YESTERDAY'), translate('TOMORROW')].includes(dueDateText) ? dueDateText.toLowerCase() : dueDateText;
+      let dueDateText = isToday(duedate) ? translate('YOOBICTODAY').toLowerCase() : fromToday(duedate);
+      dueDateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dueDateText) ? dueDateText.toLowerCase() : dueDateText;
       const title = translate('YOOBICDUEBY', { date: dueDateText, time: dateFormat(duedate, 'LT') });
       const color = isDateAfter(duedate, new Date(), 'day') ? 'text-color' : 'danger';
       tags.push({ _id: 'dueDate', title, customColor: getCssColor(color), icon: 'calendar' });
@@ -344,8 +344,8 @@ export function getMissionStateTags(mission, session, includeUniqueKey, includeV
     });
     const duedate = getMissionDueDate(mission);
     if (duedate) {
-      let dueDateText = isToday(duedate) ? translate('TODAY').toLowerCase() : fromToday(duedate);
-      dueDateText = [translate('YESTERDAY'), translate('TOMORROW')].includes(dueDateText) ? dueDateText.toLowerCase() : dueDateText;
+      let dueDateText = isToday(duedate) ? translate('YOOBICTODAY').toLowerCase() : fromToday(duedate);
+      dueDateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dueDateText) ? dueDateText.toLowerCase() : dueDateText;
       const text = translate('YOOBICDUEBY', { date: dueDateText, time: dateFormat(duedate, 'LT') });
       const color = isDateAfter(duedate, new Date(), 'day') ? 'text-color' : 'danger';
       tags.push({

package/dist/collection/feature-operate/mission/mission-details/mission-details.js

@@ -185,8 +185,8 @@ export class YooMissionDetailsComponent {
   }
   renderDate(text, date, icon, color) {
     if (date) {
-      let dateText = isToday(date) ? translate('TODAY') : fromToday(date);
-      dateText = [translate('YESTERDAY'), translate('TOMORROW')].includes(dateText) ? dateText : dateText;
+      let dateText = isToday(date) ? translate('YOOBICTODAY') : fromToday(date);
+      dateText = [translate('YOOBICYESTERDAY'), translate('YOOBICTOMORROW')].includes(dateText) ? dateText : dateText;
       const timeText = translate('SCHEDULEDATTIME', { time: dateFormat(date, 'LT') });
       return (h(Menu, { icon: icon || 'calendar', text: text },
         h("yoo-tag", { customColor: getCssColor(color || 'text-color') }, `${dateText} ${timeText}`)));
@@ -422,7 +422,7 @@ export class YooMissionDetailsComponent {
   renderActionPlanDetails() {
     return (h("div", { class: 'mission-detail ' + (this.isMobile ? '' : 'web') },
       h("div", { class: "mission-content" },
-        h("yoo-mission-heading", { animated: this.animated, mission: this.mission, progress: this.progress && this.progress.value && this.progress.value }),
+        h("yoo-mission-heading", { animated: this.animated, mission: this.mission }),
         h("ul", { class: { menu: true, pdf: this.isPdf } },
           this.renderValidatedReason('REASON', 'reason', this.mission.originalUnvalidatedReason),
           this.renderOriginalValidatedBy(),

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.css

@@ -210,6 +210,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host yoo-progress-bar {
   --progress-bar-color: var(--app-color, #5a30f4);
 }
+:host yoo-truncate {
+  color: var(--app-color, #5a30f4);
+}
 :host yoo-banner {
   --main-color: var(--warning-10, rgba(237, 110, 51, 0.1));
   margin-top: var(--spacing-08, 0.5rem);
@@ -235,6 +238,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   max-width: 10rem;
   margin-right: var(--spacing-08, 0.5rem);
 }
+:host .sub-heading .action-plan-progress {
+  display: flex;
+  align-items: center;
+  max-width: 11rem;
+  margin-right: var(--spacing-08, 0.5rem);
+}
+:host .sub-heading .action-plan-progress yoo-progress-bar {
+  width: var(--spacing-16, 1rem);
+}
+:host .sub-heading .action-plan-progress yoo-truncate {
+  margin: 0 var(--spacing-08, 0.5rem);
+}
 :host div:last-child {
   margin-bottom: 0;
 }

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.js

@@ -1,6 +1,6 @@
 import { isIonic, translate, translateMulti } from '@shared/utils';
 import { Component, Element, h, Host, Prop } from '@stencil/core';
-import { getMissionTags } from '../../../feature-operate/mission/helpers/missions-helpers';
+import { getMissionProgress, getMissionTags } from '../../../feature-operate/mission/helpers/missions-helpers';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { MissionLockedBanner } from '../mission-locked-banner/mission-locked-banner';
 export class YooMissionHeadingComponent {
@@ -10,9 +10,26 @@ export class YooMissionHeadingComponent {
   componentWillLoad() {
     this.isMobile = isIonic(this.host);
   }
+  renderActionPlanProgress() {
+    const actionProgress = getMissionProgress(this.mission);
+    if ((actionProgress === null || actionProgress === void 0 ? void 0 : actionProgress.value) >= 0) {
+      return h("div", { class: { 'action-plan-progress': true, 'mission-progress-web': !this.isMobile } },
+        h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: actionProgress.value, metric: actionProgress.unit, maxValue: actionProgress.max }),
+        h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
+          h("span", null, translate('ACTIONSCOMPLETED', { smart_count: actionProgress.value, total: actionProgress.max }))));
+    }
+    return null;
+  }
+  renderMissionProgress() {
+    if (this.progress >= 0) {
+      return h("div", { class: { 'mission-progress': true, 'mission-progress-web': !this.isMobile } },
+        h("yoo-progress-bar", { animated: this.animated, value: this.progress }));
+    }
+  }
   render() {
     const excludedTags = ['dueDate', 'category', 'progress'];
     const tags = getMissionTags(this.mission).filter((tag) => !excludedTags.includes(tag._id));
+    const isActionPlan = this.mission.type === 'todo';
     return (h(Host, { class: getAppContext(this.host) },
       h("div", { class: { 'background-container': true, pdf: this.isPdf } },
         h("div", { class: "content-container" },
@@ -21,8 +38,8 @@ export class YooMissionHeadingComponent {
             !this.isPdf && this.mission.title && h("div", { class: "mission-title" }, translateMulti(this.mission.title)),
             !this.mission.title && this.mission.type === 'visit' && h("div", { class: "mission-title" }, translate('VISIT')),
             h("div", { class: "sub-heading" },
-              this.progress >= 0 && (h("div", { class: { 'mission-progress': true, 'mission-progress-web': !this.isMobile } },
-                h("yoo-progress-bar", { animated: this.animated, value: this.progress }))), tags === null || tags === void 0 ? void 0 :
+              isActionPlan && this.renderActionPlanProgress(),
+              !isActionPlan && this.renderMissionProgress(), tags === null || tags === void 0 ? void 0 :
               tags.map((tag) => {
                 const tagDefaultColor = tag.customColor ? null : 'stable';
                 return (h("yoo-tag", { color: tag.color || tagDefaultColor, customColor: tag.customColor },

package/dist/collection/feature-platform/app/widget-tab/widget-tab.css

@@ -284,4 +284,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host(:not([disabled]):not([is-active])) .outer-container {
   color: var(--app-color, #5a30f4);
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
+}
+
+:host(.medium) .value {
+  font-size: var(--font-size-28, 1.75rem);
 }

package/dist/collection/interfaces/ui/index.js

@@ -1,7 +1,4 @@
-export * from './avatar.interface';
-export * from './card.interface';
 export * from './card-chat.interface';
-export * from './card-media.interface';
 export * from './card-video.interface';
 export * from './draggable.interface';
 export * from './form-creator.interface';

package/dist/collection/utils/button.factory.js

@@ -1,6 +1,7 @@
+import { translateMulti } from '@shared/utils-login';
 import { h } from '@stencil/core';
 export const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },
-    button.text,
+    translateMulti(button.text),
     button.icon && h("yoo-icon", { name: button.icon, slot: button.iconSlot, size: button.iconSize || 'medium', color: button.iconColor }))) : null;
 };

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

@@ -195,12 +195,14 @@ export function filterRenderFormDynamic(filteredFields, filters, formAutocomplet
       if (dynamic) {
         const filter = filters.find((f) => f.fieldname === field.name);
         if (filter) {
+          newField.tmpSelection = filter.tmpSelection;
           set(data, dynamic ? newField.name : field.name, filter.values);
         }
       }
       else {
         const filter = filters.find((f) => f.fieldname === field.name && f.fieldfiltername === (field.filterName || field.name) && (f.fieldname !== 'tags' || f.collectionName === field.collectionName));
         if (filter) {
+          newField.tmpSelection = filter.tmpSelection;
           set(data, dynamic ? newField.name : field.name, filter.values);
         }
       }

package/dist/design-system/{button.factory-319699ea.js → button.factory-fc66c65f.js}

@@ -1,8 +1,10 @@
+import './index-e1933d4a.js';
 import { h } from './index-019c1b1a.js';
+import { T as translateMulti } from './index-5242545a.js';
 
 const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },
-    button.text,
+    translateMulti(button.text),
     button.icon && h("yoo-icon", { name: button.icon, slot: button.iconSlot, size: button.iconSize || 'medium', color: button.iconColor }))) : null;
 };
 

package/dist/design-system/{camera-helpers-74eb636a.js → camera-helpers-64e06b9f.js}

@@ -1,4 +1,4 @@
-import { c3 as cordova, c4 as IonicNativePlugin, cf as cordovaPropertyGet, cg as cordovaPropertySet, ch as registerPlugin, _ as getSession, ci as isIonic, d as isNativeMobile, cj as Device, e as isAndroid, v as isIOS, ck as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-16ec3116.js';
+import { c3 as cordova, c4 as IonicNativePlugin, cf as cordovaPropertyGet, cg as cordovaPropertySet, ch as registerPlugin, _ as getSession, ci as isIonic, d as isNativeMobile, cj as Device, e as isAndroid, v as isIOS, ck as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-5242545a.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -205,7 +205,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-2f7b9722.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-4899976c.js').then(m => new m.CameraWeb()),
 });
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/design-system/{chat-helpers-6d14c0c0.js → chat-helpers-4658f38c.js}

@@ -1,4 +1,4 @@
-import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-16ec3116.js';
+import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-5242545a.js';
 import { a as isArray } from './lodash-b0ad17f3.js';
 
 /**

package/dist/{esm/common-helpers-162a2c9d.js → design-system/common-helpers-d0a7d41f.js}

@@ -1,4 +1,4 @@
-import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-16ec3116.js';
+import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-5242545a.js';
 import { A as get } from './lodash-b0ad17f3.js';
 
 function getDefaultModalAnimation() {

package/dist/design-system/design-system.css

@@ -8425,7 +8425,7 @@ span.fr-img-caption.fr-view {
   align-items: center;
   -ms-flex-pack: center;
   justify-content: center;
-  min-width: 30px;
+  min-width: 1.6875rem;
   height: 2rem;
   margin: 0;
   color: var(--dark, #000000);
@@ -8459,7 +8459,6 @@ span.fr-img-caption.fr-view {
 .royal-theme.fr-toolbar {
   color: var(--dark, #000000);
   background: var(--light, #ffffff);
-  border-radius: 0 !important;
 }
 .royal-theme.fr-toolbar .fr-more-toolbar.fr-expanded {
   height: 32px;
@@ -8531,19 +8530,22 @@ yoo-form-text-editor .fullscreen .fr-wrapper {
 yoo-form-text-editor .fullscreen .fr-wrapper iframe {
   height: 100% !important;
 }
-yoo-form-text-editor .fullscreen .royal-theme.fr-toolbar .fr-command.fr-btn,
-yoo-form-text-editor .fullscreen .royal-theme.fr-popup .fr-command.fr-btn,
-yoo-form-text-editor .fullscreen .royal-theme.fr-modal .fr-command.fr-btn {
+yoo-form-text-editor .fullscreen .royal-theme.fr-toolbar.fr-top:not(.fr-desktop) {
+  padding-top: 2rem;
+}
+yoo-form-text-editor .fullscreen .royal-theme.fr-toolbar:not(.fr-mobile) .fr-command.fr-btn,
+yoo-form-text-editor .fullscreen .royal-theme.fr-popup:not(.fr-mobile) .fr-command.fr-btn,
+yoo-form-text-editor .fullscreen .royal-theme.fr-modal:not(.fr-mobile) .fr-command.fr-btn {
   min-width: 2.2rem;
   height: 4rem;
 }
-yoo-form-text-editor .fullscreen .royal-theme.fr-toolbar .fr-command.fr-btn svg.fr-svg,
-yoo-form-text-editor .fullscreen .royal-theme.fr-popup .fr-command.fr-btn svg.fr-svg,
-yoo-form-text-editor .fullscreen .royal-theme.fr-modal .fr-command.fr-btn svg.fr-svg {
+yoo-form-text-editor .fullscreen .royal-theme.fr-toolbar:not(.fr-mobile) .fr-command.fr-btn svg.fr-svg,
+yoo-form-text-editor .fullscreen .royal-theme.fr-popup:not(.fr-mobile) .fr-command.fr-btn svg.fr-svg,
+yoo-form-text-editor .fullscreen .royal-theme.fr-modal:not(.fr-mobile) .fr-command.fr-btn svg.fr-svg {
   width: 1.2rem;
   height: 1.2rem;
 }
-yoo-form-text-editor .fullscreen .royal-theme.fr-toolbar .fr-more-toolbar.fr-expanded {
+yoo-form-text-editor .fullscreen .royal-theme.fr-toolbar:not(.fr-mobile) .fr-more-toolbar.fr-expanded {
   height: 4rem;
 }