@yoobic/yobi 8.5.0-45 → 8.5.0-47

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/image-cropper-dialog/image-cropper-dialog.css

@@ -240,4 +240,8 @@ svg:not(:root) {
 :host yoo-form-footer {
   display: block;
   height: 3.5rem;
+}
+
+:host(.native) ul.PinturaControlList li:nth-child(2) {
+  display: none;
 }

package/dist/collection/components/form/image-cropper-dialog/image-cropper-dialog.js

@@ -1,4 +1,4 @@
-import { closeModal, getAsyncExtraData, getMedia, isNativeMobile, showAlert, translate, urlToBlob } from '@shared/utils';
+import { closeModal, getAsyncExtraData, getMedia, isIOS, isNativeMobile, showAlert, translate, urlToBlob } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { keys } from 'lodash-es';
 import { 
@@ -44,7 +44,13 @@ export class YooImageCropperDialogComponent {
       imageCropLimitToImage: false,
       imageCropAspectRatio: isFinite(this.cropRatio) && this.cropRatio,
       imageReader: createDefaultImageReader(),
-      imageWriter: createDefaultImageWriter({ format: 'canvas', mimeType: 'image/jpeg' }),
+      imageWriter: createDefaultImageWriter({
+        canvasMemoryLimit: isNativeMobile() && isIOS() ? 4096 * 4096 : Infinity,
+        format: 'canvas',
+        mimeType: 'image/jpeg'
+      }),
+      enableZoom: !isNativeMobile(),
+      enableZoomControls: !isNativeMobile(),
       imageBackgroundColor: [255, 255, 255, 255],
       stickers: [
         ['Emoji', ['⭐️', '😊', '👍', '👎', '☀️', '🌤', '🌥']],
@@ -65,27 +71,26 @@ export class YooImageCropperDialogComponent {
       cropEnableSelectPreset: false
     });
     this.editor.on('close', () => this.onClose());
-    this.editor.on('process', (res) => {
-      return this.onSave(res.dest.toDataURL());
+    this.editor.on('process', async ({ dest }) => {
+      const b64Value = dest === null || dest === void 0 ? void 0 : dest.toDataURL();
+      this.loading = true;
+      if (this.uploadToCloudinary) {
+        try {
+          this.closeModal(await getAsyncExtraData({ type: 'upload-cloudinary', params: { file: b64Value } }));
+        }
+        catch (err) {
+          await showAlert(translate('FILEPONDLABELFILELOADERROR'), [translate('YOOBICOK')]);
+          throw new Error(err);
+        }
+      }
+      else {
+        this.closeModal(b64Value);
+      }
     });
   }
   onClose() {
     this.closeModal(null);
   }
-  onSave(b64Val) {
-    this.loading = true;
-    if (this.upload) {
-      getAsyncExtraData({ type: 'upload-cloudinary', params: { file: b64Val } }).then((ret) => {
-        this.closeModal(ret);
-      }, () => {
-        showAlert(translate('FILEPONDLABELFILELOADERROR'), [translate('YOOBICOK')]);
-        this.loading = false;
-      });
-    }
-    else {
-      this.closeModal(b64Val);
-    }
-  }
   async closeModal(value) {
     var _a;
     this.loading = false;
@@ -102,7 +107,7 @@ export class YooImageCropperDialogComponent {
     return (h("yoo-ion-content", { scrollEnabled: false, class: "bg-light" }, h("div", { class: "outer-container", ref: (el) => (this.outerContainer = el) }), this.loading && this.renderLoader()));
   }
   render() {
-    return h(Host, null, this.renderContent());
+    return h(Host, { class: { native: isNativeMobile() } }, this.renderContent());
   }
   static get is() { return "yoo-image-cropper-dialog"; }
   static get encapsulation() { return "shadow"; }
@@ -204,7 +209,7 @@ export class YooImageCropperDialogComponent {
         "attribute": "prevent-blob",
         "reflect": false
       },
-      "upload": {
+      "uploadToCloudinary": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -218,7 +223,7 @@ export class YooImageCropperDialogComponent {
           "tags": [],
           "text": "Option to upload return file to cloudinary"
         },
-        "attribute": "upload",
+        "attribute": "upload-to-cloudinary",
         "reflect": false
       }
     };
@@ -228,4 +233,5 @@ export class YooImageCropperDialogComponent {
       "loading": {}
     };
   }
+  static get elementRef() { return "host"; }
 }

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/components/grid/grid-calendar/grid-calendar.js

@@ -576,11 +576,11 @@ export class YooGridCalendarComponent {
     var _a, _b;
     return (h("div", { class: { 'left-container': isWeb(this.host), hidden: !isWeb(this.host) && !this.showMobileCalendar } }, (isWeb(this.host)) && (h("yoo-calendar", { class: { 'no-border': true, 'no-margin-top': !isWeb(this.host) }, isDatePicker: true, size: "small", markers: this.markers, displayMode: "month", onDateChanged: (ev) => this.onLeftCalendarDateChanged(ev) })), isWeb(this.host) && ((_a = this.types) === null || _a === void 0 ? void 0 : _a.length) > 0 && !this.hideFilters && h("div", { class: "types" }, h("yoo-collapsible", { class: "bold", collapsed: false, header: translate('YOOBICTYPE') }, this.types.map((t) => {
       var _a;
-      return h("yoo-form-checkbox", { class: getEventTypeColor(t), iconColor: getEventTypeColor(t), onClick: () => this.onToggleType(t), value: !(((_a = this.hiddenTypes) === null || _a === void 0 ? void 0 : _a.indexOf(t)) > 0), header: translate(CALENDAR_TRANSLATIONS[t]) });
+      return h("yoo-form-checkbox", { animated: this.animated, class: getEventTypeColor(t), iconColor: getEventTypeColor(t), onClick: () => this.onToggleType(t), value: !(((_a = this.hiddenTypes) === null || _a === void 0 ? void 0 : _a.indexOf(t)) > 0), header: translate(CALENDAR_TRANSLATIONS[t]) });
     })), h("slot", { name: "filters" }), ((_b = this.eventStatuses) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
       h("yoo-collapsible", { class: "bold margin-top", collapsed: false, header: translate('EVENTATTENDANCE') }, this.eventStatuses.map((t) => {
         var _a;
-        return h("yoo-form-checkbox", { class: "app-color", onClick: () => this.onToggleAttendance(t), value: !(((_a = this.hiddenStatuses) === null || _a === void 0 ? void 0 : _a.indexOf(t)) > 0), header: translate(ATTENDANCE_TRANSLATIONS[t]) });
+        return h("yoo-form-checkbox", { animated: this.animated, class: "app-color", onClick: () => this.onToggleAttendance(t), value: !(((_a = this.hiddenStatuses) === null || _a === void 0 ? void 0 : _a.indexOf(t)) > 0), header: translate(ATTENDANCE_TRANSLATIONS[t]) });
       })), h("slot", { name: "more-filters" }))));
   }
   renderHeader(calendar, type) {
@@ -1126,6 +1126,23 @@ export class YooGridCalendarComponent {
         },
         "attribute": "initial-date",
         "reflect": false
+      },
+      "animated": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "animated",
+        "reflect": false
       }
     };
   }

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