@yoobic/yobi 8.5.0-45 → 8.5.0-46

package/dist/cjs/yoo-widget-tab.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
-require('./index-3f2bca41.js');
+require('./index-ca271bba.js');
 const lodash = require('./lodash-a9050d79.js');
-const overlays = require('./overlays-c545c947.js');
-require('./index-f9aace31.js');
+const overlays = require('./overlays-3067754c.js');
+require('./index-4f7e1f11.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const widgetTabCss = "svg:not(:root){overflow:hidden}:host p{margin:0;margin-block:0;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-14, 0.875rem);text-align:center}:host yoo-progress-bar{--svg-fill:none;--progress-value-font-weight:var(--font-weight-900, 900);--progress-value-font-size:var(--font-size-36, 2.25rem);-ms-flex-item-align:center;align-self:center;width:6rem;margin:var(--spacing-08, 0.5rem)}:host yoo-progress-bar.has-status{--progress-bar-color:var(--light, #ffffff);--trail-bar-color:var(--light-20, rgba(255, 255, 255, 0.2));--progress-value-color:var(--light, #ffffff)}:host yoo-progress-bar:not(.has-status){--progress-bar-color:var(--app-color, #5a30f4);--trail-bar-color:var(--app-color-20, rgba(90, 48, 244, 0.2));--progress-value-color:var(--app-color, #5a30f4)}:host yoo-progress-bar:not([metric=percentage]){--progress-value-font-size:var(--font-size-54, 3.375rem);--progress-bar-display:none;--trail-bar-display:none}:host yoo-tooltip{position:absolute;top:var(--spacing-08, 0.5rem);right:var(--spacing-08, 0.5rem)}:host .value{padding:var(--spacing-16, 1rem);font-weight:bold;font-size:var(--font-size-36, 2.25rem);text-align:center}:host .arrow-container{z-index:1;display:-ms-flexbox;display:flex;width:0;height:0;margin:var(--spacing-08, 0.5rem) auto 0;padding-top:var(--spacing-04, 0.25rem);border-right:0.75rem solid transparent;border-bottom:0.625rem solid var(--light, #ffffff);border-left:0.75rem solid transparent}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-04, 0.25rem);border-radius:var(--border-radius-04, 0.25rem)}:host([disabled]) .outer-container{color:var(--stable-light, #f1f1f1);background:var(--stable, #adadad);cursor:no-drop;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:not([disabled])) .outer-container{cursor:pointer}:host([is-active]:not([disabled])) .outer-container{color:var(--light, #ffffff);background:var(--app-color, #5a30f4);-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host(:not([disabled]):not([is-active])) .arrow-container{visibility:hidden}:host(:not([disabled]):not([is-active])) .outer-container{color:var(--app-color, #5a30f4);background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host(.medium) .value{font-size:var(--font-size-28, 1.75rem)}";

package/dist/cjs/yoo-widget-tile.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
-require('./index-3f2bca41.js');
-const overlays = require('./overlays-c545c947.js');
+require('./index-ca271bba.js');
+const overlays = require('./overlays-3067754c.js');
 require('./lodash-a9050d79.js');
-require('./index-f9aace31.js');
+require('./index-4f7e1f11.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const widgetTileCss = "svg:not(:root){overflow:hidden}:host .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end;width:100%;height:100%;color:var(--dark, #000000);background-color:var(--stable-light, #f1f1f1);border-radius:0.5rem;cursor:pointer}:host .outer-container.hasPhoto{color:var(--light, #ffffff)}:host .outer-container.hasPhoto .tile-text{text-align:center}:host .outer-container .image{background-position:center;border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:rgba(0, 0, 0, 0.15);border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container yoo-icon{position:absolute;top:0.5rem;left:0.5rem}:host .outer-container .tile-text{position:absolute;right:0.5rem;bottom:0.5rem;left:0.5rem;z-index:2;margin:auto;font-weight:bold;font-size:var(--font-size-16, 1rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.layout4x3) .outer-container yoo-icon{display:none}";

package/dist/cjs/yoo-workflow-state-dialog.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
-require('./index-3f2bca41.js');
-const overlays = require('./overlays-c545c947.js');
+require('./index-ca271bba.js');
+const overlays = require('./overlays-3067754c.js');
 require('./lodash-a9050d79.js');
-require('./index-f9aace31.js');
+require('./index-4f7e1f11.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const workflowStateDialogCss = "svg:not(:root){overflow:hidden}:host{width:100%}:host .content{padding:var(--spacing-16, 1rem)}:host .info-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-16, 1rem);font-size:var(--font-size-14, 0.875rem)}:host .info-container.no-margin{margin-bottom:0}:host .info-container.no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}:host .info-container .title{margin-bottom:var(--spacing-04, 0.25rem)}:host .info-container .user{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;color:var(--dark, #000000)}:host .info-container yoo-avatar,:host .info-container .user-name{margin-right:var(--spacing-08, 0.5rem)}:host .info-container .comments{-ms-flex:1;flex:1;margin-left:var(--spacing-32, 2rem);color:var(--dark, #000000)}";

package/dist/cjs/yoo-workflow-state.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
-require('./index-3f2bca41.js');
+require('./index-ca271bba.js');
 const lodash = require('./lodash-a9050d79.js');
-const overlays = require('./overlays-c545c947.js');
-require('./index-f9aace31.js');
+const overlays = require('./overlays-3067754c.js');
+require('./index-4f7e1f11.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const workflowStateCss = "svg:not(:root){overflow:hidden}:host{width:100%}:host .menu{-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;padding:0;list-style:none}:host .menu .menu-item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .menu .menu-item:not(:last-child) .menu-content{margin-bottom:var(--spacing-24, 1.5rem)}:host .menu .menu-item .menu-left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}:host .menu .menu-item .menu-left.with-dot{width:2rem;margin-left:0.0313rem}:host .menu .menu-item .menu-left .menu-icon{z-index:2;width:1.875rem;height:1.875rem;text-align:center}:host .menu .menu-item .menu-left .menu-icon.menu-dot{width:1rem;height:1rem}:host .menu .menu-item .menu-left .menu-icon yoo-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:1.875rem;height:1.875rem;padding:0;color:var(--light, #ffffff);font-size:var(--font-size-18, 1.125rem);line-height:1.875rem;background-color:var(--app-color, #5a30f4);border-radius:50%}:host .menu .menu-item .menu-left .menu-icon yoo-icon.dark{background-color:var(--dark, #000000)}:host .menu .menu-item .menu-left .menu-icon yoo-icon.info{background-color:var(--info, #d84c96)}:host .menu .menu-item .menu-left .menu-icon yoo-icon.danger{background-color:var(--danger, #d44333)}:host .menu .menu-item .menu-left .border{width:0.0625rem;height:100%;background-color:var(--stable-alt, #d0d0d0)}:host .menu .menu-item .menu-left .border.border-pre{height:2.5rem}:host .menu .menu-item .menu-left .border.border-pre.last{height:1rem}:host .menu .menu-item .menu-left .border.dark{background-color:var(--dark, #000000)}:host .menu .menu-item .menu-left .border.danger{background-color:var(--danger, #d44333)}:host .menu .menu-item .menu-left .border.info{background-color:var(--info, #d84c96)}:host .menu .menu-item .menu-right{width:100%;margin-left:var(--spacing-08, 0.5rem);overflow:hidden}:host .menu .menu-item .menu-right .menu-title{font-weight:bold;line-height:1}:host .menu .menu-item .menu-right .menu-content{color:var(--text-color, #807f83)}:host .menu .menu-item .menu-right .menu-content.menu-chart{margin-bottom:0}:host .menu .menu-item .menu-right .menu-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2rem}:host .menu .menu-item .menu-right .menu-content span{margin-right:0.5rem}:host .menu .menu-item .menu-right .menu-content yoo-avatar{margin-right:0.3125rem}:host .menu .menu-item .menu-right .menu-content .font-medium{font-size:var(--font-size-14, 0.875rem)}:host .menu .menu-item .menu-right .menu-content .font-small{font-size:var(--font-size-12, 0.75rem)}:host .menu .menu-item .menu-right .menu-content .dark{color:var(--dark, #000000)}:host .menu .menu-item .menu-right .menu-content .success{color:var(--success, #3aa76d)}:host .menu .menu-item .menu-right .menu-content .danger{color:var(--danger, #d44333)}:host .menu .menu-item .menu-right .menu-content .text-color{color:var(--text-color, #807f83)}:host .menu .menu-item .menu-right .menu-content table{width:100%;table-layout:fixed}:host .menu .menu-item .menu-right .menu-content table td{overflow:hidden;text-overflow:ellipsis}:host .menu .dot{width:0.25rem;height:0.25rem;margin:0 0.125rem;border:var(--border-width-04, 0.25rem) solid var(--stable, #adadad);border-radius:50%}:host .menu .menu-content .step{margin-bottom:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);padding-top:var(--spacing-08, 0.5rem);background-color:var(--stable-light, #f1f1f1);border-radius:0.25rem}:host .menu .menu-content .step.completed{padding-top:var(--spacing-16, 1rem);padding-left:0;background-color:var(--light, #ffffff)}:host .menu .menu-content .step.rejected{padding-top:var(--spacing-16, 1rem);padding-left:0;background-color:var(--light, #ffffff)}:host .menu .menu-content .step.active{padding-top:var(--spacing-16, 1rem);padding-left:0;background-color:var(--light, #ffffff)}:host .menu .menu-content .step .header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2rem}:host .menu .menu-content .step .header .title{-ms-flex:1;flex:1;padding-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000);font-weight:bold;font-size:var(--font-size-16, 1rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:capitalize}:host .menu .menu-content .step .header .detail{opacity:0.8}:host .menu .menu-content .step .comments .header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .menu .menu-content .step .substeps-container{margin-top:var(--spacing-08, 0.5rem);margin-left:var(--spacing-08, 0.5rem)}:host .menu .menu-content .step .substeps-container .substep{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .menu .menu-content .step .substeps-container .substep yoo-icon,:host .menu .menu-content .step .substeps-container .substep .dot{margin-right:var(--spacing-08, 0.5rem)}";

package/dist/cjs/yoo-workflow.cjs.entry.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
-require('./index-3f2bca41.js');
+require('./index-ca271bba.js');
 const lodash = require('./lodash-a9050d79.js');
 const workflow_interface = require('./workflow.interface-ffda8358.js');
-const commonHelpers = require('./common-helpers-edf7fda5.js');
-const index$3 = require('./index-4bfdbba0.js');
-const index$1 = require('./index-ca9892e9.js');
+const commonHelpers = require('./common-helpers-e0f8defd.js');
+const index$3 = require('./index-94dd8800.js');
+const index$1 = require('./index-9da30f33.js');
 const index$2 = require('./index-9c56868f.js');
-const overlays = require('./overlays-c545c947.js');
-require('./index-f9aace31.js');
+const overlays = require('./overlays-3067754c.js');
+require('./index-4f7e1f11.js');
 require('./annotations-helpers-fb554cca.js');
 require('./_commonjsHelpers-94df2ea7.js');
 

package/dist/cjs/yoo-zebra.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
-const overlays = require('./overlays-c545c947.js');
-require('./index-3f2bca41.js');
+const overlays = require('./overlays-3067754c.js');
+require('./index-ca271bba.js');
 require('./lodash-a9050d79.js');
-require('./index-f9aace31.js');
+require('./index-4f7e1f11.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/cjs/yoo-zoom.cjs.entry.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7319daa9.js');
-require('./index-3f2bca41.js');
+require('./index-ca271bba.js');
 const lodash = require('./lodash-a9050d79.js');
 const annotationsHelpers = require('./annotations-helpers-fb554cca.js');
 const hammerHelpers = require('./hammer-helpers-e8117959.js');
-const overlays = require('./overlays-c545c947.js');
+const overlays = require('./overlays-3067754c.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-f9aace31.js');
+require('./index-4f7e1f11.js');
 
 const zoomCss = "svg:not(:root){overflow:hidden}:host{overflow:hidden}:host([disabled]){cursor:default}:host([disabled]) ::slotted(*){-ms-touch-action:auto !important;touch-action:auto !important}";
 

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

@@ -747,4 +747,15 @@ yoo-img {
 :host(.no-indicator-box-shadow) .viewed-story-indicator,
 :host(.no-indicator-box-shadow) .framing-container {
   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);
 }

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

@@ -3,7 +3,7 @@
  * @name: yoo-avatar
  */
 import { isPaletteColor } from '@shared/interfaces';
-import { isOffline, isWeb, pipes, translate } from '@shared/utils';
+import { isOffline, isRTL, isWeb, pipes, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooAvatarComponent {
   constructor() {
@@ -157,7 +157,7 @@ export class YooAvatarComponent {
   render() {
     const TagType = this.tooltip ? 'yoo-tooltip' : 'div';
     const hasUserText = this.user && (!this.user.imageData || isOffline());
-    return (h(Host, { size: this.size, frame: this.frame }, h(TagType, { class: "component-container", content: this.tooltip, placement: "bottom", hoverable: isWeb(this.host) }, h("div", { class: "component-states-container" }, this.renderOnlineIcon(), this.renderStoriesIndicator(), this.isVip && this.renderIsVip(), this.hasNotifications && this.renderNotification(), this.hasLiveVideo && this.renderLiveIndicator(), this.hasRecordedVideo && this.renderRecordedIndicator(), this.vipNotification && this.renderVipNotification()), h("div", { class: { 'framing-container': true, grayed: hasUserText }, style: {
+    return (h(Host, { size: this.size, frame: this.frame, class: { rtl: isRTL() } }, h(TagType, { class: "component-container", content: this.tooltip, placement: "bottom", hoverable: isWeb(this.host) }, h("div", { class: "component-states-container" }, this.renderOnlineIcon(), this.renderStoriesIndicator(), this.isVip && this.renderIsVip(), this.hasNotifications && this.renderNotification(), this.hasLiveVideo && this.renderLiveIndicator(), this.hasRecordedVideo && this.renderRecordedIndicator(), this.vipNotification && this.renderVipNotification()), h("div", { class: { 'framing-container': true, grayed: hasUserText }, style: {
         'background-color': hasUserText ? undefined : this.getColor(true),
         'border': this.color && this.showBorder ? '2px solid ' + (isPaletteColor(this.color) ? `var(--${this.color})` : this.color) : null
       } }, this.renderBasedOnSource()))));

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

@@ -766,12 +766,17 @@ svg:not(:root) {
   line-height: inherit;
 }
 :host([shape=rectangular]:not(.no-padding)) button ::slotted([slot=start]) {
-  margin-right: var(--spacing-08, 0.5rem) !important;
+  margin-right: var(--spacing-08, 0.5rem);
 }
 :host([shape=rectangular]:not(.no-padding)) button ::slotted([slot=end]) {
   margin-left: var(--spacing-08, 0.5rem) !important;
 }
 
+:host(.rtl[shape=rectangular]:not(.no-padding)) button ::slotted([slot=start]) {
+  margin-right: unset;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+
 :host([size=small]) button {
   height: 1.5rem;
   font-size: var(--font-size-12, 0.75rem);
@@ -927,6 +932,12 @@ svg:not(:root) {
   box-shadow: var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));
 }
 
+:host(.fab.rtl) {
+  right: unset;
+  bottom: var(--spacing-16, 1rem);
+  left: var(--spacing-16, 1rem);
+}
+
 :host(.fab-left) {
   position: absolute;
   bottom: var(--spacing-16, 1rem);

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

@@ -431,4 +431,13 @@ svg:not(:root) {
 
 :host(.full-width) .outer-container .title {
   flex: 1;
+}
+
+:host(.rtl) .header-container yoo-icon.prefix {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+:host(.rtl) .header-container .title {
+  padding-right: 0;
+  padding-left: var(--spacing-08, 0.5rem);
 }

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

@@ -1,4 +1,4 @@
-import { translate } from '@shared/utils';
+import { isRTL, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 export class YooCollapsibleComponent {
   constructor() {
@@ -57,7 +57,7 @@ export class YooCollapsibleComponent {
       h("yoo-button", { class: "deletable", shape: "square", onClick: (ev) => this.deleteItem(ev) }, h("yoo-icon", { name: "delete", size: "small" }));
   }
   render() {
-    return (h(Host, { collapsed: this.collapsed }, h("div", { class: { 'outer-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.outerContainer = el) }, !this.useButton && (h("div", { class: "header-container", onClick: () => !this.toggleWithArrowOnly && this.toggleContent() }, this.icon && !this.isPdf && h("yoo-icon", { class: "prefix", name: this.icon, color: this.iconColor || 'stable', size: this.iconSize }), h("span", { class: { title: true, pdf: this.isPdf } }, this.header, this.slotHeader && h("slot", { name: "title" })), !this.isPdf && this.hasArrowIcon && (h("yoo-icon", { onClick: () => this.toggleWithArrowOnly && this.toggleContent(), size: this.iconSize, name: this.collapsed ? 'arrow-down' : 'arrow-up', color: this.arrowColor || 'dark', ref: (el) => (this.arrow = el) })), h("slot", { name: "title-extra-icon" }), this.renderDeleteButton())), this.useButton && (h("div", { class: "header-container button", onClick: () => this.toggleContent() }, h("yoo-button", { color: !this.collapsed ? 'app-color' : 'light', ref: (el) => (this.button = el) }, this.icon && h("yoo-icon", { name: this.icon, color: !this.collapsed ? 'light' : 'dark', slot: "start", size: this.iconSize, ref: (el) => (this.buttonIcon = el) }), this.header), this.renderDeleteButton())), h("div", { class: { 'slot-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.slotContainer = el) }, h("slot", null)))));
+    return (h(Host, { collapsed: this.collapsed, class: { rtl: isRTL() } }, h("div", { class: { 'outer-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.outerContainer = el) }, !this.useButton && (h("div", { class: "header-container", onClick: () => !this.toggleWithArrowOnly && this.toggleContent() }, this.icon && !this.isPdf && h("yoo-icon", { class: "prefix", name: this.icon, color: this.iconColor || 'stable', size: this.iconSize }), h("span", { class: { title: true, pdf: this.isPdf } }, this.header, this.slotHeader && h("slot", { name: "title" })), !this.isPdf && this.hasArrowIcon && (h("yoo-icon", { onClick: () => this.toggleWithArrowOnly && this.toggleContent(), size: this.iconSize, name: this.collapsed ? 'arrow-down' : 'arrow-up', color: this.arrowColor || 'dark', ref: (el) => (this.arrow = el) })), h("slot", { name: "title-extra-icon" }), this.renderDeleteButton())), this.useButton && (h("div", { class: "header-container button", onClick: () => this.toggleContent() }, h("yoo-button", { color: !this.collapsed ? 'app-color' : 'light', ref: (el) => (this.button = el) }, this.icon && h("yoo-icon", { name: this.icon, color: !this.collapsed ? 'light' : 'dark', slot: "start", size: this.iconSize, ref: (el) => (this.buttonIcon = el) }), this.header), this.renderDeleteButton())), h("div", { class: { 'slot-container': true, 'collapsed': this.collapsed }, ref: (el) => (this.slotContainer = el) }, h("slot", null)))));
   }
   static get is() { return "yoo-collapsible"; }
   static get encapsulation() { return "shadow"; }

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

@@ -458,4 +458,15 @@ svg:not(:root) {
 
 :host([color=warning-80]) {
   fill: var(--warning-80, rgba(237, 110, 51, 0.8));
+}
+
+:host(.rtl[name=request]),
+:host(.rtl[name=restart]),
+:host(.rtl[name=left]),
+:host(.rtl[name=right]),
+:host(.rtl[name=arrow-left]),
+:host(.rtl[name=arrow-right]),
+:host(.rtl[name=big-arrow-left]),
+:host(.rtl[name=big-arrow-right]) {
+  transform: scaleX(-1);
 }

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

@@ -1,4 +1,5 @@
-import { h } from '@stencil/core';
+import { isRTL } from '@shared/utils';
+import { h, Host } from '@stencil/core';
 import { icons } from './collection';
 export class YooIconComponent {
   constructor() {
@@ -10,8 +11,8 @@ export class YooIconComponent {
   render() {
     var _a, _b, _c;
     const iconName = ((_a = this.name) === null || _a === void 0 ? void 0 : _a.replace) && ((_b = this.name) === null || _b === void 0 ? void 0 : _b.replace('yo-', ''));
-    return h("svg", { viewBox: "0 0 32 32", style: this.customColor ? { fill: this.customColor } : null }, (_c = icons
-      .find((icon) => icon.name === iconName)) === null || _c === void 0 ? void 0 : _c.paths.map((path) => (h("path", { d: path }))));
+    return (h(Host, { class: { rtl: isRTL() } }, h("svg", { viewBox: "0 0 32 32", style: this.customColor ? { fill: this.customColor } : null }, (_c = icons
+      .find((icon) => icon.name === iconName)) === null || _c === void 0 ? void 0 : _c.paths.map((path) => (h("path", { d: path }))))));
   }
   static get is() { return "yoo-icon"; }
   static get encapsulation() { return "shadow"; }

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

@@ -220,6 +220,10 @@ svg:not(:root) {
   background: var(--background-color);
   transition: all 0.3s;
 }
+:host .center-container {
+  padding-right: var(--center-padding-right);
+  padding-left: var(--center-padding-left);
+}
 :host ::slotted(yoo-icon) {
   fill: var(--text-color, #807f83);
 }
@@ -259,6 +263,11 @@ svg:not(:root) {
   padding-right: var(--spacing-08, 0.5rem);
 }
 
+:host(.web.grid.rtl) .outer-container .top-container {
+  padding-right: 0;
+  padding-left: var(--spacing-08, 0.5rem);
+}
+
 :host(.grid.form.web.search-only) {
   z-index: 20004;
 }

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

@@ -1,4 +1,4 @@
-import { getSession } from '@shared/utils';
+import { getSession, isRTL } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext, querySelectorDeep } from '../../../utils/helpers/common-helpers';
 import { getElementDimensions } from '../../../utils/helpers/dimensions-helpers';
@@ -18,8 +18,8 @@ export class YooNavbarComponent {
     this.grid = false;
   }
   resetCenterStyles() {
-    this.center.style.paddingLeft = '0';
-    this.center.style.paddingRight = '0';
+    this.center.style.setProperty('--center-padding-right', '0');
+    this.center.style.setProperty('--center-padding-left', '0');
   }
   async setColor(backgroundClass, buttonColor) {
     if (backgroundClass !== this.backgroundClass || buttonColor !== this.buttonColor) {
@@ -54,8 +54,8 @@ export class YooNavbarComponent {
     const leftWidth = getElementDimensions(elementStart).width || 0;
     const endWidth = getElementDimensions(elementEnd).width || 0;
     const margin = this.computeCenterPadding(leftWidth, endWidth);
-    this.center.style.paddingLeft = margin[0];
-    this.center.style.paddingRight = margin[1];
+    this.center.style.setProperty('--center-padding-right', isRTL() ? margin[0] : margin[1]);
+    this.center.style.setProperty('--center-padding-left', isRTL() ? margin[1] : margin[0]);
   }
   onSlotChange() {
     if (!this.grid) {
@@ -64,7 +64,7 @@ export class YooNavbarComponent {
   }
   render() {
     const isCustomTheme = getSession().isCustomTheme;
-    return (h(Host, { "center-title": this.centerTitle, class: { ...getAppContext(this.host), 'custom-theme': isCustomTheme } }, h("div", { class: "outer-container" }, h("div", { class: "top-container" }, h("div", { class: "start-container" }, h("slot", { name: "start", onSlotchange: this.onSlotChange.bind(this) })), h("div", { class: "center-container", ref: (el) => (this.center = el) }, h("slot", null)), h("div", { class: "end-container" }, h("slot", { name: "end", onSlotchange: this.onSlotChange.bind(this) }))), h("div", { class: "content-container" }, h("slot", { name: "content" }))), this.swipeable && h("div", { class: "swipe-bar" })));
+    return (h(Host, { "center-title": this.centerTitle, class: { ...getAppContext(this.host), 'custom-theme': isCustomTheme } }, h("div", { class: "outer-container" }, h("div", { class: "top-container", dir: document.dir }, h("div", { class: "start-container" }, h("slot", { name: "start", onSlotchange: this.onSlotChange.bind(this) })), h("div", { class: "center-container", ref: (el) => (this.center = el) }, h("slot", null)), h("div", { class: "end-container" }, h("slot", { name: "end", onSlotchange: this.onSlotChange.bind(this) }))), h("div", { class: "content-container" }, h("slot", { name: "content" }))), this.swipeable && h("div", { class: "swipe-bar" })));
   }
   static get is() { return "yoo-navbar"; }
   static get encapsulation() { return "shadow"; }

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