@yoobic/yobi 8.5.0-44 → 8.5.0-46

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

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

@@ -734,6 +734,17 @@ svg:not(:root) {
   }
 }
 
+:host(.rtl) .outer-container .bottom-container .text-wrapper {
+  text-align: right;
+}
+:host(.rtl) .outer-container .bottom-container .subheading yoo-tag {
+  margin-right: var(--spacing-04, 0.25rem);
+}
+:host(.rtl) .outer-container .bottom-container .subheading yoo-avatar {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+}
+
 :host([bookmarked]) yoo-icon[name=bookmark] {
   right: var(--spacing-16, 1rem);
   background-color: var(--app-color-10, rgba(90, 48, 244, 0.1));

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

@@ -372,6 +372,12 @@ svg:not(:root) {
   left: 0;
 }
 
+:host(.rtl.check-unselected:not(.web):not(.card-cell)):after,
+:host(.rtl.check-unselected:not(.web):not(.card-cell).last):after {
+  right: auto;
+  left: 0;
+}
+
 :host(.check-selected:not(.web).last):after {
   position: absolute;
   top: var(--top-pos-check-selected);
@@ -903,7 +909,7 @@ svg:not(:root) {
   --counter-color: var(--stable);
   --icon-color: var(--dark);
   --icon-background-color: var(--dark-10);
-  --icon-margin-left: var(--spacing-16);
+  --icon-margin-start: var(--spacing-16);
   --icon-border-radius: var(--spacing-64);
   --icon-padding: var(--spacing-04);
   --container-box-shadow: var(--shadow-01);

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.css

@@ -220,6 +220,9 @@ svg:not(:root) {
 .container yoo-button.margin-left {
   margin-left: var(--spacing-16, 1rem);
 }
+.container yoo-button.margin-right {
+  margin-right: var(--spacing-08, 0.5rem);
+}
 .container yoo-tooltip {
   margin-left: var(--spacing-08, 0.5rem);
 }
@@ -373,9 +376,4 @@ yoo-banner {
 :host(.floating) .filters-container.open yoo-form-dynamic::-webkit-scrollbar-thumb {
   background-color: transparent;
   border-radius: var(--border-radius-04, 0.25rem);
-}
-
-yoo-button.rtl {
-  margin-right: var(--spacing-16, 1rem);
-  margin-left: 0;
 }

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.js

@@ -1,5 +1,5 @@
 import { FormFieldType } from '@shared/interfaces';
-import { getAuthentication, getSession, getUUID, isPresent, isWeb, showActionSheet, translate } from '@shared/utils';
+import { getAuthentication, getSession, getUUID, isPresent, isRTL, isWeb, showActionSheet, translate } from '@shared/utils';
 import { forceUpdate, h, Host } from '@stencil/core';
 import { cloneDeep, findIndex, flatten, sum } from 'lodash-es';
 import { filterFromFormField, filterIsAutocomplete, filterIsAutocompleteLocal, filterIsBoolean, filterIsDate, filterIsNumber, filterIsRadio, filterIsSegement, filterIsText, filterRenderFormDynamic, mapCustomViewToButton } from '../../../utils/helpers/filters-helpers';
@@ -364,7 +364,7 @@ export class YooEntityQueryBuilderComponent {
     const hasFilters = this.hasFilterFields();
     const count = this.getActiveFiltersCount();
     return (h("div", { class: { container: true, expanded: this.isOpen && !this.alwaysShow } }, h("slot", { name: "before" }), hasFilters && !this.alwaysShow && [
-      h("yoo-button", { class: "margin-left filters", color: this.isOpen ? 'app-color' : 'light', onClick: (ev) => this.onToggleOpen(ev), fill: this.floating ? 'transparent' : 'solid', shape: this.floating ? 'circular' : 'rectangular', rippleType: this.floating ? 'unbounded' : 'bounded', size: this.size }, h("yoo-icon", { name: "filter", color: this.isOpen && !this.floating ? 'light' : 'stable', slot: "start", size: this.floating ? 'medium' : 'small' }), !this.floating && translate('FILTERS'), count > 0 && !this.isOpen && (h("yoo-badge", { color: this.floating ? 'app-color' : this.isOpen ? 'light' : 'app-color', slot: "end", class: { count: true, floating: this.floating }, text: `${count}` }))),
+      h("yoo-button", { class: { 'margin-left': !isRTL(), 'margin-right': isRTL(), 'filters': true }, color: this.isOpen ? 'app-color' : 'light', onClick: (ev) => this.onToggleOpen(ev), fill: this.floating ? 'transparent' : 'solid', shape: this.floating ? 'circular' : 'rectangular', rippleType: this.floating ? 'unbounded' : 'bounded', size: this.size }, h("yoo-icon", { name: "filter", color: this.isOpen && !this.floating ? 'light' : 'stable', slot: "start", size: this.floating ? 'medium' : 'small' }), !this.floating && translate('FILTERS'), count > 0 && !this.isOpen && (h("yoo-badge", { color: this.floating ? 'app-color' : this.isOpen ? 'light' : 'app-color', slot: "end", class: { count: true, floating: this.floating }, text: `${count}` }))),
       this.showSelectionOnlyToggle && this.renderFormToggle()
     ], h("span", { class: "flex" }, h("slot", { name: "before-sort" })), this.hasSorts() && !this.hideSorts && this.renderSorts(), h("slot", null)));
   }

package/dist/collection/components/entities/entity-search-tags/entity-search-tags.css

@@ -278,7 +278,11 @@ svg:not(:root) {
   animation-fill-mode: both;
 }
 :host .outer-container.advanced-filters yoo-ion-scroll {
-  --left-pos: 40px;
+  --left-pos: var(--spacing-40, 2.5rem);
+}
+:host .outer-container.advanced-filters yoo-ion-scroll.rtl {
+  --right-pos: var(--spacing-40, 2.5rem);
+  --left-pos: 0;
 }
 :host .outer-container.advanced-filters-count yoo-ion-scroll {
   --left-pos: 75px;
@@ -323,4 +327,20 @@ svg:not(:root) {
 }
 :host(.mobile) .outer-container.margin .placeholder {
   display: none;
+}
+
+@keyframes slideInLeft {
+  0% {
+    margin-right: 100px;
+    opacity: 0;
+  }
+  100% {
+    margin-right: 0;
+    opacity: 1;
+  }
+}
+:host(.rtl) .outer-container yoo-tag.menu-item {
+  margin-right: 0;
+  margin-left: var(--spacing-08, 0.5rem);
+  animation-name: slideInLeft;
 }

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

@@ -542,6 +542,10 @@ svg:not(:root) {
   border-radius: var(--border-radius-08, 0.5rem);
 }
 
+:host(.web.rtl) .outer-container .items-container {
+  right: 0;
+}
+
 :host(.align-right) .outer-container .items-container {
   right: 0;
   left: auto;

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

@@ -394,7 +394,7 @@ svg:not(:root) {
   padding-right: var(--spacing-16, 1rem);
   color: var(--stable, #adadad);
   white-space: nowrap;
-  text-align: left;
+  text-align: start;
 }
 :host .outer-container .multiple .capture-status .status.max-reached {
   color: var(--dark, #000000);
@@ -986,4 +986,8 @@ svg:not(:root) {
   :host .tags {
     display: none;
   }
+}
+:host(.rtl) .outer-container .multiple .capture-status .status {
+  padding-right: 0;
+  padding-left: var(--spacing-16, 1rem);
 }

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

@@ -1,4 +1,4 @@
-import { closeModal, downloadFile, findParent, getAsyncExtraData, getPermissions, getSession, intersectionObserve, isChromatic, isCloudinaryLink, isIntersectionObserverSupported, isNativeMobile, isNullOrUndefined, isPdf, isWeb, showActionSheet, showContextMenu, translate } from '@shared/utils';
+import { closeModal, downloadFile, findParent, getAsyncExtraData, getPermissions, getSession, intersectionObserve, isChromatic, isCloudinaryLink, isIntersectionObserverSupported, isNativeMobile, isNullOrUndefined, isPdf, isRTL, isWeb, showActionSheet, showContextMenu, translate } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { isArray } from 'lodash-es';
 import { getAppContext, lockSwipes, showSlidesMedia } from '../../../utils/helpers/common-helpers';
@@ -51,7 +51,7 @@ export class YooFormCarouselComponent {
     if (!this.instant) {
       this.observeVisibility();
     }
-    if (this.ionSlides && this.currentSlideIndex > 0) {
+    if (this.ionSlides && (this.currentSlideIndex > 0 || isRTL())) {
       this.ionSlides.slideTo(this.currentSlideIndex);
     }
   }
@@ -131,7 +131,7 @@ export class YooFormCarouselComponent {
                   text: translate('DOWNLOAD'),
                   icon: 'download',
                   color: 'dark',
-                  isVisible: () => !!item,
+                  isVisible: () => !!item && getPermissions().canDownloadFile,
                   handler: () => {
                     const downloadURL = (item === null || item === void 0 ? void 0 : item._downloadURL) || item;
                     if (downloadURL) {
@@ -202,10 +202,13 @@ export class YooFormCarouselComponent {
     }
   }
   renderSlidePagination() {
+    const currentActiveIndex = isRTL()
+      ? this.currentActiveIndex < 0 ? 0 : this.currentActiveIndex
+      : this.currentActiveIndex;
     return (h("div", { class: "pagination-outer-container" }, this.mediaSrc.map((_, index) => {
       return (h("div", { class: {
           dot: true,
-          active: this.currentActiveIndex === index
+          active: currentActiveIndex === index
         } }));
     })));
   }
@@ -319,6 +322,8 @@ export class YooFormCarouselComponent {
     const attrs = this.allowSwipeDownDismiss ? { onSwipedDown: () => this.onSwipeDown() } : {};
     const isDocument = this.mediaType === 'document';
     const tagSize = isWeb(this.host) ? 'small' : 'medium';
+    const prevBtnLocation = isRTL() ? 'right' : 'left';
+    const nextBtnLocation = isRTL() ? 'left' : 'right';
     if (this.isPdf) {
       return this.renderPdfImage();
     }
@@ -330,7 +335,7 @@ export class YooFormCarouselComponent {
       }, navigation: false }, this.mediaSrc.map((src, index) => this.renderSlide(src, index))), !this.previewMode && this.mediaType !== 'audio' && !isDocument && (h("yoo-tag", { class: {
         'media-counts-container': true,
         active: this.showPhotoCounts
-      }, color: "dark-40", size: tagSize }, h("yoo-icon", { name: "multiple-photos", color: "light", size: tagSize, slot: "start" }), h("div", { class: "text" }, `${this.currentActiveIndex + 1}/${this.mediaSrc.length}`))), isWeb(this.host) && this.isMultiMedia(this.mediaSrc) && this.paginationType !== 'progressbar' && (h("div", { class: "slide-nav" }, this.currentActiveIndex > 0 && h("yoo-tag", { onClick: (ev) => this.onSlidePrev(ev), class: "left", icon: "left", color: "light", size: "medium" }), this.currentActiveIndex < this.mediaSrc.length - 1 && (h("yoo-tag", { onClick: (ev) => this.onSlideNext(ev), class: "right", icon: "right", color: "light", size: "medium" }))))));
+      }, color: "dark-40", size: tagSize }, h("yoo-icon", { name: "multiple-photos", color: "light", size: tagSize, slot: "start" }), h("div", { class: "text" }, `${this.currentActiveIndex + 1}/${this.mediaSrc.length}`))), isWeb(this.host) && this.isMultiMedia(this.mediaSrc) && this.paginationType !== 'progressbar' && (h("div", { class: "slide-nav" }, this.currentActiveIndex > 0 && h("yoo-tag", { onClick: (ev) => this.onSlidePrev(ev), class: prevBtnLocation, icon: prevBtnLocation, color: "light", size: "medium" }), this.currentActiveIndex < this.mediaSrc.length - 1 && (h("yoo-tag", { onClick: (ev) => this.onSlideNext(ev), class: nextBtnLocation, icon: nextBtnLocation, color: "light", size: "medium" }))))));
   }
   renderIconsContainer() {
     return (this.paginationType !== 'progressbar' && h("div", { class: "icons-container" }, h("slot", { name: "start" }), this.isMultiMedia(this.mediaSrc) && !this.isPdf && this.renderSlidePagination(), h("slot", { name: "end" })));

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

@@ -292,6 +292,11 @@ svg:not(:root) {
   padding-bottom: var(--spacing-08, 0.5rem);
 }
 
+:host(.rtl) .outer-container .label {
+  padding-right: var(--spacing-08, 0.5rem);
+  padding-left: 0;
+}
+
 :host(:not([disabled])) .outer-container {
   cursor: pointer;
 }

package/dist/collection/components/form/form-document-dialog/form-document-dialog.js

@@ -304,7 +304,8 @@ export class YooFormDocumentDialogComponent {
   renderHeader() {
     var _a;
     let buttonElement;
-    return (h("yoo-header", null, h("yoo-navbar", null, h("yoo-items", { slot: "start" }, h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() }, h("yoo-icon", { name: "close", color: "stable" }))), h("yoo-truncate", null, this.modalTitle), h("yoo-items", { slot: "end" }, ((_a = this.documentSecondaryActions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("yoo-button", { ref: (el) => (buttonElement = el), color: "stable", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: (ev) => this.onMoreButtonClick(ev, buttonElement) }, h("yoo-icon", { name: "more", color: "stable" }))), this.selectionMode && (h("yoo-button", { color: "stable", fill: "transparent", onClick: () => this.onSendButtonClick() }, translate('YOOBICSEND')))))));
+    const visibleSecondaryActions = (_a = this.documentSecondaryActions) === null || _a === void 0 ? void 0 : _a.filter(b => !(b === null || b === void 0 ? void 0 : b.isVisible) || b.isVisible());
+    return (h("yoo-header", null, h("yoo-navbar", null, h("yoo-items", { slot: "start" }, h("yoo-button", { fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onCancel() }, h("yoo-icon", { name: "close", color: "stable" }))), h("yoo-truncate", null, this.modalTitle), h("yoo-items", { slot: "end" }, (visibleSecondaryActions === null || visibleSecondaryActions === void 0 ? void 0 : visibleSecondaryActions.length) > 0 && (h("yoo-button", { ref: (el) => (buttonElement = el), color: "stable", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: (ev) => this.onMoreButtonClick(ev, buttonElement) }, h("yoo-icon", { name: "more", color: "stable" }))), this.selectionMode && (h("yoo-button", { color: "stable", fill: "transparent", onClick: () => this.onSendButtonClick() }, translate('YOOBICSEND')))))));
   }
   renderContent() {
     return (h("yoo-ion-content", { scrollEnabled: false, class: "bg-light" }, this.document ? this.renderDocument() : 'document missing', this.isLoading && h("yoo-loader", { class: { absolute: true, 'backdrop-light': this.useDocumentViewer }, size: "large" })));

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

@@ -886,7 +886,7 @@ svg:not(:root) {
   width: 100%;
 }
 :host .summary-title {
-  padding: 0.8rem 0 0 1rem;
+  padding: var(--spacing-12, 0.75rem) 0 0 var(--spacing-16, 1rem);
   color: var(--dark, #000000);
   font-weight: bold;
   font-size: var(--font-size-28, 1.75rem);
@@ -2628,4 +2628,17 @@ svg:not(:root) {
 :host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
   flex-shrink: 0;
   padding: 0;
+}
+
+:host(.rtl) .toolbar yoo-button {
+  padding-right: 0;
+  padding-left: var(--spacing-16, 1rem);
+}
+:host(.rtl) .summary-title {
+  padding: var(--spacing-12, 0.75rem) var(--spacing-16, 1rem) 0 0;
+}
+
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row).rtl) .toolbar {
+  padding-right: 0;
+  padding-left: var(--spacing-16, 1rem);
 }

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

@@ -3614,7 +3614,7 @@ export class YooFormDynamicComponent {
       case FormFieldType.radio:
         TagType = 'yoo-form-radio';
         extraAttrs = {
-          class: field.extraClass,
+          class: field.extraClass + ' ' + document.dir,
           flow: field.flow,
           options: (_h = field.values) === null || _h === void 0 ? void 0 : _h.map(({ value }) => value),
           value: value === undefined ? field.value : value,

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

@@ -383,4 +383,9 @@ svg:not(:root) {
 :host(.lesson-detail) .mission-footer .timer-container {
   justify-content: flex-end !important;
   padding-right: var(--spacing-16, 1rem);
+}
+
+:host(.rtl) .outer-container .mission-footer .timer-container {
+  margin-right: var(--spacing-16, 1rem);
+  margin-left: 0;
 }

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

@@ -268,7 +268,6 @@ svg:not(:root) {
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  direction: ltr;
   background: var(--input-background-color);
   border: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
   border-radius: var(--border-radius-08, 0.5rem);
@@ -600,6 +599,10 @@ svg:not(:root) {
   display: none !important;
 }
 
+:host(.rtl.search) .input-container .icon-prefix {
+  padding: var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem) var(--spacing-04, 0.25rem) 0;
+}
+
 :host(.search[size=small]) .input-container {
   height: 1.5rem;
   font-size: var(--font-size-12, 0.75rem);
@@ -922,6 +925,10 @@ svg:not(:root) {
   padding: var(--spacing-08, 0.5rem) 0 var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
 
+:host([size=large]:not([readonly]):not(.search).rtl) .input-container .icon-prefix {
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) 0;
+}
+
 :host([size=medium]:not([readonly]):not(.search):not([format=contenteditable])) {
   --container-height: 2rem;
 }