@yoobic/yobi 8.5.0-45 → 8.5.0-46

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

@@ -473,7 +473,7 @@ export class YooMissionDetailsComponent {
     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-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);