@yoobic/yobi 8.5.0-44 → 8.5.0-46

package/dist/collection/components/form/form-input-container/form-input-container.css

@@ -917,6 +917,15 @@ svg:not(:root) {
   margin-right: var(--spacing-16, 1rem);
 }
 
+:host(.rtl) .comment-container {
+  margin-right: 0;
+  margin-left: var(--spacing-16, 1rem);
+}
+:host(.rtl) .footer-container yoo-icon {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+
 :host(.web) .content-container:hover .removable {
   display: block;
 }
@@ -1389,6 +1398,21 @@ svg:not(:root) {
   text-transform: uppercase;
 }
 
+:host(.rtl) .optional {
+  margin-right: var(--spacing-08, 0.5rem) !important;
+  margin-left: 0;
+}
+:host(.rtl) .top-container {
+  text-align: right;
+}
+:host(.rtl) .top-container .label .right-side {
+  margin-right: var(--right-side-margin);
+  margin-left: 0;
+}
+:host(.rtl) .top-container .label .field-title-name {
+  text-align: right;
+}
+
 :host(.login-sso-field.mobile) .label .field-title-name {
   font-size: var(--font-size-12, 0.75rem);
 }

package/dist/collection/components/form/form-progress-indicator/form-progress-indicator.css

@@ -597,4 +597,18 @@ svg:not(:root) {
 
 :host(.more-stable) yoo-truncate {
   background-color: var(--stable-ultralight, #fafafa);
+}
+
+:host(.rtl) .outer-container .step-container.last {
+  margin-right: 0;
+}
+:host(.rtl) .outer-container .step-container .progress-line {
+  position: absolute;
+  top: 1.9375rem;
+  right: 1rem;
+  bottom: auto;
+  left: -6px;
+}
+:host(.rtl) .outer-container .step-container .step-title {
+  margin: var(--spacing-08, 0.5rem) 0 0 var(--spacing-32, 2rem);
 }

package/dist/collection/components/form/form-radio/form-radio.css

@@ -402,6 +402,11 @@ svg:not(:root) {
   font-size: var(--font-size-16, 1rem);
 }
 
+:host(.rtl) label {
+  padding-right: var(--spacing-08, 0.5rem);
+  padding-left: 0;
+}
+
 :host {
   display: grid;
 }

package/dist/collection/components/form/form-recap-step/form-recap-step.css

@@ -286,4 +286,12 @@ svg:not(:root) {
 :host .outer-container .subtitle-container {
   color: var(--text-color, #807f83);
   font-size: var(--font-size-14, 0.875rem);
+}
+
+:host(.rtl) .outer-container .icon-outer-container {
+  margin-right: 0;
+  margin-left: var(--spacing-16, 1rem);
+}
+:host(.rtl) .outer-container .text-container {
+  text-align: right;
 }

package/dist/collection/components/form/form-recap-step/form-recap-step.js

@@ -1,5 +1,6 @@
 import { isNullOrUndefined, translate, translateMulti } from '@shared/utils';
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooFormRecapStepComponent {
   get isWarningIcon() {
     return this.icon === 'warning';
@@ -29,14 +30,14 @@ export class YooFormRecapStepComponent {
   }
   render() {
     var _a;
-    return (h("div", { class: "outer-container" }, h("div", { class: "icon-outer-container" }, h("div", { class: {
+    return (h(Host, { class: getAppContext(this.host) }, h("div", { class: "outer-container" }, h("div", { class: "icon-outer-container" }, h("div", { class: {
         'icon-container': true,
         transparent: this.isWarningIcon,
         locked: this.locked,
         valid: this.step.valid && !this.locked,
         invalid: this.step.valid === false && !this.locked,
         step: isNullOrUndefined(this.step.valid) && !this.locked
-      } }, this.renderIcon())), h("div", { class: "text-container" }, h("div", { class: "text-container-main" }, !this.subTitle && h("div", { class: "step-container" }, translate('PAGE') + ' ' + this.stepNumber), !this.subTitle && h("div", { class: "title-container" }, h("yoo-truncate", { class: "form-recap", showEllipsisButton: true, content: translateMulti(this.mainTitle) })), this.subTitle && h("div", { class: "step-container", innerHTML: this.stepNumber + '. ' + translateMulti(this.mainTitle) }), this.subTitle && h("div", { class: "subtitle-container", innerHTML: translateMulti(this.subTitle) }), h("slot", null)), ((_a = this.users) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "text-container-right" }, h("yoo-avatars", { users: this.users, size: "extra-small", layout: "stack" }))))));
+      } }, this.renderIcon())), h("div", { class: "text-container" }, h("div", { class: "text-container-main" }, !this.subTitle && h("div", { class: "step-container" }, translate('PAGE') + ' ' + this.stepNumber), !this.subTitle && h("div", { class: "title-container" }, h("yoo-truncate", { class: "form-recap", showEllipsisButton: true, content: translateMulti(this.mainTitle) })), this.subTitle && h("div", { class: "step-container", innerHTML: this.stepNumber + '. ' + translateMulti(this.mainTitle) }), this.subTitle && h("div", { class: "subtitle-container", innerHTML: translateMulti(this.subTitle) }), h("slot", null)), ((_a = this.users) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "text-container-right" }, h("yoo-avatars", { users: this.users, size: "extra-small", layout: "stack" })))))));
   }
   static get is() { return "yoo-form-recap-step"; }
   static get encapsulation() { return "shadow"; }
@@ -184,4 +185,5 @@ export class YooFormRecapStepComponent {
       }
     };
   }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/form/form-task/form-task.css

@@ -350,4 +350,9 @@ svg:not(:root) {
 }
 :host(.tasks-container) .empty {
   padding: 0;
+}
+
+:host(.rtl) .task-part yoo-avatar {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
 }

package/dist/collection/components/form/form-task/form-task.js

@@ -1,5 +1,5 @@
-import { getModalAnimation, getUserDisplayName, isWeb, pipes, showActionSheet, showAlert, showContextMenu, showModal, translate, translateMulti } from '@shared/utils';
-import { h } from '@stencil/core';
+import { getModalAnimation, getUserDisplayName, isRTL, isWeb, pipes, showActionSheet, showAlert, showContextMenu, showModal, translate, translateMulti } from '@shared/utils';
+import { h, Host } from '@stencil/core';
 import { remove } from 'lodash-es';
 import { setValidator, setValueAndValidateInput, taskStyle } from '../../../utils/helpers/form-input-helpers';
 export class YooFormTaskComponent {
@@ -126,7 +126,7 @@ export class YooFormTaskComponent {
     return (h("div", { class: { 'outer-container': true, empty: !((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), pdf: this.isPdf } }, ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) ? h("div", { class: "title" }, translate('YOOBICACTIONS')) : null, this.renderTasks(), this.type === 'todo' || this.type === 'task' ? (h("div", { class: { newtask: true, nomargin: !((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) } }, h("yoo-button", { color: "stable-light", onClick: () => this.onAddNewTask() }, h("yoo-icon", { size: "small", slot: "start", name: "plus", color: "app-color" }), h("div", { class: "label" }, translate('ADDNEWACTION'))))) : null));
   }
   render() {
-    return this.readonly ? this.renderReadonly() : this.renderEditable();
+    return (h(Host, { class: { rtl: isRTL() } }, this.readonly ? this.renderReadonly() : this.renderEditable()));
   }
   static get is() { return "yoo-form-task"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-todo-mission/form-todo-mission.css

@@ -298,9 +298,14 @@ svg:not(:root) {
 }
 :host .outer-container .container #task-container .task header yoo-button {
   position: absolute;
-  right: var(--spacing-16, 1rem);
   margin: 0;
 }
+:host .outer-container .container #task-container .task header yoo-button:not(.rtl) {
+  right: var(--spacing-16, 1rem);
+}
+:host .outer-container .container #task-container .task header yoo-button.rtl {
+  left: var(--spacing-16, 1rem);
+}
 :host .outer-container .container #task-container .task additionnal-fields {
   padding-top: var(--spacing-08, 0.5rem);
 }
