TF-3416 Implement preview EML attachment

core/lib/utils/html/html_template.dart

@@ -1,5 +1,6 @@
 
 class HtmlTemplate {
+  static const String fontLink = '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">';
   static const String nameClassToolTip = 'tmail-tooltip';
   static const String tooltipLinkCss = '''
     .$nameClassToolTip .tooltiptext {
@@ -64,4 +65,154 @@ class HtmlTemplate {
       }
      </style>
   ''';
+
+  static const String previewEMLFileCssStyle = '''
+    <style> 
+      body {
+        font-family: Arial, 'Inter', sans-serif;
+        color: #333;
+        margin: 0;
+        padding: 0;
+      }
+  
+      .email-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 16px;
+      }
+  
+      .email-subject {
+        font-weight: bold;
+        font-size: 16px;
+        color: #333;
+        margin-bottom: 10px;
+      }
+  
+      .email-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+      }
+  
+      .placeholder-icon {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f2f2f2;
+        border-radius: 50%;
+        color: #d9534f;
+        font-size: 18px;
+        font-weight: bold;
+        flex-shrink: 0;
+      }
+  
+      .email-info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+      }
+  
+      .sender {
+        font-weight: bold;
+        color: #333;
+      }
+  
+      .sender-email {
+        font-size: 12px;
+        color: #666;
+      }
+  
+      .recipients {
+        font-size: 12px;
+        color: #666;
+        margin-top: 5px;
+        word-wrap: break-word;
+        line-height: 1.5;
+      }
+  
+      .email-meta {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+  
+      .attachment-icon {
+        width: 16px;
+        height: 16px;
+      }
+  
+      .email-date {
+        font-size: 12px;
+        color: #666;
+        white-space: nowrap;
+      }
+  
+      .email-body {
+        font-size: 14px;
+        color: #333;
+        margin-top: 10px;
+        margin-left: 40px;
+      }
+  
+      .attachments {
+        margin-top: 15px;
+        padding-top: 10px;
+        border-top: 1px solid #ddd;
+        margin-left: 40px;
+      }
+  
+      .attachment-title {
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 14px;
+      }
+  
+      .attachment-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        font-size: 12px;
+        color: #666;
+        margin-bottom: 10px;
+        cursor: pointer;
+        padding: 5px;
+        transition: background-color 0.3s, box-shadow 0.3s;
+      }
+  
+      .attachment-item:hover {
+        background-color: #f5f5f5;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+      }
+  
+      .attachment-item .icon {
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #f2f2f2;
+        border-radius: 50%;
+        color: #007bff;
+      }
+  
+      .attachment-item .file-details {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+  
+      .attachment-item .file-name {
+        font-weight: bold;
+      }
+  
+      .attachment-item .file-size {
+        font-size: 12px;
+        color: #666;
+      }
+     </style>
+  ''';
 }

core/lib/utils/html/html_utils.dart

@@ -421,4 +421,28 @@ class HtmlUtils {
       const fileSizeSpan = document.getElementById('file-size');
       fileSizeSpan.textContent = formatFileSize(bytesJs.length);''';
   }
+
+  static void openNewWindowByUrl(
+    String url,
+    {
+      int width = 800,
+      int height = 600,
+    }
+  ) async {
+    try {
+      final screenWidth = html.window.screen?.width ?? width;
+      final screenHeight = html.window.screen?.height ?? height;
+
+      final left = (screenWidth - width) ~/ 2;
+      final top = (screenHeight - height) ~/ 2;
+
+      final options = 'width=$width,height=$height,top=$top,left=$left';
+
+      html.window.open(url, '_blank', options);
+
+      html.Url.revokeObjectUrl(url);
+    } catch (e) {
+      logError('AppUtils::openNewWindowByUrl:Exception = $e');
+    }
+  }
 }