From 20fb46a3ba8d74fcaa1407b23d65b117cc9d6802 Mon Sep 17 00:00:00 2001
From: Malik-Jouda <48517781+Malik-Jouda@users.noreply.github.com>
Date: Thu, 17 Oct 2024 23:28:19 +0300
Subject: [PATCH] fix(Progress): handle `carousel` and `carousel-inverse`
 animations in RTL mode (#2400)

Co-authored-by: malik jouda <m.jouda@approved.tech>
---
 src/runtime/components/elements/Progress.vue | 60 ++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/src/runtime/components/elements/Progress.vue b/src/runtime/components/elements/Progress.vue
index 4dab1c6b..170a3966 100644
--- a/src/runtime/components/elements/Progress.vue
+++ b/src/runtime/components/elements/Progress.vue
@@ -256,6 +256,20 @@ progress:indeterminate {
     }
   }
 
+  [dir=rtl] &.bar-animation-carousel {
+    &:after {
+      animation: carousel-rtl 2s ease-in-out infinite;
+    }
+
+    &::-webkit-progress-value {
+      animation: carousel-rtl 2s ease-in-out infinite;
+    }
+
+    &::-moz-progress-bar {
+      animation: carousel-rtl 2s ease-in-out infinite;
+    }
+  }
+
   &.bar-animation-carousel-inverse {
     &:after {
       animation: carousel-inverse 2s ease-in-out infinite;
@@ -270,6 +284,20 @@ progress:indeterminate {
     }
   }
 
+  [dir=rtl] &.bar-animation-carousel-inverse {
+    &:after {
+      animation: carousel-inverse-rtl 2s ease-in-out infinite;
+    }
+
+    &::-webkit-progress-value {
+      animation: carousel-inverse-rtl 2s ease-in-out infinite;
+    }
+
+    &::-moz-progress-bar {
+      animation: carousel-inverse-rtl 2s ease-in-out infinite;
+    }
+  }
+
   &.bar-animation-swing {
     &:after {
       animation: swing 3s ease-in-out infinite;
@@ -315,6 +343,22 @@ progress:indeterminate {
   }
 }
 
+@keyframes carousel-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(100%)
+  }
+
+  100% {
+    transform: translateX(-200%)
+  }
+}
+
 @keyframes carousel-inverse {
 
   0%,
@@ -331,6 +375,22 @@ progress:indeterminate {
   }
 }
 
+@keyframes carousel-inverse-rtl {
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(-200%)
+  }
+
+  100% {
+    transform: translateX(100%)
+  }
+}
+
 @keyframes swing {
 
   0%,