@@ -406,4 +411,8 @@ svg:not(:root) {
 }
 :host(.modal-view) {
   max-height: 65%;
+}
+
+:host(.rtl) .outer-container .container #task-container .task header task-details .task-title {
+  padding: 0 var(--spacing-08, 0.5rem) 0 0;
 }

package/dist/collection/components/form/form-todo-task/form-todo-task.css

@@ -295,4 +295,14 @@ svg:not(:root) {
   right: var(--spacing-16, 1rem);
   bottom: calc(var(--spacing-08, 0.5rem) + var(--spacing-04, 0.25rem));
   left: var(--spacing-16, 1rem);
+}
+
+:host(.web.rtl) .actions {
+  right: unset;
+  left: var(--spacing-24, 1.5rem);
+}
+
+:host(.mobile.rtl) .actions {
+  right: unset;
+  left: var(--spacing-16, 1rem);
 }

package/dist/collection/components/form/form-todo-task/form-todo-task.js

@@ -1,4 +1,4 @@
-import { closeModal, dateFormat, intersectionObserve, isDateAfter, isWeb, resizeObserve, showActionSheet, translate } from '@shared/utils';
+import { closeModal, dateFormat, intersectionObserve, isDateAfter, isRTL, isWeb, resizeObserve, showActionSheet, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { groupBy } from 'lodash-es';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
@@ -141,7 +141,7 @@ export class YooFormTodoTaskComponent {
         const value = event.detail;
         event.stopPropagation();
         heading.key ? this.updateTranslation(heading.key, value) : this.updateValue({ ...this.value, text: { value } });
-      } }), h("yoo-form-checkbox", { disabled: true, hidden: !this.readonly, size: web ? 'medium' : 'large', onInputChanged: (event) => event.stopPropagation() }), h("h1", { hidden: !this.readonly, style: { paddingRight: actionable ? `${this.actionsWidth}rem` : null } }, heading.value), h("div", { class: "tags", hidden: !tagged, ref: (el) => (this.tagsElement = el) }, this.actionableTags
+      } }), h("yoo-form-checkbox", { disabled: true, hidden: !this.readonly, size: web ? 'medium' : 'large', onInputChanged: (event) => event.stopPropagation() }), h("h1", { hidden: !this.readonly, style: { [isRTL() ? 'paddingLeft' : 'paddingRight']: actionable ? `${this.actionsWidth}rem` : null, textAlign: 'start' } }, heading.value), h("div", { class: "tags", hidden: !tagged, ref: (el) => (this.tagsElement = el) }, this.actionableTags
       .map(({ tag, isTagged }) => ({ ...tag, isTagged }))
       .map(({ getColor, getText, icon, isTagged, onClick, onRemove }) => (h(Tag, { color: getColor(), hidden: !isTagged(), icon: icon, removable: !this.readonly || !web, text: getText(), web: web, onClick: onClick, onRemove: onRemove })))), h("div", { class: "actions", hidden: !actionable, ref: (el) => (this.actionsElement = el) }, primaryActionableTags
       .map(({ action, isTagged }) => ({ ...action, isTagged }))

package/dist/collection/components/form/form-toggle/form-toggle.css

@@ -342,6 +342,11 @@ svg:not(:root) {
   font-size: var(--font-size-16, 1rem);
 }
 
+:host(.web.rtl) .outer-container .label,
+:host(.web.rtl) .readonly .label {
+  padding-right: var(--spacing-08, 0.5rem);
+}
+
 :host(.mobile) .outer-container .label.with-help {
   flex: initial;
 }
@@ -378,7 +383,12 @@ svg:not(:root) {
 }
 :host([size=small]) .toggle-container .inner-container.active,
 :host([size=medium]) .toggle-container .inner-container.active {
-  transform: translateX(var(--font-size-12, 0.75rem)) !important;
+  transform: translateX(var(--spacing-12, 0.75rem));
+}
+
+:host(.rtl[size=small]) .toggle-container .inner-container.active,
+:host(.rtl[size=medium]) .toggle-container .inner-container.active {
+  transform: translateX(calc(var(--spacing-12, 0.75rem) * -1));
 }
 
 :host([size=large]) .toggle-container {
@@ -391,7 +401,11 @@ svg:not(:root) {
   height: var(--font-size-28, 1.75rem);
 }
 :host([size=large]) .toggle-container .inner-container.active {
-  transform: translateX(1.3rem) !important;
+  transform: translateX(1.3rem);
+}
+
+:host(.rtl[size=large]) .toggle-container .inner-container.active {
+  transform: translateX(-1.3rem);
 }
 
 :host(.danger) .outer-container .toggle-container.active {

package/dist/collection/components/form/scratch-card/scratch-card.css

@@ -278,6 +278,10 @@ svg:not(:root) {
   --scale: 1;
   z-index: 2;
 }
+:host yoo-button {
+  right: unset;
+  left: var(--spacing-16, 1rem);
+}
 
 :host:after {
   display: block;

package/dist/collection/components/grid/grid/grid.css

@@ -893,7 +893,7 @@ svg:not(:root) {
   --padding-start: 0 !important;
 }
 :host .body-container.web.card-inbox yoo-ion-item, :host .body-container.web.card-inbox-ongoing yoo-ion-item {
-  margin-right: var(--spacing-08, 0.5rem) !important;
+  margin-right: var(--spacing-08, 0.5rem);
 }
 :host .body-container.card-battle yoo-ion-item, :host .body-container.card-campaign yoo-ion-item, :host .body-container.card-feed-row yoo-ion-item, :host .body-container.card-location yoo-ion-item {
   padding-bottom: var(--spacing-08, 0.5rem) !important;
@@ -2453,6 +2453,21 @@ svg:not(:root) {
   margin: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
 
+:host(.rtl) yoo-navbar.tags-only {
+  --top-container-padding: cssvar(spacing-12) cssvar(spacing-16) cssvar(spacing-16) 0;
+}
+:host(.rtl) yoo-ion-item-sliding yoo-ion-item-options yoo-icon.position {
+  position: absolute;
+  top: calc(50% - var(--spacing-12, 0.75rem));
+  right: 0;
+  bottom: auto;
+  left: auto;
+}
+:host(.rtl) yoo-ion-item-sliding yoo-ion-item-options .options-container.web yoo-button {
+  margin-right: 0;
+  margin-left: var(--spacing-16, 1rem);
+}
+
 :host(.web) .join-line {
   top: 2.25rem;
 }
@@ -2466,7 +2481,7 @@ svg:not(:root) {
   height: var(--empty-state-height, 12rem);
 }
 :host(.web) ::slotted(.missions-page.grid-extra-opts[slot=before-scroll]) {
-  margin-left: 0 !important;
+  margin-left: 0;
 }
 :host(.web) .sub-item-container .relative {
   position: relative;
@@ -2480,6 +2495,12 @@ svg:not(:root) {
   padding-right: var(--spacing-04, 0.25rem);
 }
 
+:host(.web.rtl) ::slotted(.missions-page.grid-extra-opts[slot=before-scroll]) {
+  flex-direction: row-reverse;
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+
 :host(.form-grid) yoo-ion-item.selected {
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
@@ -2658,6 +2679,11 @@ svg:not(:root) {
   margin-left: 0;
 }
 
+:host(.web:not(.framed).rtl) .container-base {
+  margin-right: var(--spacing-16, 1rem);
+  margin-left: 0;
+}
+
 :host(.web:not(.framed)) yoo-ion-item-sliding.hovered:not(.dragging) {
   background: var(--stable-light-40, rgba(241, 241, 241, 0.4));
 }
@@ -2872,8 +2898,13 @@ svg:not(:root) {
   overflow: visible;
 }
 
-:host(.rtl.web:not(.framed)) .container-base.filters {
+:host(.rtl.web:not(.framed).dialog.card-list) .container-base {
   margin-right: var(--spacing-16, 1rem);
+  margin-left: 0;
+}
+:host(.rtl.web:not(.framed).dialog.card-list) .container-base.keep-selection .entity-inner-container:not(.card-cell):not(.card-cell-color):not(.card-media):not(.card-template):not(.autocomplete-selection-mode) {
+  padding-right: var(--spacing-32, 2rem);
+  padding-left: 0;
 }
 
 :host(.no-padding-container) .container-base {
@@ -2940,6 +2971,10 @@ svg:not(:root) {
 :host(.web.autocomplete-selection-mode:not(.empty)) .container-base .body-container {
   margin-top: 0;
 }
+:host(.web.autocomplete-selection-mode:not(.empty)) .container-base .body-container .entity-inner-container {
+  padding: 0 var(--spacing-32, 2rem) 0 var(--spacing-08, 0.5rem);
+  border-bottom: none;
+}
 :host(.web.autocomplete-selection-mode:not(.empty)) .container-base .body-container yoo-ion-item-sliding .hover-container yoo-ion-item-options yoo-icon.position {
   position: absolute;
   top: calc(50% - 0.75rem);
@@ -2948,10 +2983,6 @@ svg:not(:root) {
   left: auto;
   padding-right: var(--spacing-04, 0.25rem);
 }
-:host(.web.autocomplete-selection-mode:not(.empty)) .container-base .body-container .entity-inner-container {
-  padding: 0 var(--spacing-32, 2rem) 0 var(--spacing-08, 0.5rem);
-  border-bottom: none;
-}
 :host(.web.autocomplete-selection-mode:not(.empty)) .container-base .grid-cell {
   justify-content: space-between;
   padding-bottom: var(--spacing-16, 1rem);
@@ -2964,6 +2995,18 @@ svg:not(:root) {
   background: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
 
+:host(.autocomplete-selection-mode.rtl:not(.empty)) .container-base .body-container .entity-inner-container {
+  padding: 0 var(--spacing-08, 0.5rem) 0 var(--spacing-32, 2rem);
+}
+:host(.autocomplete-selection-mode.rtl:not(.empty)) .container-base .body-container yoo-ion-item-sliding .hover-container yoo-ion-item-options yoo-icon.position {
+  position: absolute;
+  top: calc(50% - var(--spacing-12, 0.75rem));
+  right: auto;
+  bottom: auto;
+  left: 0;
+  padding-left: var(--spacing-04, 0.25rem);
+}
+
 :host(.framed.quickview) .frame-container.web {
   padding: 0;
 }
@@ -3243,6 +3286,14 @@ svg:not(:root) {
   margin-right: var(--spacing-16, 1rem);
 }
 
+:host(.framed.horizontal.rtl) .frame-container {
+  padding-right: var(--spacing-16, 1rem);
+  padding-left: 0;
+}
+:host(.framed.horizontal.rtl) .frame-container .frame-header {
+  direction: rtl;
+}
+
 :host(.missiondescriptions.card-list-color) yoo-virtual-scroll yoo-virtual-item yoo-ion-item,
 :host(.missiondescriptions.card-list-color) yoo-ion-list yoo-ion-item {
   margin: none !important;
@@ -3869,7 +3920,7 @@ svg:not(:root) {
 }
 
 :host(.web.feeds.card-sticky.full-width) .container-base {
-  margin-left: var(--spacing-16, 1rem) !important;
+  margin-left: var(--spacing-16, 1rem);
 }
 
 :host(.web.feeds.card-sticky) .empty-state-container {
@@ -4272,4 +4323,15 @@ svg:not(:root) {
 
 :host(.learning-manager.card-course-info) {
   background-color: var(--stable-ultralight, #fafafa);
+}
+
+:host(.rtl.widget.framed) .frame-container .frame-header .row {
+  flex-direction: row-reverse;
+}
+:host(.rtl.widget.framed) .frame-container .frame-header .row .text-container {
+  justify-content: end;
+}
+:host(.rtl.widget.framed) .frame-container .frame-header .row .icon-container {
+  margin-right: var(--spacing-08, 0.5rem);
+  margin-left: 0;
 }

package/dist/collection/feature-communicate/document/card-media/card-media.css

@@ -495,4 +495,21 @@ svg:not(:root) {
 :host(.mobile[type=photo]) yoo-items {
   margin-top: -0.25rem;
   margin-right: var(--spacing-32, 2rem);
+}
+
+:host(.rtl) yoo-form-checkbox {
+  right: var(--spacing-08, 0.5rem);
+  left: 0;
+}
+:host(.rtl) yoo-context-menu {
+  right: auto;
+  left: var(--spacing-08, 0.5rem);
+}
+:host(.rtl) .footer .description {
+  margin-right: 0;
+  margin-left: var(--spacing-24, 1.5rem);
+}
+:host(.rtl) .avatar yoo-avatar {
+  margin-right: 0;
+  margin-left: var(--text-content-spacing-left);
 }

package/dist/collection/feature-communicate/feed/card-feed/default/card-feed.css

@@ -1415,6 +1415,17 @@ svg:not(:root) {
   color: var(--app-color, #5a30f4);
 }
 
+:host(.rtl) .campaign-container .right-part,
+:host(.rtl) .event-container .right-part {
+  padding-right: var(--spacing-16, 1rem);
+  padding-left: 0;
+}
+:host(.rtl) .campaign-container .right-part .heading yoo-icon,
+:host(.rtl) .event-container .right-part .heading yoo-icon {
+  padding-right: 0;
+  padding-left: var(--spacing-04, 0.25rem);
+}
+
 :host(.offline) .outer-container {
   opacity: 0.7;
 }

package/dist/collection/feature-communicate/feed/community-detail/community-detail.css

@@ -375,4 +375,15 @@ svg:not(:root) {
 }
 :host(.mobile) .bottom-container .feed-container .grid-container {
   margin: 0;
+}
+
+:host(.rtl) .outer-container .top-container .information-container {
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) 0;
+}
+:host(.rtl) .outer-container .top-container .information-container .title-container .more-container {
+  margin-right: auto;
+  margin-left: var(--spacing-16, 1rem);
+}
+:host(.rtl) .outer-container .tab-container .collapsible-icon-container {
+  inset: var(--spacing-08, 0.5rem) auto auto var(--spacing-08, 0.5rem);
 }

package/dist/collection/feature-communicate/feed/user-wizard/user-wizard.css

@@ -308,6 +308,11 @@ svg:not(:root) {
   --title-font-size: var(--font-size-14, 0.875rem);
 }
 
+:host(.mobile.rtl) header {
+  margin-right: var(--spacing-16, 1rem);
+  margin-left: 0;
+}
+
 :host(.web) main {
   margin-left: calc(var(--spacing-16, 1rem) * -1);
 }
@@ -336,4 +341,13 @@ svg:not(:root) {
 }
 :host(.mobile.live-video) main {
   margin-left: inherit;
+}
+
+:host(.rtl.mobile) main {
+  margin-right: 0;
+  margin-left: calc(var(--spacing-16, 1rem) * -1);
+}
+
+:host(.rtl.mobile.live-video) main {
+  margin-right: inherit;
 }

package/dist/collection/feature-learn/learning/battle-count-down/battle-count-down.css

@@ -457,4 +457,8 @@ svg:not(:root) {
 }
 :host .bottom-container .user-container .stats-container .inner-container.battles {
   padding-left: var(--spacing-48, 3rem);
+}
+
+:host(.rtl) {
+  direction: ltr;
 }

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);
 }