From 67f347b0181167671e1c6cc6656014579fd717ee Mon Sep 17 00:00:00 2001
From: rakeshkumar1019 <srakeshkumar1019@gmail.com>
Date: Tue, 17 Dec 2024 09:49:08 +0530
Subject: [PATCH] ELEMENTS-1777: rtl support thumbnail & card

---
 .../nuxeo-document-thumbnail.js                      | 11 +++++++++++
 ui/widgets/nuxeo-card.js                             | 12 ++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js b/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js
index ef554ad99..63c736be9 100644
--- a/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js
+++ b/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js
@@ -58,6 +58,10 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior';
             filter: brightness(1.2);
             -webkit-filter: brightness(1.2);
           }
+          
+          :host([dir="rtl"]) img {
+            margin: auto auto auto 8px;
+          }
         </style>
 
         <img id="img" src="[[_thumbnail(document)]]" alt="[[_title(document)]]" on-error="_error" />
@@ -74,6 +78,13 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        this.setAttribute('dir', getComputedStyle(this).direction);
+      }
+    }
+
     _thumbnail(doc) {
       if (
         doc &&
diff --git a/ui/widgets/nuxeo-card.js b/ui/widgets/nuxeo-card.js
index 783b29688..1e9d2933d 100644
--- a/ui/widgets/nuxeo-card.js
+++ b/ui/widgets/nuxeo-card.js
@@ -98,6 +98,11 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
             --iron-icon-width: 16px;
             --iron-icon-height: 16px;
           }
+          
+          :host([dir="rtl"]) .header .icon {
+            margin-left: 8px;
+            margin-right: 0;
+          }
 
           .header .toggle {
             --iron-icon-width: 20px;
@@ -173,6 +178,13 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        this.setAttribute('dir', getComputedStyle(this).direction);
+      }
+    }
+
     _hasHeading(icon, heading, collapsible) {
       return icon || heading || collapsible;
     }