Using start and end instead of left and right for better RTL support

.npmignore

@@ -1,6 +1,7 @@
 .sass-cache
 node_modules
 /dist
+/dist-lib
 public
 src
 .gitignore

README.md

@@ -1 +1,5 @@
-Visit [https://primeflex.org](PrimeFlex) website for demos and documentation.
+# PrimeFlexRTL
+
+PrimeFlexRTL is a lightweight and responsive CSS library that is forked from PrimeFlex and provides full support for right-to-left (RTL) languages.
+
+Visit [https://primeflex.org](PrimeFlex) website for demos and documentation.

components/doc/animations/fadeinenddoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function FadeinendDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="fadeinend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        fadeinend
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="fadeinend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        fadeinend
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/animations/fadeinstartdoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function FadeinstartDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="fadeinstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        fadeinstart
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="fadeinstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        fadeinstart
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/animations/fadeoutenddoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function FadeoutendDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="fadeoutend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        fadeoutend
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="fadeoutend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        fadeoutend
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/animations/zoomninrightdoc.js → components/doc/animations/fadeoutstartdoc.js

@@ -1,11 +1,11 @@
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
-export function ZoomninrightDoc(props) {
+export function FadeoutstartDoc(props) {
     const code = `<div class="flex flex-wrap align-items-center justify-content-center">
-    <div class="zoomninright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+    <div class="fadeoutstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
         font-bold bg-primary border-round m-2 px-5 py-3">
-        zoomninright
+        fadeoutstart
     </div>
 </div>
 `;
@@ -16,10 +16,10 @@ export function ZoomninrightDoc(props) {
             <div className="card">
                 <div className="flex flex-wrap align-items-center justify-content-center">
                     <div
-                        className="zoomninright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        className="fadeoutstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
                         font-bold bg-primary border-round m-2 px-5 py-3"
                     >
-                        zoomninright
+                        fadeoutstart
                     </div>
                 </div>
             </div>

components/doc/animations/flipenddoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function FlipendDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="flipend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        flipend
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="flipend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        flipend
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/animations/flipstartdoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function FlipstartDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="flipstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        flipstart
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="flipstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        flipstart
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/animations/zoominenddoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function ZoominendDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="zoominend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        zoominend
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="zoominend animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        zoominend
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/animations/zoominrightdoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function ZoominrightDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="zoominright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        zoominright
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="zoominright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        zoominright
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/animations/zoominstartdoc.js

@@ -0,0 +1,29 @@
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+
+export function ZoominstartDoc(props) {
+    const code = `<div class="flex flex-wrap align-items-center justify-content-center">
+    <div class="zoominstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+        font-bold bg-primary border-round m-2 px-5 py-3">
+        zoominstart
+    </div>
+</div>
+`;
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center justify-content-center">
+                    <div
+                        className="zoominstart animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
+                        font-bold bg-primary border-round m-2 px-5 py-3"
+                    >
+                        zoominstart
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/backgroundposition/examplesdoc.js

@@ -53,11 +53,11 @@ export function ExamplesDoc(props) {
                     </div>
                     <div className="flex flex-wrap align-items-center justify-content-center">
                         <div
-                            className="bg-bottom bg-no-repeat w-10rem h-10rem bg-primary border-round m-3"
+                            className="bg-left-bottom bg-no-repeat w-10rem h-10rem bg-primary border-round m-3"
                             style={{ backgroundImage: "url('https://www.primefaces.org/cdn/primeflex/images/product-placeholder-blue.svg')", backgroundSize: '5rem' }}
                         ></div>
                         <div
-                            className="bg-left-bottom bg-no-repeat w-10rem h-10rem bg-primary border-round m-3"
+                            className="bg-bottom bg-no-repeat w-10rem h-10rem bg-primary border-round m-3"
                             style={{ backgroundImage: "url('https://www.primefaces.org/cdn/primeflex/images/product-placeholder-blue.svg')", backgroundSize: '5rem' }}
                         ></div>
                         <div