@yoobic/yobi 8.5.0-45 → 8.5.0-47

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-helper.js

@@ -1,6 +1,26 @@
+import { addFilePrefix, isAndroid, isBase64, isImageUrl, moveToImageDirectory } from '@shared/utils';
 export function shouldUseLowPerformanceCamera(user, isNativeMobile, useLibrary) {
   const enableLowPerformanceCamera = user === null || user === void 0 ? void 0 : user.enableLowPerformanceCamera;
   const isLowEndDevice = user === null || user === void 0 ? void 0 : user.isLowEndDevice;
   return !!(enableLowPerformanceCamera ||
     (enableLowPerformanceCamera === undefined && isLowEndDevice)) && isNativeMobile && !useLibrary;
 }
+export async function processMediaPath(mediaPath) {
+  if (isBase64(mediaPath)) {
+    return mediaPath;
+  }
+  else if (mediaPath === null || mediaPath === void 0 ? void 0 : mediaPath.includes('?')) {
+    return mediaPath.substring(0, mediaPath.indexOf('?'));
+  }
+  else if (!isImageUrl(mediaPath)) {
+    return addFilePrefix(mediaPath);
+  }
+  else if (!isAndroid() && ['cache', 'tmp'].includes(mediaPath)) {
+    try {
+      return await moveToImageDirectory(addFilePrefix(mediaPath));
+    }
+    catch (err) {
+      throw new Error(err);
+    }
+  }
+}

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-capture/form-capture.js

@@ -1,14 +1,14 @@
 import { MediaType, PictureSourceType } from '@awesome-cordova-plugins/camera';
 import { MediaCapture } from '@awesome-cordova-plugins/media-capture';
 import { StatusBar } from '@capacitor/status-bar';
-import { addFilePrefix, asyncWaterfall, audios, changeExtension, downloadFile, getAsyncExtraData, getFormCapturedFileSize, getMimeType, getSession, hasLargeFile, images, isAndroid, isAudio, isCloudinaryLink, isFile, isGif, isImage, isImageUrl, isIOS, isIphoneX, isLenovo, isNativeFilePath, isNativeMobile, isNullOrUndefined, isOffline, isPhotoEdited, isSafari, isUnsplashUrl, isVideo, isWeb, moveToImageDirectory, pipes, read, showActionSheet, showAlert, showContextMenu, showModal, showToast, translate, translateMulti, updatePathSessionId, videos } from '@shared/utils';
+import { addFilePrefix, asyncWaterfall, audios, changeExtension, downloadFile, getAsyncExtraData, getFormCapturedFileSize, getMimeType, getSession, hasLargeFile, images, isAndroid, isAudio, isBase64, isCloudinaryLink, isFile, isGif, isImage, isImageUrl, isIOS, isIphoneX, isLenovo, isNativeFilePath, isNativeMobile, isNullOrUndefined, isOffline, isPhotoEdited, isSafari, isUnsplashUrl, isVideo, isWeb, pipes, read, showActionSheet, showAlert, showContextMenu, showModal, showToast, translate, translateMulti, updatePathSessionId, videos } from '@shared/utils';
 import { Build, h, Host } from '@stencil/core';
 import { assign, assignInWith, clone, compact, intersection, isArray, isNumber, isUndefined, keys } from 'lodash-es';
 import { getPicture, getVideo, getVideoDevices, importMultipleFromLibrary, showAudioRecorder } from '../../../utils/helpers/camera-helpers';
 import { getAppContext, querySelectorAllDeep, querySelectorDeep, showImageCropper, showPhotoEditor, showSlidesMedia } from '../../../utils/helpers/common-helpers';
 import { initArrayValue } from '../../../utils/helpers/form-helpers';
 import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers';
