@yoobic/yobi 8.5.0-45 → 8.5.0-47

package/dist/collection/feature-learn/learning/battle-result/battle-result.css

@@ -310,7 +310,7 @@ svg:not(:root) {
   margin-right: 5px;
 }
 :host .bottom-container .inner-container .score-container .score.user {
-  margin-right: 0.625rem;
+  margin-right: var(--spacing-12, 0.75rem);
   text-align: flex-start;
   background-color: var(--app-color, #5a30f4);
 }
@@ -321,4 +321,14 @@ svg:not(:root) {
 :host .bottom-container .inner-container .score-container .score.waiting {
   padding: 0 0.78rem;
   background-color: var(--stable-light, #f1f1f1);
+}
+
+:host(.rtl) .bottom-container .users-container .opponent-name {
+  padding-right: 0;
+  padding-left: var(--spacing-08, 0.5rem);
+  text-align: left;
+}
+:host(.rtl) .bottom-container .inner-container .score-container .score.user {
+  margin-right: 0;
+  margin-left: var(--spacing-12, 0.75rem);
 }

package/dist/collection/feature-learn/learning/battle-result/battle-result.js

@@ -1,4 +1,4 @@
-import { Elastic, gsapTimeline, translate } from '@shared/utils';
+import { Elastic, gsapTimeline, isRTL, translate } from '@shared/utils';
 import { Build, getAssetPath, h, Host } from '@stencil/core';
 export class YooBattleResultComponent {
   constructor() {
@@ -135,7 +135,7 @@ export class YooBattleResultComponent {
   render() {
     var _a;
     const style = { 'background-image': `url(${this.isWon ? this.yellowBackground : this.greyBackground})` };
-    return (h(Host, null, h("div", { class: { 'top-container': true, [this.entry.battleStatus]: true }, style: style }, h("div", { class: "result-container" }, h("div", { class: "result-title" }, translate(this.resultState.title)), h("div", { class: "result-message" }, translate(this.resultState.message))), h("div", { class: "image-container" }, this.resultState.emptyState ? (h("yoo-empty-state", { ref: (el) => (this.emptyStateElement = el), type: this.resultState.image })) : (h("yoo-img", { ref: (el) => (this.imageElement = el), src: this.resultState.image })), h("div", { class: "image-shadow" }))), h("div", { class: "bottom-container" }, this.renderUsers(), this.scoreContent && this.renderInnerContainer(this.scoreContent), this.timeContent && this.renderInnerContainer(this.timeContent), this.starContent && this.renderInnerContainer(this.starContent), ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan) && this.renderCourse()), h("div", { class: "scroll-spacer" })));
+    return (h(Host, { class: { rtl: isRTL() } }, h("div", { class: { 'top-container': true, [this.entry.battleStatus]: true }, style: style }, h("div", { class: "result-container" }, h("div", { class: "result-title" }, translate(this.resultState.title)), h("div", { class: "result-message" }, translate(this.resultState.message))), h("div", { class: "image-container" }, this.resultState.emptyState ? (h("yoo-empty-state", { ref: (el) => (this.emptyStateElement = el), type: this.resultState.image })) : (h("yoo-img", { ref: (el) => (this.imageElement = el), src: this.resultState.image })), h("div", { class: "image-shadow" }))), h("div", { class: "bottom-container" }, this.renderUsers(), this.scoreContent && this.renderInnerContainer(this.scoreContent), this.timeContent && this.renderInnerContainer(this.timeContent), this.starContent && this.renderInnerContainer(this.starContent), ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan) && this.renderCourse()), h("div", { class: "scroll-spacer" })));
   }
   static get is() { return "yoo-battle-result"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/feature-learn/learning/battle-user-stats/battle-user-stats.css

@@ -319,4 +319,9 @@ svg:not(:root) {
 :host(.web) .outer-container .blob-container .description-container yoo-icon {
   position: relative;
   margin: 0 var(--spacing-24, 1.5rem);
+}
+
+:host(.rtl) .outer-container .user-details {
+  padding-right: var(--spacing-16, 1rem);
+  padding-left: 0;
 }

package/dist/collection/feature-learn/learning/battle-user-stats/battle-user-stats.js

@@ -1,6 +1,6 @@
 import { gsapTimeline, isWeb, translate } from '@shared/utils';
 import { Build, getAssetPath, h, Host } from '@stencil/core';
-import { setColorSVG } from '../../../utils/helpers/common-helpers';
+import { getAppContext, setColorSVG } from '../../../utils/helpers/common-helpers';
 export class YooBattleUserStatsComponent {
   constructor() {
     /**
@@ -51,7 +51,7 @@ export class YooBattleUserStatsComponent {
     return (h("div", { class: "outer-container" }, h("div", { class: "avatar-container" }, h("yoo-img", { class: "avatar-blob", src: this.avatarBlogSvg, svgOptions: { beforeInject: (_, svg) => setColorSVG(svg, 'app-color') } }), h("yoo-avatar", { size: "extra-extra-large", user: this.user })), h("div", { class: "user-details" }, h("div", { class: "user-name" }, h("span", null, this.user.firstName || '', " ", this.user.lastName || '')), h("div", { class: "battle-count" }, h("span", null, this.victories + this.defeats, " ", translate('BATTLES'))), h("div", { class: "point-count" }, this.renderPointsTag('energized', 'energized-10'))), this.renderStatsContainers(), h("div", { class: "blob-container" }, h("yoo-img", { class: "blob-image", src: this.blobSvg, svgOptions: { beforeInject: (_, svg) => setColorSVG(svg, 'app-color') } }), h("div", { class: "description-container" }, h("div", { class: "text-container" }, h("p", null, translate('BATTLEDESCRIPTION1')), h("p", null, translate('BATTLEDESCRIPTION2'))), h("yoo-icon", { size: "extra-extra-large", name: "battle", color: "light" })))));
   }
   render() {
-    return h(Host, { class: { web: isWeb(this.host) } }, isWeb(this.host) ? this.renderWeb() : this.renderMobile());
+    return h(Host, { class: getAppContext(this.host) }, isWeb(this.host) ? this.renderWeb() : this.renderMobile());
   }
   static get is() { return "yoo-battle-user-stats"; }
   static get encapsulation() { return "shadow"; }

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

@@ -481,4 +481,8 @@ svg:not(:root) {
 }
 :host(.no-border-bottom.mobile) .outer-container .content-container {
   padding-bottom: 0;
+}
+
+:host(.rtl) .outer-container .content-container {
+  margin: 0 0.75rem 0 0;
 }

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

@@ -231,4 +231,8 @@ svg:not(:root) {
 }
 :host .information {
   margin-left: var(--spacing-08, 0.5rem);
+}
+
+:host(.rtl) yoo-img {
+  margin-left: var(--spacing-08, 0.5rem);
 }

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

@@ -1,7 +1,7 @@
-import { translateMulti } from '@shared/utils';
+import { isNullOrUndefined, isRTL, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { clamp } from 'lodash-es';
-const getRoundedPositive = (value) => (value == null || value < 0 ? 0 : Math.round(value));
+const getRoundedPositive = (value) => (isNullOrUndefined(value) || value < 0 ? 0 : Math.round(value));
 export class YooCardCourseRowCompactComponent {
   constructor() {
     /**
@@ -15,7 +15,7 @@ export class YooCardCourseRowCompactComponent {
     const earnedPoints = clamp(availablePoints, getRoundedPositive(this.earnedPoints));
     const finishedLessons = clamp(availableLessons, getRoundedPositive(this.finishedLessons));
     const image = this.image || {};
-    return (h(Host, null, h("yoo-img", { instant: image.instant, src: image.src }), h("div", { class: "information" }, h("div", { class: "indicators" }, h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, h("yoo-icon", { color: "app-color", name: "star", size: "extra-small", slot: "start" }), earnedPoints, "/", availablePoints), h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, h("yoo-icon", { color: "text-color", name: "lesson", size: "extra-small", slot: "start" }), finishedLessons, "/", availableLessons), h("yoo-progress-bar", { animated: this.animated, value: availableLessons === 0 ? 0 : (finishedLessons / availableLessons) * 100 })), h("yoo-truncate", null, translateMulti(this.heading)))));
+    return (h(Host, { class: { rtl: isRTL() } }, h("yoo-img", { instant: image.instant, src: image.src }), h("div", { class: "information" }, h("div", { class: "indicators" }, h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, h("yoo-icon", { color: "app-color", name: "star", size: "extra-small", slot: "start" }), earnedPoints, "/", availablePoints), h("yoo-tag", { size: "extra-small", color: "dark", noBackground: true }, h("yoo-icon", { color: "text-color", name: "lesson", size: "extra-small", slot: "start" }), finishedLessons, "/", availableLessons), h("yoo-progress-bar", { animated: this.animated, value: availableLessons === 0 ? 0 : (finishedLessons / availableLessons) * 100 })), h("yoo-truncate", null, translateMulti(this.heading)))));
   }
   static get is() { return "yoo-card-course-row-compact"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/feature-learn/learning/card-menu/card-menu.css

@@ -209,7 +209,7 @@ svg:not(:root) {
   --counter-color: var(--dark, #000000);
   --icon-color: var(--dark, #000000);
   --icon-background-color: transparent;
-  --icon-margin-left: 0;
+  --icon-margin-start: 0;
   --icon-border-radius: 0;
   --icon-padding: 0;
   --icon-end-display: initial;
@@ -247,7 +247,7 @@ svg:not(:root) {
 }
 :host .outer-container yoo-icon.start {
   margin-right: var(--spacing-08, 0.5rem);
-  margin-left: var(--icon-margin-left);
+  margin-left: var(--icon-margin-start);
   padding: var(--icon-padding);
   background-color: var(--icon-background-color);
   border-radius: var(--icon-border-radius);
@@ -270,4 +270,13 @@ svg:not(:root) {
 }
 :host(.web.selected) .outer-container yoo-icon {
   fill: var(--app-color, #5a30f4);
+}
+
+:host(.rtl) .outer-container {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+:host(.rtl) .outer-container yoo-icon.start {
+  margin-right: var(--icon-margin-start);
+  margin-left: var(--spacing-08, 0.5rem);
 }

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

@@ -13,7 +13,7 @@ export class YooCardMenuComponent {
   }
   render() {
     var _a, _b, _c, _d;
-    return (h(Host, { class: getAppContext(this.el) }, h("div", { class: "outer-container", style: { 'background-color': (_a = this.entry) === null || _a === void 0 ? void 0 : _a.backgroundCustomColor } }, h("yoo-icon", { class: "start", name: this.renderIcon(), size: this.sizeLeftIcon || 'medium', customColor: (_b = this.entry) === null || _b === void 0 ? void 0 : _b.iconCustomColor, style: { 'background-color': ((_c = this.entry) === null || _c === void 0 ? void 0 : _c.iconBackgroundColor) || 'transparent' } }), h("div", { class: "title", style: { 'color': (_d = this.entry) === null || _d === void 0 ? void 0 : _d.titleCustomColor } }, translateMulti(this.entry.title)), this.entry.count !== null && h("div", { class: "counter" }, this.entry.count), h("yoo-icon", { class: "end", size: this.sizeLeftIcon || 'medium', name: this.typeRightIcon || 'right', color: "stable" }))));
+    return (h(Host, { class: getAppContext(this.host) }, h("div", { class: "outer-container", style: { 'background-color': (_a = this.entry) === null || _a === void 0 ? void 0 : _a.backgroundCustomColor } }, h("yoo-icon", { class: "start", name: this.renderIcon(), size: this.sizeLeftIcon || 'medium', customColor: (_b = this.entry) === null || _b === void 0 ? void 0 : _b.iconCustomColor, style: { 'background-color': ((_c = this.entry) === null || _c === void 0 ? void 0 : _c.iconBackgroundColor) || 'transparent' } }), h("div", { class: "title", style: { 'color': (_d = this.entry) === null || _d === void 0 ? void 0 : _d.titleCustomColor } }, translateMulti(this.entry.title)), this.entry.count !== null && h("div", { class: "counter" }, this.entry.count), h("yoo-icon", { class: "end", size: this.sizeLeftIcon || 'medium', name: this.typeRightIcon || 'right', color: "stable" }))));
   }
   static get is() { return "yoo-card-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -95,5 +95,5 @@ export class YooCardMenuComponent {
       }
     };
   }
-  static get elementRef() { return "el"; }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/feature-learn/learning/lesson-detail/lesson-detail.css

@@ -428,4 +428,9 @@ svg:not(:root) {
 }
 :host(.web) .lesson-footer yoo-button {
   margin-right: var(--spacing-08, 0.5rem);
+}
+
+:host(.rtl) .lesson-detail .lesson-content .menu .menu-item .menu-right {
+  margin-right: var(--spacing-08, 0.5rem);
+  margin-left: 0;
 }

package/dist/collection/feature-learn/learning/lesson-heading/lesson-heading.css

@@ -230,7 +230,7 @@ svg:not(:root) {
   color: var(--app-color, #5a30f4);
 }
 :host .heading-container .lesson-date .date-label {
-  margin-right: 0.5rem;
+  margin-right: var(--spacing-08, 0.5rem);
   color: var(--dark, #000000);
 }
 
@@ -243,4 +243,9 @@ svg:not(:root) {
 }
 :host(.web) .heading-container {
   padding: 0 var(--spacing-64, 4rem) var(--spacing-16, 1rem);
+}
+
+:host(.rtl) .heading-container .lesson-date .date-label {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
 }

package/dist/collection/feature-learn/learning/podium/podium.js

@@ -1,4 +1,4 @@
-import { Cloudinary, getCssColor, getUserDisplayName, isWeb, updateSVGCustomColors } from '@shared/utils';
+import { Cloudinary, getCssColor, getUserDisplayName, isRTL, isWeb, updateSVGCustomColors } from '@shared/utils';
 import { getAssetPath, h, Host } from '@stencil/core';
 import { get, isNumber } from 'lodash-es';
 const PODIUM_POSITION = [
@@ -93,7 +93,8 @@ export class YooPodiumComponent {
       if (usernameTextElement && (imageAvatarContainerElement || noImageAvatarContainerElement)) {
         const usernameWidth = usernameTextElement.getBoundingClientRect().width;
         const translateYValue = prefixClass === 'right' ? 60 : prefixClass === 'left' ? -28 : 10;
-        const translateXValue = (avatarWidth - usernameWidth) / 2;
+        let translateXValue = (avatarWidth - usernameWidth) / 2;
+        isRTL() && (translateXValue += usernameWidth);
         usernameTextElement.setAttribute('transform', `translate(${translateXValue}, ${translateYValue})`);
       }
     }
@@ -105,8 +106,10 @@ export class YooPodiumComponent {
       this.displayElement(pointsContainerElement, true);
       if (pointsElement) {
         const pointLength = points.toString().length || 1;
-        const translateX = 4 * (pointLength - 1);
-        pointsElement.setAttribute('transform', pointsTransform.replace('#tslX', `${prefixClass === 'right' ? translateX : -translateX}`));
+        const translateX = isRTL() ? 4 * (pointLength + 1) : 4 * (pointLength - 1);
+        pointsElement.setAttribute('transform', pointsTransform.replace('#tslX', `${prefixClass === 'right'
+          ? isRTL() ? -translateX : translateX
+          : isRTL() ? translateX : -translateX}`));
       }
     }
     else {
@@ -145,6 +148,7 @@ export class YooPodiumComponent {
           const initialUsernameText = (get(user, 'firstName', false) && get(user, 'lastName', false)) ? `${getInitial(user.firstName)}${getInitial(user.lastName)}` : getInitial(user.username);
           if (noImageAvatarContainerElement) {
             this.displayElement(noImageAvatarContainerElement, true);
+            isRTL() && (noImageAvatarContainerElement.setAttribute('style', 'direction: ltr')); //* direction: rtl does some weird stuff and is not needed
             const textElement = noImageAvatarContainerElement.querySelector('tspan');
             textElement.textContent = initialUsernameText;
             noImageAvatarContainerElement.addEventListener('click', () => {

package/dist/collection/feature-operate/mission/card-inbox/card-inbox.css

@@ -292,4 +292,30 @@ svg:not(:root) {
 :host .outer-container yoo-avatar,
 :host .outer-container yoo-avatars {
   margin-right: var(--spacing-08, 0.5rem);
+}
+
+:host(.rtl) yoo-avatar,
+:host(.rtl) yoo-avatars {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+:host(.rtl) .header yoo-icon[name=circle1] {
+  margin-right: 0;
+  margin-left: var(--spacing-04, 0.25rem);
+}
+:host(.rtl) .header yoo-truncate {
+  margin-right: 0;
+  margin-left: var(--spacing-16, 1rem);
+}
+:host(.rtl) .header .sup {
+  margin-right: auto;
+  margin-left: 0;
+}
+:host(.rtl) .content {
+  margin-right: calc(var(--icon-size-00, 0.75rem) + var(--spacing-04, 0.25rem) + var(--spacing-32, 2rem) + var(--spacing-08, 0.5rem));
+  margin-left: 0;
+}
+:host(.rtl) .content .tags yoo-tag {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
 }

package/dist/collection/feature-operate/mission/card-inbox/card-inbox.js

@@ -1,5 +1,5 @@
-import { fromToday, getCssColor, isFieldWithNoValue, isNullOrUndefined, isPresent, isToday, pipes, translate } from '@shared/utils';
-import { h } from '@stencil/core';
+import { fromToday, getCssColor, isFieldWithNoValue, isNullOrUndefined, isPresent, isRTL, isToday, pipes, translate } from '@shared/utils';
+import { h, Host } from '@stencil/core';
 import { isEmpty } from 'lodash-es';
 export class YooCardInboxComponent {
   constructor() {
@@ -74,7 +74,7 @@ export class YooCardInboxComponent {
     var _a, _b, _c, _d, _e;
     const renderSup = !!((_b = (_a = this.entry) === null || _a === void 0 ? void 0 : _a.icons) === null || _b === void 0 ? void 0 : _b.length) || !!((_c = this.entry) === null || _c === void 0 ? void 0 : _c.date);
     const iconColor = ((_d = this.entry) === null || _d === void 0 ? void 0 : _d.iconColor) ? getCssColor(this.entry.iconColor) : null;
-    return (!!this.entry && (h("div", { class: "outer-container" }, h("div", { class: "header" }, h("yoo-icon", { class: { 'unread-state': true, 'read': !this.entry.unread }, name: "circle1", size: "extra-small", color: "app-color" }), this.renderAvatar(), this.renderTitle(), renderSup && (h("div", { class: "sup" }, h("div", null, !!((_e = this.entry.icons) === null || _e === void 0 ? void 0 : _e.length) && this.renderFlags(), !!this.entry.date && fromToday(this.entry.date)), !this.entry.hideDatePrecision && !!this.entry.date && this.renderDatePrecision()))), h("div", { class: "content" }, this.renderTags(), this.renderProgress(), this.renderIdentities(), this.renderNote(), this.renderUIFields()), this.highlight && h("div", { class: "highlight", style: { 'background-color': iconColor || getCssColor('stable') } }))));
+    return (h(Host, { class: { rtl: isRTL() } }, !!this.entry && (h("div", { class: "outer-container" }, h("div", { class: "header" }, h("yoo-icon", { class: { 'unread-state': true, read: !this.entry.unread }, name: "circle1", size: "extra-small", color: "app-color" }), this.renderAvatar(), this.renderTitle(), renderSup && (h("div", { class: "sup" }, h("div", null, !!((_e = this.entry.icons) === null || _e === void 0 ? void 0 : _e.length) && this.renderFlags(), !!this.entry.date && fromToday(this.entry.date)), !this.entry.hideDatePrecision && !!this.entry.date && this.renderDatePrecision()))), h("div", { class: "content" }, this.renderTags(), this.renderProgress(), this.renderIdentities(), this.renderNote(), this.renderUIFields()), this.highlight && h("div", { class: "highlight", style: { 'background-color': iconColor || getCssColor('stable') } })))));
   }
   static get is() { return "yoo-card-inbox"; }
   static get encapsulation() { return "shadow"; }

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

@@ -585,4 +585,9 @@ svg:not(:root) {
 :host(.mission-results-deprecated).inline {
   display: block;
   height: initial;
+}
+
+:host(.rtl) .menu .menu-item .menu-right {
+  margin-right: var(--spacing-08, 0.5rem);
+  margin-left: 0;
 }

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

@@ -467,13 +467,13 @@ export class YooMissionDetailsComponent {
     return (h("div", { class: { 'mission-results': true, pdf: this.isPdf, ...getAppContext(this.host) } }, this.isPdf && (h("div", { class: "header-photo-container" }, ((_b = (_a = this.mission) === null || _a === void 0 ? void 0 : _a.description) === null || _b === void 0 ? void 0 : _b.pdfHeaderPhoto) && h("yoo-img", { class: "header-photo", instant: this.instant, src: this.mission.description.pdfHeaderPhoto }), h("div", { class: "header-content" }, h("div", { class: "title" }, translateMulti((_c = this.mission) === null || _c === void 0 ? void 0 : _c.title)), h("div", { class: "subtitle" }, (_d = this.mission) === null || _d === void 0 ? void 0 : _d.address), h("div", { class: "tag-container" }, this.showInformation && (tags === null || tags === void 0 ? void 0 : tags.map((tag) => h("yoo-tag", { color: tag.color, customColor: tag.customColor, innerHTML: tag.title }))))))), h("div", { class: "content" }, !this.isPdf && this.showInformation && h("yoo-mission-heading", { class: "mission-results", isPdf: this.isPdf, mission: this.mission }), !!menuContent.length && h("ul", { class: { menu: true, pdf: this.isPdf } }, menuContent), h("slot", null), this.showScore && h("yoo-mission-score", { class: "mission-detail", isPdf: this.isPdf, charts: this.charts, networkScore: this.networkScore })), h("slot", { name: "end" })));
   }
   renderDetails() {
-    return this.isTodoMission ? this.renderTodoMissionDetails() : this.renderMissionDetails();
+    return (this.isTodoMission || this.isTodoCampaign) ? this.renderTodoMissionDetails() : this.renderMissionDetails();
   }
   renderResults() {
     return this.isTodoCampaign ? this.renderTodoMissionDetails() : this.renderMissionResults();
   }
   render() {
-    return (h(Host, { class: { 'web': isWeb(), 'mission-results-deprecated': this.isResult && !this.isTodoCampaign, 'mission-detail-deprecated': !this.isResult || this.isTodoCampaign } }, this.mission && !this.isResult && this.renderDetails(), this.mission && this.isResult && this.renderResults()));
+    return (h(Host, { class: { 'mission-results-deprecated': this.isResult && !this.isTodoCampaign, 'mission-detail-deprecated': !this.isResult || this.isTodoCampaign, ...getAppContext(this.host) } }, this.mission && !this.isResult && this.renderDetails(), this.mission && this.isResult && this.renderResults()));
   }
   static get is() { return "yoo-mission-details"; }
   static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class YooMissionHeadingComponent {
   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 h("div", { class: { 'action-plan-progress': true, 'mission-progress-web': !this.isMobile } }, h("yoo-progress-bar", { class: "app-color", shape: "circle", animated: this.animated, 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;
   }

package/dist/collection/feature-platform/app/app/app.js

@@ -84,7 +84,7 @@ export class YooAppComponent {
         "mutable": false,
         "complexType": {
           "original": "IAppPermissions",
-          "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewJourneys: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMessages: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewLearningAnalytics: boolean; canViewYoobicScoreAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewShifts: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
+          "resolved": "{ canAddBluetoothDevices: boolean; canArchiveLearners: boolean; canAskQuestion: boolean; canAssignCourse: boolean; canBroadcast: boolean; canCreateCommunity: boolean; canChat: boolean; canChatMultiple: boolean; canChatSingle: boolean; canCreateBattles: boolean; canViewCommunities: boolean; canCreateCampaignAudit: boolean; canCreateCampaignMission: boolean; canCreateCampaignPoll: boolean; canCreateCampaignRequest: boolean; canCreateCampaigns: boolean; canCreateCourse: boolean; canCreateCustomApps: boolean; canCreateAppMixer: boolean; canCreateDashboard: boolean; canCreateDocument: boolean; canCreateFeed: boolean; canCreateFeedNoValidation: boolean; canCreateIncentives: boolean; canCreateMemo: boolean; canCreatePublicEvent: boolean; canCreateService: boolean; canCreateCampaignTodo: boolean; canCreateCampaignQuicktask: boolean; canCreateCampaignQuicktaskMobile: boolean; canCreateVisit: boolean; canCreateWiki: boolean; canDeleteQuestion: boolean; canDownloadFile: boolean; canEditOrPauseMissions: boolean; canEditProject: boolean; canEditWorkflow: boolean; canInviteNewLearners: boolean; canManageLiveShopping: boolean; canNotifyUsers: boolean; canReassignMission: boolean; canReceiveService: boolean; canScheduleMission: boolean; canSendCourseReminders: boolean; canSendRemindersToAll: boolean; canShareByEmail: boolean; canShareFeed: boolean; canSocialShare: boolean; canValidate: boolean; canValidateVisit: boolean; canVerifyQuestion: boolean; canVideoCall: boolean; canViewActionPlans: boolean; canViewAisle: boolean; canViewAICatalog: boolean; canViewAISuggestions: boolean; canViewAllPolls: boolean; canViewCalendar: boolean; canViewCampaignAnalytics: boolean; canViewCampaignNewAnalytics: boolean; canViewCampaigns: boolean; canViewDashboard: boolean; canViewDatabase: boolean; canViewDocuments: boolean; canViewEngagementAnalytics: boolean; canViewFeed: boolean; canViewHealthscore: boolean; canViewInsightsActiveUsers: boolean; canViewInsightsOperate: boolean; canViewInsightsLearning: boolean; canViewInsightsEngagement: boolean; canViewIncentives: boolean; canViewInsight: boolean; canViewInsights: boolean; canViewInsightsOverviewAnalytics: boolean; canViewInventory: boolean; canViewJourneys: boolean; canViewLeaderboard: boolean; canViewLearningManager: boolean; canViewLiveShopping: boolean; canViewLocationDetailTabs: boolean; canViewMemo: boolean; canViewMessages: boolean; canViewMenuCreate: boolean; canViewMicrolearning: boolean; canViewMissionAnalysis: boolean; canViewMissionsMore: boolean; canViewOthersCalendar: boolean; canViewPoll: boolean; canViewPollAnalytics: boolean; canViewPriceActions: boolean; canViewProductBatch: boolean; canViewProductBatchKpis: boolean; canViewProject: boolean; canViewQuestion: boolean; canViewQuestionKnowledgeBase: boolean; canViewQuestionKnowledgeLibrary: boolean; canViewQuestionKnowledgeBaseInDocuments: boolean; canViewSalesAIAnalytics: boolean; canViewScorm: boolean; canViewService: boolean; canViewServiceAnalytics: boolean; canViewLearningAnalytics: boolean; canViewYoobicScoreAnalytics: boolean; canViewStoreCampaignInsights: boolean; canViewStoreInsights: boolean; canViewShifts: boolean; canViewManagerInsights: boolean; canViewStoreVisits: boolean; canViewTaskAnalytics: boolean; canViewTodoAnalytics: boolean; canViewUsers: boolean; canViewUsersOrStores: boolean; canViewVirtualShopping: boolean; canViewVirtualShoppingAnalytics: boolean; canViewWaitlist: boolean; canViewWaitlistAnalytics: boolean; canViewYext: boolean; hasBoost: boolean; hasDataset: boolean; hasOperations: boolean; hasRetailNext: boolean; hasWorkflow: boolean; hasMemos: boolean; isAdmin: boolean; isStore: boolean; }",
           "references": {
             "IAppPermissions": {
               "location": "import",

package/dist/collection/feature-platform/app/card-notification/card-notification.css

@@ -257,4 +257,17 @@ svg:not(:root) {
 }
 :host(.unread) .right-container .time {
   color: var(--app-color, #5a30f4);
+}
+
+:host(.rtl) .left-container {
+  margin-right: var(--spacing-16, 1rem);
+  margin-left: 0;
+}
+:host(.rtl) .left-container .text-container {
+  margin-right: var(--spacing-08, 0.5rem);
+  margin-left: 0;
+}
+:host(.rtl) .right-container {
+  margin-right: var(--spacing-04, 0.25rem);
+  margin-left: var(--spacing-16, 1rem);
 }

package/dist/collection/feature-platform/app/card-notification/card-notification.js

@@ -1,4 +1,4 @@
-import { isVideo, removeTextStyle, translateMulti } from '@shared/utils';
+import { isRTL, isVideo, removeTextStyle, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooCardNotificationComponent {
   constructor() {
@@ -20,7 +20,7 @@ export class YooCardNotificationComponent {
       : h("yoo-img", { instant: this.instant, src: this.imgSrc });
   }
   render() {
-    return (h(Host, null, h("section", { class: "left-container" }, h("slot", { name: "item-left" }), h("div", { class: "text-container" }, this.notificationTitle && h("yoo-truncate", { class: "title" }, translateMulti(this.notificationTitle)), h("yoo-truncate", null, removeTextStyle(translateMulti(this.body))))), h("section", { class: "right-container" }, this.timeAgo && h("span", { class: "time" }, this.timeAgo), this.imgSrc && this.renderRightMedia())));
+    return (h(Host, { class: { rtl: isRTL() } }, h("section", { class: "left-container" }, h("slot", { name: "item-left" }), h("div", { class: "text-container" }, this.notificationTitle && h("yoo-truncate", { class: "title" }, translateMulti(this.notificationTitle)), h("yoo-truncate", null, removeTextStyle(translateMulti(this.body))))), h("section", { class: "right-container" }, this.timeAgo && h("span", { class: "time" }, this.timeAgo), this.imgSrc && this.renderRightMedia())));
   }
   static get is() { return "yoo-card-notification"; }
   static get encapsulation() { return "shadow"; }

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

@@ -420,4 +420,9 @@ svg:not(:root) {
 :host(.large) .outer-container .right-column .chart yoo-chart {
   position: initial;
   flex: 1;
+}
+
+:host(.rtl) .outer-container .value-container .value {
+  margin-right: 0;
+  margin-left: var(--spacing-24, 1.5rem);
 }

package/dist/collection/feature-platform/app/widget-chart/widget-chart.js

@@ -1,4 +1,4 @@
-import { isWeb, translate } from '@shared/utils';
+import { isRTL, isWeb, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { isNumber } from 'lodash-es';
 export class YooWidgetChartComponent {
@@ -70,7 +70,7 @@ export class YooWidgetChartComponent {
     });
   }
   render() {
-    return (h(Host, { class: { [this.size || '']: true } }, h("div", { class: { 'outer-container': true, web: isWeb(this.host) } }, (this.isSmall || this.isMedium) && this.renderTitle(), !this.isLarge && (h("div", { class: "left-column" }, this.isExtraLarge && this.renderTitle(), this.renderValueContainer(), this.isExtraLarge && h("div", { class: "items-container" }, this.renderData()))), !this.isSmall && (h("div", { class: "right-column" }, this.isExtraLarge && (h("yoo-form-autocomplete", { class: "inline", size: "medium", value: this.sort, values: ['30days', '6months', '1year'], displayType: "card-list", placeholder: translate('YOOBICSORT'), useTranslate: true, onInputChanged: (ev) => this.onSortChange(ev) })), this.isLarge && this.renderTitle(), this.isLarge && this.renderValueContainer(), h("div", { class: "chart" }, h("yoo-chart", { disableAnimation: true, config: this.chartOptions, emptyStateHeight: "6rem" })))))));
+    return (h(Host, { class: { [this.size || '']: true, rtl: isRTL() } }, h("div", { class: { 'outer-container': true, web: isWeb(this.host) } }, (this.isSmall || this.isMedium) && this.renderTitle(), !this.isLarge && (h("div", { class: "left-column" }, this.isExtraLarge && this.renderTitle(), this.renderValueContainer(), this.isExtraLarge && h("div", { class: "items-container" }, this.renderData()))), !this.isSmall && (h("div", { class: "right-column" }, this.isExtraLarge && (h("yoo-form-autocomplete", { class: "inline", size: "medium", value: this.sort, values: ['30days', '6months', '1year'], displayType: "card-list", placeholder: translate('YOOBICSORT'), useTranslate: true, onInputChanged: (ev) => this.onSortChange(ev) })), this.isLarge && this.renderTitle(), this.isLarge && this.renderValueContainer(), h("div", { class: "chart" }, h("yoo-chart", { disableAnimation: true, config: this.chartOptions, emptyStateHeight: "6rem" })))))));
   }
   static get is() { return "yoo-widget-chart"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/feature-platform/calendar/card-calendar/card-calendar.css

@@ -422,4 +422,13 @@ svg:not(:root) {
 
 :host(.events.decline) .heading {
   text-decoration: line-through;
+}
+
+:host(.rtl) .description-container .flex-container {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+:host(.rtl) .description-container .flex-container .icon {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
 }

package/dist/collection/feature-platform/insight/chart/chart.js

@@ -1,4 +1,4 @@
-import { dateFormat, dateIsValid, debounce, getCssColor, getMonths, getWeekDays, isChromatic, isIonic, resizeObserve, saveAs, translate } from '@shared/utils';
+import { dateFormat, dateIsValid, debounce, getCssColor, getMonths, getWeekDays, isChromatic, isIonic, isRTL, resizeObserve, saveAs, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { merge } from 'lodash-es';
 import { fixChartCategories } from './chart-helper';
@@ -137,6 +137,14 @@ export class YooChartComponent {
     });
     if (!this.isChartEmpty()) {
       options.title = { text: null };
+      if (isRTL()) {
+        options.chart.style.direction = 'rtl';
+        options.xAxis.reversed = true;
+        options.yAxis.opposite = true;
+        options.legend.align = 'right';
+        options.legend.useHTML = true;
+        options.legend.rtl = true;
+      }
       this.setupLegendListener(options);
       if (this.chartContainer && ((_b = (_a = this.definition) === null || _a === void 0 ? void 0 : _a.kpiFormValues) === null || _b === void 0 ? void 0 : _b.allowScroll)) {
         this.chart = Highstock.chart(this.chartContainer, options, this.addMousewheelEvent);