@yoobic/yobi 8.5.0-45 → 8.5.0-47

package/dist/collection/components/1.atoms/progress-bar/progress-bar.css

@@ -331,4 +331,11 @@ svg:not(:root) {
 
 :host([metric=step]) {
   --progress-bar-color: var(--app-color, #5a30f4);
+}
+
+:host([shape=line].rtl) {
+  direction: ltr;
+}
+:host([shape=line].rtl) svg {
+  transform: scaleX(-1);
 }

package/dist/collection/components/1.atoms/progress-bar/progress-bar.js

@@ -1,6 +1,7 @@
 import { gsapFromTo, isAnimationsDisabled, Linear, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { clamp, debounce, isFinite } from 'lodash-es';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { DEFAULT_COLOR_THRESHOLDS, DEFAULT_SHAPES } from './progress-bar.constants';
 export class YooProgressBarComponent {
   constructor() {
@@ -256,7 +257,7 @@ export class YooProgressBarComponent {
     return !this.hideProgressValue && (h("span", { id: "value", ...(!this.isAnimated && { innerHTML: this.getLabelledValue() }) }));
   }
   render() {
-    return (h(Host, { class: { 'no-value': this.hideProgressValue }, ...((!this.hideProgressValue && this.isShape.line) && { y: this.verticalAlign, x: this.horizontalAlign }) }, [this.renderSVG(), this.renderProgressValue()], !this.isShape.line && h("slot", null)));
+    return (h(Host, { class: { 'no-value': this.hideProgressValue, ...getAppContext(this.host) }, ...((!this.hideProgressValue && this.isShape.line) && { y: this.verticalAlign, x: this.horizontalAlign }) }, [this.renderSVG(), this.renderProgressValue()], !this.isShape.line && h("slot", null)));
   }
   static get is() { return "yoo-progress-bar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/1.atoms/tabs/tabs.css

@@ -312,7 +312,7 @@ svg:not(:root) {
 :host .outer-container-vertical {
   --height-tabs: 2.5rem;
   font-size: var(--font-size-16, 1rem);
-  --badge-width-with-spacing: 2rem;
+  --badge-width-with-spacing: var(--spacing-32, 2rem);
 }
 :host .outer-container-vertical .tab-container {
   display: flex;
@@ -340,7 +340,7 @@ svg:not(:root) {
   height: var(--height-tabs);
   padding: var(--spacing-08, 0.5rem);
   color: var(--dark, #000000);
-  text-align: left;
+  text-align: start;
 }
 :host .outer-container-vertical .tab-header .flex {
   flex: 1;
@@ -442,7 +442,7 @@ yoo-ripple-effect {
 
 yoo-icon {
   align-self: center;
-  margin-right: 0.5625rem;
+  margin-right: var(--spacing-08, 0.5rem);
 }
 
 yoo-context-menu.editable {
@@ -521,4 +521,13 @@ yoo-tag {
 }
 :host(.big-tabs) .tab-description {
   border-bottom: var(--tab-border-width) solid var(--active-tab-border-color);
+}
+
+:host(.rtl) yoo-icon {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+:host(.rtl) .outer-container-vertical .tab-description {
+  padding-right: calc(var(--spacing-08, 0.5rem) + var(--badge-width-with-spacing));
+  padding-left: var(--spacing-16, 1rem);
 }

package/dist/collection/components/1.atoms/tabs/tabs.js

@@ -1,6 +1,7 @@
 import { isIOS, isNativeMobile, isWeb, pipes, safeScrollIntoView, showActionSheet, translateMulti, vibrateHapticMedium } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { isBoolean, isNumber, isString } from 'lodash-es';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooTabsComponent {
   constructor() {
     /**
@@ -126,7 +127,7 @@ export class YooTabsComponent {
     return h("div", { class: "outer-container-vertical" }, (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.map((tab, index) => this.renderTab(tab, index)));
   }
   render() {
-    return (h(Host, { class: { web: isWeb(this.host) } }, !this.vertical && this.renderHorizontal(), this.vertical && this.renderVertical()));
+    return (h(Host, { class: getAppContext(this.host) }, !this.vertical && this.renderHorizontal(), this.vertical && this.renderVertical()));
   }
   static get is() { return "yoo-tabs"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/1.atoms/tag/tag.css

@@ -601,6 +601,10 @@ svg:not(:root) {
 :host .outer-container .close-icon {
   margin-left: var(--spacing-04, 0.25rem);
 }
+:host .outer-container.rtl ::slotted([slot=start]) {
+  margin-right: 0;
+  margin-left: var(--spacing-04, 0.25rem);
+}
 
 :host([hidden]) {
   display: none;

package/dist/collection/components/1.atoms/tag/tag.js

@@ -3,6 +3,7 @@
  * @author: Renate Urdzina
  * Zeplin Link: https://zpl.io/brXW93e
  */
+import { isRTL } from '@shared/utils';
 import { h } from '@stencil/core';
 import { changeRgbOpacity } from '../../../utils/helpers/color-helpers';
 export class YooTagComponent {
@@ -52,7 +53,7 @@ export class YooTagComponent {
     return (h("span", { id: "main-content" }, this.icon ? (h("yoo-icon", { class: { 'custom': !!this.iconOnlyColor || !!this.customColor }, name: this.icon ? this.icon : 'star', size: this.iconSize, color: this.iconOnlyColor })) : (h("slot", null))));
   }
   render() {
-    return (h("div", { class: "outer-container", style: this.customStyle() }, this.renderSlot('start'), this.renderMainContent(), this.renderSlot('end')));
+    return (h("div", { class: { 'outer-container': true, rtl: isRTL() }, style: this.customStyle() }, this.renderSlot('start'), this.renderMainContent(), this.renderSlot('end')));
   }
   static get is() { return "yoo-tag"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/2.molecules/accordion/accordion.css

@@ -513,6 +513,11 @@ svg:not(:root) {
   background: var(--stable, #adadad);
 }
 
+:host(.rtl.side-menu) .outer-container .title-container .left-container yoo-icon {
+  padding-right: 0;
+  padding-left: var(--spacing-08, 0.5rem);
+}
+
 :host(.accent) .outer-container {
   border-color: var(--accent, #276ef1);
 }

package/dist/collection/components/2.molecules/action-sheet/action-sheet.css

@@ -326,6 +326,7 @@ svg:not(:root) {
 }
 :host .top-container .inner-container .text-container.icon-description {
   padding-top: var(--spacing-08, 0.5rem);
+  text-align: start;
 }
 :host .top-container .inner-container .text-container .beta {
   display: flex;
@@ -419,4 +420,12 @@ svg:not(:root) {
 }
 :host(.mobile-emulate) .full-page-container .outer-container {
   position: absolute;
+}
+
+:host(.rtl) .top-container .inner-container .icon-container {
+  margin: auto 0 auto var(--spacing-16, 1rem);
+}
+:host(.rtl) .top-container .inner-container .text-container.icon-description,
+:host(.rtl) .top-container .inner-container .text-container.icon-no-description {
+  text-align: right;
 }

package/dist/collection/components/2.molecules/action-sheet/action-sheet.js

@@ -5,7 +5,7 @@
  * Zeplin Link: zpl://screen?sid=5d38807688bfba777edbc976&pid=5b3389c17e5fb54c63704827
  * Original ionic component: https://github.com/ionic-team/ionic/tree/master/core/src/components/action-sheet
  */
-import { copyToClipboard, dismiss, isNativeMobile, isPresent, MODAL_BASE_ZINDEX, present, setAnimation, translate } from '@shared/utils';
+import { copyToClipboard, dismiss, isNativeMobile, isPresent, isRTL, MODAL_BASE_ZINDEX, present, setAnimation, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { isBoolean, isNumber, isString } from 'lodash-es';
 import { lifecycleEvents, querySelectorDeep } from '../../../utils/helpers/common-helpers';
@@ -160,7 +160,7 @@ export class YooActionSheetComponent {
     return (h("div", { class: { 'top-container': true, solid: !!((buttons === null || buttons === void 0 ? void 0 : buttons[0]) && ((buttons[0].description && buttons[0].text) || buttons[0].icon)) }, ref: (el) => (this.topContainer = el) }, h("div", { style: { 'max-height': `${Math.round(0.84 * (((_a = this.outerDiv) === null || _a === void 0 ? void 0 : _a.offsetHeight) || window.innerHeight))}px` } }, h("div", { class: "heading-wrapper" }, this.renderHeader()), h("ul", { class: "inner", ref: (el) => (this.innerDiv = el) }, buttons.map((button, index) => this.renderLiButton(buttons, button, index))))));
   }
   render() {
-    return (h(Host, { class: { ...createThemedClasses(null, this.cssClass ? this.cssClass : ''), 'mobile-emulate': !isNativeMobile() } }, h("div", { class: "full-page-container", ref: (el) => (this.outerDiv = el) }, h("div", { ref: (el) => (this.overlay = el), class: "overlay", onClick: () => this.onOverlayClick(), style: { 'z-index': (MODAL_BASE_ZINDEX + this.overlayId).toString() } }), h("div", { class: "outer-container", style: { 'z-index': (20001 + this.overlayId).toString() } }, this.renderTopContainer(), this.renderBottomContainer()))));
+    return (h(Host, { class: { ...createThemedClasses(null, this.cssClass ? this.cssClass : ''), 'mobile-emulate': !isNativeMobile(), rtl: isRTL() } }, h("div", { class: "full-page-container", ref: (el) => (this.outerDiv = el) }, h("div", { ref: (el) => (this.overlay = el), class: "overlay", onClick: () => this.onOverlayClick(), style: { 'z-index': (MODAL_BASE_ZINDEX + this.overlayId).toString() } }), h("div", { class: "outer-container", style: { 'z-index': (20001 + this.overlayId).toString() } }, this.renderTopContainer(), this.renderBottomContainer()))));
   }
   static get is() { return "yoo-action-sheet"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/2.molecules/calendar/calendar.css

@@ -490,6 +490,11 @@ svg:not(:root) {
   opacity: 1;
 }
 
+:host(.rtl) .mobile-calendar-header {
+  justify-content: flex-end;
+  direction: ltr;
+}
+
 :host([hidden]) {
   display: none;
 }

package/dist/collection/components/2.molecules/calendar/calendar.js

@@ -1,6 +1,7 @@
 import { dateAdd, dateFormat, dateSub, day as getDay, endOf, getWeekDays, getYear, isDateAfter, isDateBefore, isDateSameOrAfter, isDateSameOrBefore, isIonic, isSameDate, isSameMonth, isToday, isWeb, pipes, resetTime, shiftSlidesToNext, shiftSlidesToPrevious, startOf, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { capitalize, isArray } from 'lodash-es';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 const MONTHS_TO_ADD = 3;
 export class YooCalendarComponent {
   constructor() {
@@ -610,7 +611,7 @@ export class YooCalendarComponent {
     return (h("div", { class: "mobile-calendar-header" }, h("div", { class: { 'active-month-container': true, 'flex': this.showDone && this.isDatePicker } }, this.renderMobileCalendarControls()), !this.isDatePicker && this.renderCalendarModeToggle(), this.isDatePicker && this.showDone && h("yoo-button", { class: "done", fill: "transparent", color: "app-color", size: "medium", onClick: () => this.doneClicked.emit() }, translate('DONE'))));
   }
   render() {
-    return (h(Host, { class: { web: isWeb(this.host) } }, this.useModernDatePickerWeek && this.renderModernWeek(), !this.useModernDatePickerWeek && (isIonic(this.host) || this.isDatePicker ? this.renderMobileCalendar() : this.renderWebCalendar())));
+    return (h(Host, { class: getAppContext(this.host) }, this.useModernDatePickerWeek && this.renderModernWeek(), !this.useModernDatePickerWeek && (isIonic(this.host) || this.isDatePicker ? this.renderMobileCalendar() : this.renderWebCalendar())));
   }
   static get is() { return "yoo-calendar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/2.molecules/context-menu/context-menu.css

@@ -219,9 +219,18 @@ svg:not(:root) {
   margin-left: var(--spacing-16);
 }
 :host(.side-menu.flex) yoo-icon {
-  margin-left: calc(var(--spacing-08) * -1);
+  margin-left: calc(var(--spacing-08, 0.5rem) * -1);
 }
 
 :host(.flex) span {
   display: flex;
+}
+
+:host(.side-menu.flex.menu-collapsed.rtl) span {
+  margin-right: var(--spacing-16);
+  margin-left: 0;
+}
+:host(.side-menu.flex.menu-collapsed.rtl) yoo-icon {
+  margin-right: calc(var(--spacing-08, 0.5rem) * -1);
+  margin-left: 0;
 }

package/dist/collection/components/2.molecules/context-menu-dialog/context-menu-dialog.css

@@ -567,6 +567,23 @@ svg:not(:root) {
   margin-right: var(--spacing-08, 0.5rem);
 }
 
+:host(.side-menu.rtl) .arrow-cursor {
+  right: 0;
+  left: unset;
+  margin-right: -0.375rem;
+  margin-left: 0;
+  border-radius: 0 0.1rem 0 0;
+  transform: rotate(225deg);
+}
+:host(.side-menu.rtl) li .item-content {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+:host(.side-menu.rtl) li .item-content section.text {
+  margin-right: 0;
+  margin-left: auto;
+}
+
 :host(.width-unset) {
   width: auto;
   max-width: unset;

package/dist/collection/components/2.molecules/course-info-card/course-info-card.css

@@ -262,4 +262,9 @@ svg:not(:root) {
 }
 :host .sub-container .kpi-container:not(:last-of-type) {
   border-right: solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);
+}
+
+:host(.rtl) .top-container yoo-img {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
 }

package/dist/collection/components/2.molecules/course-info-card/course-info-card.js

@@ -1,5 +1,6 @@
 import { translate, translateMulti } from '@shared/utils';
 import { h, Host } from '@stencil/core';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooCourseInfoCardComponent {
   get courseKpis() {
     const kpisToDisplay = {
@@ -37,7 +38,7 @@ export class YooCourseInfoCardComponent {
     }));
   }
   render() {
-    return h(Host, null, this.renderTopContainer(), this.renderSubContainer());
+    return h(Host, { class: getAppContext(this.host) }, this.renderTopContainer(), this.renderSubContainer());
   }
   static get is() { return "yoo-course-info-card"; }
   static get encapsulation() { return "shadow"; }
@@ -75,4 +76,5 @@ export class YooCourseInfoCardComponent {
       }
     };
   }
+  static get elementRef() { return "host"; }
 }

package/dist/collection/components/2.molecules/item-options/item-options.css

@@ -247,4 +247,9 @@ yoo-ion-item-options.web {
 .item-sliding-active-slide.item-sliding-active-options-start .item-options-start, .item-sliding-active-slide.item-sliding-active-options-end yoo-ion-item-options:not(.item-options-start) {
   width: 100%;
   visibility: visible;
+}
+
+:host(.rtl) .item-options-start {
+  right: 0;
+  left: unset;
 }

package/dist/collection/components/2.molecules/modal/modal.js

@@ -1,5 +1,5 @@
 import { FullscreenImportantModalClass } from '@shared/interfaces';
-import { dismiss, Draggable, fadeScaleAnimation, findDevice, getDialogPosition, getModalAnimation, getSession, gsapSet, gsapTo, isAnimationsDisabled, isIphoneX, isOffline, isSafari, isWeb, MODAL_BASE_ZINDEX, present } from '@shared/utils';
+import { dismiss, Draggable, fadeScaleAnimation, findDevice, getDialogPosition, getModalAnimation, getSession, gsapSet, gsapTo, isAnimationsDisabled, isIphoneX, isOffline, isRTL, isSafari, isWeb, MODAL_BASE_ZINDEX, present } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { debounce, inRange } from 'lodash-es';
 import { getAppContext, lifecycleEvents, querySelectorDeep } from '../../../utils/helpers/common-helpers';
@@ -355,7 +355,7 @@ export class YooModalComponent {
       const hostBoundings = hostElement.getBoundingClientRect();
       const { height, left, top, placement } = getDialogPosition(hostElement, 'below', this.dialogElement, ((_b = (_a = this.componentProps) === null || _a === void 0 ? void 0 : _a.dialogContentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || hostBoundings.width);
       this.dialogElement.style.margin = '0';
-      if (document.dir === 'rtl') {
+      if (isRTL()) {
         this.dialogElement.style.right = 'unset';
       }
       this.dialogElement.style.left = `${left}px`;
@@ -502,7 +502,7 @@ export class YooModalComponent {
     const isProfilePreview = this.host.classList.contains('profile');
     const dialogClasses = { ...createThemedClasses(undefined, 'modal-wrapper') };
     const leftPosition = this.componentProps ? `${this.componentProps.position}px` : '0px';
-    const dialogStyle = { zIndex: this.zIndexOverlay, left: leftPosition };
+    const dialogStyle = { zIndex: this.zIndexOverlay, [isRTL() ? 'right' : 'left']: leftPosition };
     return (h("div", { ref: (el) => (this.dialogElement = el), role: "dialog", class: dialogClasses, style: dialogStyle }, isPreview && isProfilePreview && [h("div", { class: "fade-overlay top" }), h("div", { class: "fade-overlay bottom" })]));
   }
   render() {

package/dist/collection/components/2.molecules/profile-list/profile-list.css

@@ -307,4 +307,9 @@ svg:not(:root) {
 
 :host(.web.personal-view) yoo-links-menu {
   background-color: unset;
+}
+
+:host(.rtl) .user-list-container .user-info-list .start-container yoo-icon {
+  margin-right: 0;
+  margin-left: var(--spacing-16, 1rem);
 }

package/dist/collection/components/2.molecules/profile-list/profile-list.js

@@ -1,5 +1,6 @@
 import { copyToClipboard, dateFormat, getSession, isWeb, showToast, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
+import { getAppContext } from '../../../utils/helpers/common-helpers';
 export class YooProfileListComponent {
   constructor() {
     this.isPreview = false;
@@ -154,7 +155,7 @@ export class YooProfileListComponent {
     ];
   }
   render() {
-    return h(Host, { class: { 'web': isWeb(this.host), 'personal-view': this.personalView } }, this.personalView ? this.renderProfileLinks() : this.renderUserInformation());
+    return h(Host, { class: { 'personal-view': this.personalView, ...getAppContext(this.host) } }, this.personalView ? this.renderProfileLinks() : this.renderUserInformation());
   }
   static get is() { return "yoo-profile-list"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/2.molecules/segmented-control/segmented-control.css

@@ -234,7 +234,6 @@ svg:not(:root) {
   box-sizing: border-box;
   width: 100%;
   margin: 0;
-  padding-left: var(--spacing-04, 0.25rem);
   color: var(--text-color, #807f83);
   font-weight: var(--font-weight-400, 400);
   font-size: var(--font-size-12, 0.75rem);
@@ -307,4 +306,8 @@ svg:not(:root) {
   background: var(--app-color, #5a30f4);
   border-radius: var(--border-radius-08, 0.5rem);
   box-shadow: var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));
+}
+
+:host(.rtl) {
+  direction: rtl;
 }

package/dist/collection/components/2.molecules/segmented-control/segmented-control.js

@@ -1,4 +1,4 @@
-import { resizeObserve, translate } from '@shared/utils';
+import { isRTL, resizeObserve, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooSegmentedControlComponent {
   constructor() {
@@ -19,16 +19,18 @@ export class YooSegmentedControlComponent {
     resizeObserve(this.host, this.moveActiveBackground.bind(this));
     this.moveActiveBackground();
   }
-  moveActiveBackground() {
+  moveActiveBackground(index = this.initialIndex) {
     var _a, _b;
-    this.activeBackgroundEl.style.width = `${(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
-    this.activeBackgroundEl.style.marginLeft = `${(_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.offsetLeft}px`;
+    if (this.activeElement) {
+      this.activeBackgroundEl.style.width = `${(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
+      this.activeBackgroundEl.style[isRTL() ? 'marginRight' : 'marginLeft'] = `${((_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.offsetWidth) * index}px`;
+    }
   }
   onSegmentClick(ev, index) {
     if (!this.readonly) {
       const target = ev.target;
       this.activeElement = target.closest('.segment-container');
-      this.moveActiveBackground();
+      this.moveActiveBackground(index);
       this.selectedIndex = index;
       this.segmentSelected.emit(index);
     }
@@ -48,7 +50,7 @@ export class YooSegmentedControlComponent {
     return (h("div", { class: "segment-content" }, h("input", { checked: this.selectedIndex === index, name: `${index}`, type: "radio", value: index }), value.icon && h("yoo-icon", { size: this.size === 'large' ? 'medium' : this.size === 'medium' ? 'small' : this.size, name: value.icon, color: index === this.selectedIndex ? 'light' : 'stable' }), value.label && h("yoo-truncated-line", null, h("h3", null, translate(value.label)))));
   }
   render() {
-    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null } }, this.renderSegments(), h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));
+    return h(Host, { style: { maxWidth: this.maxWidth ? this.maxWidth + 'px' : null }, class: { rtl: isRTL() } }, this.renderSegments(), h("span", { ref: el => this.activeBackgroundEl = el, class: "active-background" }));
   }
   static get is() { return "yoo-segmented-control"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/2.molecules/slides/slides.css

@@ -1789,4 +1789,12 @@ button.swiper-pagination-bullet {
 :host(.swiper-cards) ::slotted(.swiper-slide) {
   background: var(--light, #ffffff);
   box-shadow: cssva(shadow-04);
+}
+
+:host(.rtl) {
+  direction: rtl;
+}
+:host(.rtl) .swiper-button-prev yoo-icon,
+:host(.rtl) .swiper-button-next yoo-icon {
+  transform: unset;
 }

package/dist/collection/components/2.molecules/slides/slides.js

@@ -1,4 +1,4 @@
-import { isNullOrUndefined, isWeb } from '@shared/utils';
+import { isNullOrUndefined, isRTL, isWeb } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext } from '../../../utils/helpers/common-helpers';
 import { createThemedClasses } from '../../../utils/ionic/theme';
@@ -300,8 +300,8 @@ export class YooIonSlidesComponent {
   async updateNavigationButtonsState() {
     if (this.showArrows) {
       const { isBeginning, isEnd } = await this.getSwiperInstance() || {};
-      this.isAtBeginningPosition = isBeginning;
-      this.isAtEndPosition = isEnd;
+      this.isAtBeginningPosition = isRTL() ? isEnd : isBeginning;
+      this.isAtEndPosition = isRTL() ? isBeginning : isEnd;
     }
   }
   async initSwiper() {
@@ -473,9 +473,9 @@ export class YooIonSlidesComponent {
   render() {
     return (h(Host, { class: { ...getAppContext(this.el), ...createThemedClasses('ios', 'slides') } }, h("div", { class: "swiper-wrapper" }, h("slot", null)), this.pager && h("div", { class: "swiper-pagination", ref: (el) => (this.paginationEl = el) }), this.showArrows && [
       !this.isAtBeginningPosition &&
-        h("div", { ref: (el) => (this.navigationPreviousEl = el), class: "swiper-button-prev", onClick: () => this.slidePrev() }, h("yoo-button", { class: "no-border shadow", color: "light", size: "medium", shape: "circular" }, h("yoo-icon", { color: "dark", name: "left", size: "small" }))),
+        h("div", { ref: (el) => (this.navigationPreviousEl = el), class: "swiper-button-prev", onClick: () => isRTL() ? this.slideNext() : this.slidePrev() }, h("yoo-button", { class: "no-border shadow", color: "light", size: "medium", shape: "circular" }, h("yoo-icon", { color: "dark", name: "left", size: "small" }))),
       !this.isAtEndPosition &&
-        h("div", { ref: (el) => (this.navigationNextEl = el), class: "swiper-button-next", onClick: () => this.slideNext() }, h("yoo-button", { class: "no-border shadow", color: "light", size: "medium", shape: "circular" }, h("yoo-icon", { color: "dark", name: "right", size: "small" })))
+        h("div", { ref: (el) => (this.navigationNextEl = el), class: "swiper-button-next", onClick: () => isRTL() ? this.slidePrev() : this.slideNext() }, h("yoo-button", { class: "no-border shadow", color: "light", size: "medium", shape: "circular" }, h("yoo-icon", { color: "dark", name: "right", size: "small" })))
     ], this.scrollbar && h("div", { class: "swiper-scrollbar", ref: (el) => (this.scrollbarEl = el) })));
   }
   static get is() { return "yoo-ion-slides"; }

package/dist/collection/components/2.molecules/text-sequence/text-sequence.js

@@ -46,12 +46,15 @@ export class YooTextSequence {
   componentDidUpdate() {
     this.initSequencesHeight();
   }
+  updateValidity() {
+    this.validity = this.validity || (this.currentIndex === this.sequenceElements.length - 1);
+  }
   initSequencesHeight() {
     var _a;
     if (this.revealSequences && ((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
       this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
       this.sequenceElements.forEach(e => e.classList.toggle('overflowing', e.scrollHeight > this.maxSequenceHeight));
-      this.validity = this.currentIndex === this.sequenceElements.length - 1;
+      this.updateValidity();
     }
   }
   renderSequences() {
@@ -71,7 +74,7 @@ export class YooTextSequence {
         const textsHeight = this.sequenceElements.map((e, i) => Math.round(e.offsetHeight * (i <= this.currentIndex ? 1 : .9)));
         this.host.style.setProperty('--max-sequence-height', `${this.maxSequenceHeight}px`);
         this.translateY = 0 - ((textsHeight.slice(0, this.currentIndex).reduce((acc, a) => acc + a, 0) + GAP_INTER_SEQUENCES * this.currentIndex));
-        this.validity = this.currentIndex === this.sequenceElements.length - 1;
+        this.updateValidity();
       }
     };
     return h("yoo-button", { size: "large", ...{ placement }, hidden: (isUp && !this.currentIndex) || (!isUp && this.currentIndex === ((_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.length) - 1), ...(!isUp && this.animated && { onanimationend: () => this.revealSequences = true }), onClick: () => clickArrow() }, h("yoo-icon", { name: `big-arrow-${isUp ? 'up' : 'down'}` }));

package/dist/collection/components/3.organisms/photo-editor/photo-editor.css

@@ -291,15 +291,15 @@ svg:not(:root) {
   transition: transform 750ms ease-in-out;
 }
 :host yoo-range[status=hidden] {
-  --x-range-position: -3rem;
+  --x-range-position: calc(var(--spacing-48, 3rem) * -1);
 }
 :host yoo-range[status=inactive] {
   --scale: 1;
-  --x-range-position: -.5rem;
+  --x-range-position: calc(var(--spacing-08, 0.5rem) * -1);
 }
 :host yoo-range[status=active] {
   --scale: 1.1;
-  --x-range-position: 1rem;
+  --x-range-position: var(--spacing-16, 1rem);
 }
 :host yoo-range .triangle {
   position: absolute;
@@ -332,6 +332,18 @@ svg:not(:root) {
   opacity: 0.75;
 }
 
+:host(.rtl) yoo-range[status=hidden] {
+  --x-range-position: var(--spacing-48, 3rem);
+}
+:host(.rtl) yoo-range[status=inactive] {
+  --scale: 1;
+  --x-range-position: var(--spacing-08, 0.5rem);
+}
+:host(.rtl) yoo-range[status=active] {
+  --scale: 1.1;
+  --x-range-position: calc(var(--spacing-16, 1rem) * -1);
+}
+
 :host([animated]) yoo-navbar.animated yoo-button {
   animation-fill-mode: forwards;
 }

package/dist/collection/components/3.organisms/photo-editor/photo-editor.js

@@ -20,7 +20,7 @@ import { forceUpdate, h, Host } from '@stencil/core';
 import { capitalize, cloneDeep, isEqual, isFunction } from 'lodash-es';
 import { getFromOfflineStorage } from '../../../utils/cache';
 import { getElement, getPointerCoordinates, isAnnotationDeleted, isAnnotationEmpty, isAnnotationFocused, isAnnotationValid, isElementInsideContainer } from '../../../utils/helpers/annotations-helpers';
-import { cloudinary } from '../../../utils/helpers/common-helpers';
+import { cloudinary, getAppContext } from '../../../utils/helpers/common-helpers';
 import { createDot, getDotInnerElement, getDotToolTipElement, hideAllDotTooltips, setDotIndexes, showDotTooltip } from '../../../utils/helpers/draggable-dots-helpers';
 import { focusContentEditable } from '../../../utils/helpers/form-input-helpers';
 import { Dot, Textbox } from './components/annotations';
@@ -1289,7 +1289,7 @@ export class YooPhotoEditorComponent {
     return (this.isImageEditable && (h("footer", { class: { 'has-description': hasDescription }, ref: (el => this.footerElement = el) }, hasDescription && h("div", { class: "description-container" }, this.description), h("yoo-color-selector", { disablePicker: this.isTextCreateMode, selectedColor: selectedColor, ref: (el) => (this.colorSelectorElement = el), onPickerSelected: () => this.onPickColor(), onColorSelected: (event) => this.onSelectColor(event === null || event === void 0 ? void 0 : event.detail) }))));
   }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': !this.isReadonly }, ...(this.isPreview && !this.isImageZoomable && this.imageSizeStyle), onClick: (ev) => this.outsideImageClick(ev) }, this.renderHeader(), this.renderContent(), this.renderFooter(), this.renderSlider(), this.renderActionButtons(), this.renderLoader()));
+    return (h(Host, { class: { 'swiper-no-swiping': !this.isReadonly, ...getAppContext(this.host) }, ...(this.isPreview && !this.isImageZoomable && this.imageSizeStyle), onClick: (ev) => this.outsideImageClick(ev) }, this.renderHeader(), this.renderContent(), this.renderFooter(), this.renderSlider(), this.renderActionButtons(), this.renderLoader()));
   }
   static get is() { return "yoo-photo-editor"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/entities/card/card.css

@@ -749,6 +749,17 @@ yoo-img {
   box-shadow: none;
 }
 
+:host(.rtl) .online-indicator,
+:host(.rtl) .offline-indicator {
+  right: auto;
+  left: 0;
+}
+
+:host(.rtl.inline) {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/entities/card-list/color/card-list-color.css

@@ -509,4 +509,27 @@ svg:not(:root) {
 }
 :host(.coursecategories) .outer-container .heading-container {
   font-weight: initial;
+}
+
+:host .outer-container .heading-container.rtl,
+:host(.dashboards) .outer-container .heading-container.rtl {
+  text-align: right;
+}
+:host .outer-container .heading-container.rtl .heading,
+:host(.dashboards) .outer-container .heading-container.rtl .heading {
+  text-align: right;
+}
+:host .outer-container .heading-container.rtl .icon-right,
+:host(.dashboards) .outer-container .heading-container.rtl .icon-right {
+  margin-right: var(--spacing-08, 0.5rem);
+  margin-left: 0;
+}
+:host .outer-container .heading-container.rtl .icon-left,
+:host(.dashboards) .outer-container .heading-container.rtl .icon-left {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+:host .outer-container .heading-container.rtl + .subheading-container,
+:host(.dashboards) .outer-container .heading-container.rtl + .subheading-container {
+  text-align: right;
 }

package/dist/collection/components/entities/card-list/color/card-list-color.js

@@ -10,7 +10,8 @@ export class YooCardListColorComponent {
     var _a, _b, _c, _d;
     const { iconTopMiddle, iconTopMiddleColor, iconTopMiddleCustomColor, iconTopRight, iconTopRightColor, iconTopLeft, iconTopLeftColor, color, heading } = this.entry;
     const bigIcon = ((_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('creationtypes')) || ((_d = (_c = this.host) === null || _c === void 0 ? void 0 : _c.classList) === null || _d === void 0 ? void 0 : _d.contains('missiondescriptiontemplates'));
-    return (h("div", { class: "heading-container", style: { '--align-items': iconTopMiddle ? 'center' : 'normal', '--flex-direction': iconTopMiddle ? 'column-reverse' : 'row', fill: color } }, !!iconTopLeft && (h("div", { class: "icon-left" }, h("yoo-icon", { size: bigIcon ? 'large' : 'medium', name: iconTopLeft, color: iconTopLeftColor }), this.notif && h("yoo-badge", { shape: "dot" }))), h("div", { class: "heading", innerHTML: translateMulti(heading || '') }), !!iconTopRight && (h("div", { class: "icon-right" }, h("yoo-icon", { size: "medium", name: iconTopRight, color: iconTopRightColor }), this.notif && h("yoo-badge", { shape: "dot" }))), !!iconTopMiddle && (h("div", { class: "icon-middle" }, h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor, customColor: iconTopMiddleCustomColor }), this.notif && h("yoo-badge", { shape: "dot" })))));
+    const classes = document.dir + ' heading-container';
+    return (h("div", { class: classes, style: { '--align-items': iconTopMiddle ? 'center' : 'normal', '--flex-direction': iconTopMiddle ? 'column-reverse' : 'row', fill: color } }, !!iconTopLeft && (h("div", { class: "icon-left" }, h("yoo-icon", { size: bigIcon ? 'large' : 'medium', name: iconTopLeft, color: iconTopLeftColor }), this.notif && h("yoo-badge", { shape: "dot" }))), h("div", { class: "heading", innerHTML: translateMulti(heading || '') }), !!iconTopRight && (h("div", { class: "icon-right" }, h("yoo-icon", { size: "medium", name: iconTopRight, color: iconTopRightColor }), this.notif && h("yoo-badge", { shape: "dot" }))), !!iconTopMiddle && (h("div", { class: "icon-middle" }, h("yoo-icon", { size: "medium", name: iconTopMiddle, color: iconTopMiddleColor, customColor: iconTopMiddleCustomColor }), this.notif && h("yoo-badge", { shape: "dot" })))));
   }
   renderSubHeader() {
     const { subHeading } = this.entry;

package/dist/collection/components/entities/card-list/default/card-list.css

@@ -715,7 +715,7 @@ svg:not(:root) {
 }
 :host .outer-container .content-container .tags-container yoo-tag,
 :host .outer-container .content-container .tags-container .card-icon {
-  margin: 0.2rem var(--spacing-08, 0.5rem) 0.0625rem 0.0625rem;
+  margin: var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem) var(--spacing-02, 0.125rem) var(--spacing-02, 0.125rem);
 }
 :host .outer-container .content-container .tags-container .hashtag {
   display: flex;
@@ -780,6 +780,22 @@ svg:not(:root) {
   height: 100%;
 }
 
+:host(.mobile.rtl) .outer-container .content-container {
+  margin-right: var(--margin-content-container-left);
+  margin-left: var(--margin-content-container-right);
+}
+:host(.mobile.rtl) .outer-container .content-container.has-image {
+  margin-right: 0;
+}
+:host(.mobile.rtl) .outer-container .content-container .tags-container yoo-tag,
+:host(.mobile.rtl) .outer-container .content-container .tags-container .card-icon {
+  margin: var(--spacing-04, 0.25rem) var(--spacing-02, 0.125rem) var(--spacing-02, 0.125rem) var(--spacing-08, 0.5rem);
+}
+:host(.mobile.rtl) .outer-container .content-container .top-container .subheading-container {
+  margin-right: 0;
+  margin-left: var(--spacing-32, 2rem);
+}
+
 :host(.current) .outer-container .rank-container {
   color: var(--app-color, #5a30f4);
 }