-import { shouldUseLowPerformanceCamera } from './form-capture-helper';
+import { processMediaPath, shouldUseLowPerformanceCamera } from './form-capture-helper';
 export class YooFormCaptureComponent {
   constructor() {
     this.extraData = {};
@@ -37,9 +37,15 @@ export class YooFormCaptureComponent {
     this.updateExtraData(extraData);
   }
   /** If there is index, the field is a multiphoto */
-  async setFieldValue(data) {
-    this.multiple ? this.value.push(data) : this.value = data;
-    setValueAndValidateInput(this.value, this);
+  async setFieldValue(index, data) {
+    if (index === undefined) {
+      setValueAndValidateInput(data, this);
+    }
+    else {
+      const newValue = this.value ? [...this.value] : [];
+      newValue[index] = data;
+      setValueAndValidateInput(newValue, this);
+    }
   }
   async stopImageRecognitionProcess(isCancelled = false) {
     this.imageRecoCancelled = isCancelled;
@@ -229,9 +235,9 @@ export class YooFormCaptureComponent {
       this.fileInputs = querySelectorDeep(this.host, '.camera-input');
     }
   }
-  allowCrop(file) {
+  allowCrop(data) {
     var _a;
-    return (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && isImage(file) && !isGif(file) && (!(typeof file === 'string' && isUnsplashUrl(file)) || isWeb(this.host));
+    return isWeb(this.host) && (((_a = this.cropperOptions) === null || _a === void 0 ? void 0 : _a.cropRatio) > 0 || this.showCropper) && (isImage(data) || isBase64(data)) && !isGif(data) && (!(typeof data === 'string' && isUnsplashUrl(data)) || isWeb(this.host));
   }
   removeAllCapture() {
     this.value = [];
@@ -291,33 +297,19 @@ export class YooFormCaptureComponent {
     }
   }
   async processMediaData(mediaData, index) {
-    if (mediaData === null || mediaData === void 0 ? void 0 : mediaData.includes('?')) {
-      mediaData = mediaData.substring(0, mediaData.indexOf('?'));
-    }
-    else if (mediaData && !isImageUrl(mediaData)) {
-      mediaData = addFilePrefix(mediaData);
-      if (!isAndroid() && ['cache', 'tmp'].includes(mediaData)) {
-        try {
-          mediaData = await moveToImageDirectory(mediaData, getSession().user ? getSession().user.disablePhotoOrientationAutoFix : false);
-        }
-        catch (err) {
-          throw new Error(err);
-        }
-      }
-    }
     try {
+      !isImageUrl(mediaData) && (mediaData = await processMediaPath(mediaData));
       if (this.shouldTagImage()) {
         const tag = await this.showPhotoTagDialog(mediaData);
         (tag === null || tag === void 0 ? void 0 : tag.data) && this.updateTagData(tag, index);
       }
-      await this.setFieldValue(mediaData);
+      await this.setFieldValue(index, mediaData);
       this.clearPhotoEdit(index);
       this.saveGeoloc && this.captureGeoloc(index);
     }
     catch (err) {
       throw new Error(err);
     }
-    return mediaData;
   }
   showPhotoTagDialog(imageSrc, value) {
     const imageTag = document.createElement('yoo-form-capture-tag-dialog');
@@ -379,7 +371,7 @@ export class YooFormCaptureComponent {
     });
   }
   async capturePhoto(useLibrary, index) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     const quality = this.isImageRecognition ? 100 : 70;
     const sourceType = useLibrary ? PictureSourceType.PHOTOLIBRARY : PictureSourceType.CAMERA;
     const mediaType = this.type === 'video' ? MediaType.VIDEO : MediaType.PICTURE;
@@ -449,26 +441,22 @@ export class YooFormCaptureComponent {
       if (!res && this.showImageLoader) {
         this.showImageLoader = false;
       }
+      const newIndex = index < 0 ? ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) : index;
       const imagesData = Array.isArray(res) ? res : [res];
       const hasUnsplash = imagesData.some(d => isUnsplashUrl(d));
-      const processImage = async (imageData, index) => {
-        var _a;
+      const processImage = async (imageData, i) => {
         try {
-          let extractedData = (imageData === null || imageData === void 0 ? void 0 : imageData['data']) || (imageData === null || imageData === void 0 ? void 0 : imageData['path']) || (imageData === null || imageData === void 0 ? void 0 : imageData['fullPath']) || imageData;
-          if (!this.shouldTagImage()) {
-            const shouldOpenCropper = !hasUnsplash && imagesData.length === 1 && this.allowCrop(imageData);
-            const newIndex = Array.isArray(this.value) ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.length : index;
-            if (shouldOpenCropper) {
-              extractedData = await this.onOpenCropper(imageData);
-            }
-            await this.processMediaData(extractedData, newIndex);
-          }
+          let extractedData = await processMediaPath((imageData === null || imageData === void 0 ? void 0 : imageData['data']) || (imageData === null || imageData === void 0 ? void 0 : imageData['path']) || (imageData === null || imageData === void 0 ? void 0 : imageData['fullPath']) || imageData);
+          const shouldOpenCropper = !hasUnsplash && imagesData.length === 1 && this.allowCrop(extractedData);
+          shouldOpenCropper && (extractedData = await this.onOpenCropper(imageData));
+          const updatingIndex = this.multiple ? newIndex + i : undefined;
+          await this.processMediaData(extractedData, updatingIndex);
         }
         catch (err) {
           this.showImageLoader = false;
         }
       };
-      await Promise.all(imagesData.map((data, index) => processImage(data, index)));
+      await asyncWaterfall(imagesData.map((data, i) => processImage(data, i)));
       this.showImageLoader = false;
     }
     catch (err) {
@@ -476,30 +464,26 @@ export class YooFormCaptureComponent {
       throw new Error(err);
     }
   }
-  captureVideo(index) {
-    const options = { limit: 1, duration: this.duration || 60, saveToPhotoAlbum: true };
-    return getVideo(options).then((files) => {
-      this.processMediaData(this.fixPathAndGetValue(files), index);
-    });
+  async captureVideo(index) {
+    const files = await getVideo({ limit: 1, duration: this.duration || 60, saveToPhotoAlbum: true });
+    await Promise.all(files === null || files === void 0 ? void 0 : files.map(file => this.processMediaData(this.fixPathAndGetValue(file), index)));
   }
   async captureAudio(index) {
-    if (isAndroid()) {
-      const ret = await showAudioRecorder(this.host);
-      if (ret && ret.data) {
-        return this.processMediaData(ret.data, index);
+    try {
+      if (isAndroid()) {
+        const { data } = await showAudioRecorder(this.host);
+        this.processMediaData(data, index);
+      }
+      else {
+        const files = await MediaCapture.captureAudio({ limit: 1, duration: this.duration || 60 });
+        await Promise.all(files === null || files === void 0 ? void 0 : files.map(file => this.processMediaData(this.fixPathAndGetValue(file), index)));
       }
     }
-    else {
-      const options = { limit: 1, duration: this.duration || 60 };
-      return MediaCapture.captureAudio(options)
-        .then((files) => {
-        this.processMediaData(this.fixPathAndGetValue(files), index);
-      })
-        .catch((err) => {
-        if (err.code !== 3) {
-          this.noAudio();
-        }
-      });
+    catch (err) {
+      if (err.code !== 3) {
+        showAlert(translate('AUDIO'), [translate('YOOBICOK')], translate('NOAUDIO'));
+      }
+      throw new Error(err);
     }
   }
   noAudio() {
@@ -527,39 +511,14 @@ export class YooFormCaptureComponent {
       }
     }
   }
-  fixPathAndGetValue(files) {
-    if ((files === null || files === void 0 ? void 0 : files.length) > 0) {
-      return addFilePrefix(files[0].fullPath);
-    }
-    return '';
+  fixPathAndGetValue(file) {
+    return addFilePrefix(file === null || file === void 0 ? void 0 : file.fullPath) || '';
   }
-  captureFromWebcam(device, index) {
-    let webcam = document.createElement('yoo-form-capture-webcam-dialog');
-    webcam.device = device;
-    showModal(webcam, null, !isWeb(this.host) ? '' : 'fullscreen', 'fadeEnterAnimation', 'fadeLeaveAnimation').then((ret) => {
-      if (ret === null || ret === void 0 ? void 0 : ret.data) {
-        if (this.shouldTagImage()) {
-          this.showPhotoTagDialog(ret.data).then((tag) => {
-            if (!isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
-              this.updateTagData(tag, index);
-              this.setFieldValue(ret.data);
-              this.clearPhotoEdit(index);
-              if (this.saveGeoloc) {
-                this.captureGeoloc();
-              }
-            }
-          });
-        }
-        else {
-          this.setFieldValue(ret.data);
-          this.clearPhotoEdit(index);
-          if (this.saveGeoloc) {
-            this.captureGeoloc();
-          }
-        }
-      }
-      webcam = null;
-    });
+  async captureFromWebcam(device, index) {
+    var _a;
+    const mediaData = (_a = (await showModal(Object.assign(document.createElement('yoo-form-capture-webcam-dialog'), { device }), null, !isWeb(this.host) ? '' : 'fullscreen', 'fadeEnterAnimation', 'fadeLeaveAnimation'))) === null || _a === void 0 ? void 0 : _a.data;
+    //  this.allowCrop(mediaData) && (mediaData = await this.onOpenCropper(mediaData));
+    mediaData && await this.processMediaData(mediaData, index);
   }
   captureFromDisk(index) {
     const targetElement = index && index < 0 ? this.getAddFileInput() : this.getTargetElement(index);
@@ -651,7 +610,7 @@ export class YooFormCaptureComponent {
         }
         else {
           if (this.multiple && (newImages === null || newImages === void 0 ? void 0 : newImages.length) > 0) {
-            this.setFieldValue(newImages);
+            this.setFieldValue(index, newImages);
           }
           else if (newImages === null || newImages === void 0 ? void 0 : newImages.length) {
             this.value = newImages[0];
@@ -714,24 +673,24 @@ export class YooFormCaptureComponent {
         const tag = await this.showPhotoTagDialog(data);
         if (!isNullOrUndefined(tag === null || tag === void 0 ? void 0 : tag.data)) {
           this.updateTagData(tag, index);
-          this.setFieldValue(data);
+          this.setFieldValue(index, data);
           this.clearPhotoEdit(index);
         }
       }
       else {
-        this.setFieldValue(data);
+        this.setFieldValue(index, data);
         this.clearPhotoEdit(index);
       }
     }
     else {
-      this.setFieldValue(f);
+      this.setFieldValue(index, f);
       this.clearPhotoEdit(index);
     }
     targetElement.value = null;
   }
   async onOpenCropper(file) {
     var _a;
-    return (_a = (await showImageCropper(this.host, { file, upload: true, maintainQuality: true, ...this.cropperOptions || {} }))) === null || _a === void 0 ? void 0 : _a.data;
+    return (_a = (await showImageCropper(this.host, { file, maintainQuality: true, ...this.cropperOptions || {} }))) === null || _a === void 0 ? void 0 : _a.data;
   }
   clearPhotoEdit(index) {
     var _a, _b;
@@ -1551,7 +1510,8 @@ export class YooFormCaptureComponent {
     }
   }
   shouldTagImage() {
-    return this.tags && this.tags.length > 0;
+    var _a;
+    return ((_a = this.tags) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   onCancelImageReco() {
     showAlert('', [translate('YOOBICNO'), translate('YOOBICYES')], translate('STOPIMAGERECO')).then((res) => {
@@ -1916,7 +1876,7 @@ export class YooFormCaptureComponent {
         "mutable": false,
         "complexType": {
           "original": "Partial<YooImageCropperDialogComponent>",
-          "resolved": "{ heading?: string; file?: any; cropRatio?: number; maintainQuality?: boolean; preventBlob?: boolean; upload?: boolean; loading?: boolean; componentWillLoad?: () => Promise<void>; componentDidLoad?: () => void; onClose?: () => void; onSave?: (b64Val: any) => void; renderLoader?: () => any; renderHeader?: () => any; renderContent?: () => any; render?: () => any; }",
+          "resolved": "{ heading?: string; file?: any; cropRatio?: number; maintainQuality?: boolean; preventBlob?: boolean; uploadToCloudinary?: boolean; loading?: boolean; host?: HTMLYooImageCropperDialogElement; componentWillLoad?: () => Promise<void>; componentDidLoad?: () => void; onClose?: () => void; renderLoader?: () => any; renderHeader?: () => any; renderContent?: () => any; render?: () => any; }",
           "references": {
             "Partial": {
               "location": "global"
@@ -2714,10 +2674,13 @@ export class YooFormCaptureComponent {
       },
       "setFieldValue": {
         "complexType": {
-          "signature": "(data: any) => Promise<void>",
+          "signature": "(index: number, data: any) => Promise<void>",
           "parameters": [{
               "tags": [],
               "text": ""
+            }, {
+              "tags": [],
+              "text": ""
             }],
           "references": {
             "Promise": {

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-date-time/form-date-time.js

@@ -156,7 +156,7 @@ export class YooFormDateTimeComponent {
     if (!this.value) {
       const value = new Date();
       const oldMinutes = value.getMinutes();
-      const newMinutes = getRoundedMinutes(value, this.timeStep);
+      const newMinutes = +getRoundedMinutes(value, this.timeStep);
       value.setMinutes(+newMinutes, 0, 0);
       if (newMinutes === 0 && oldMinutes !== newMinutes) {
         value.setHours(value.getHours() + 1);

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

@@ -295,7 +295,7 @@ export class YooFormDynamicComponent {
           const videoValue = fieldData.value;
           const videoElement = el;
           if (videoValue) {
-            videoElement.setFieldValue(videoValue);
+            videoElement.setFieldValue(undefined, videoValue);
           }
           break;
         }
@@ -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;
 }