@social-mail/social-mail-client 1.2.738 → 1.2.740

package/dist/public/channel/ChannelView.pack.js

@@ -25303,26 +25303,39 @@ System.register(["@web-atoms/core/dist/core/XNode"], function (_export, _context
         return XNode.create("div", null);
       }
     }
-    const children = [];
+    let children = [];
     for (const element of email.attachments) {
       if (/video/i.test(element.contentType)) {
-        children.push(XNode.create("video", {
+        children.push(XNode.create("div", {
+          "data-element": "preview"
+        }, XNode.create("video", {
           controls: "true",
           src: element.url
-        }));
+        })));
         continue;
       }
       if (/image/i.test(element.contentType)) {
-        children.push(XNode.create("img", {
+        children.push(XNode.create("div", {
+          "data-element": "preview"
+        }, XNode.create("img", {
           src: element.url
-        }));
+        })));
         continue;
       }
     }
     if (children.length) {
-      return XNode.create("carousel-slider", {}, ...children);
+      if (children.length > 1) {
+        children = [XNode.create("carousel-slider", {
+          "data-element": "media"
+        }, ...children)];
+      }
+      return XNode.create("div", {
+        "data-element": "media"
+      }, children[0]);
     }
-    return XNode.create("div", null);
+    return XNode.create("div", {
+      "data-element": "media"
+    });
   }
   _export("default", MediaCarousel);
   return {
@@ -25336,10 +25349,10 @@ System.register(["@web-atoms/core/dist/core/XNode"], function (_export, _context
 
     AmdLoader.instance.setup("@social-mail/social-mail-client/dist/public/channel/controls/MediaCarousel");
 
-System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateFormats", "@web-atoms/core/dist/core/types", "../../web/page/mails/service/ConversationService", "./controls/MediaCarousel"], function (_export, _context) {
+System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateFormats", "@web-atoms/core/dist/core/types", "../../web/page/mails/service/ConversationService", "./controls/MediaCarousel", "@web-atoms/core/dist/style/styled"], function (_export, _context) {
   "use strict";
 
-  var XNode, DateFormats, UMD, renderMail, MediaCarousel, commentIcon;
+  var XNode, DateFormats, UMD, renderMail, MediaCarousel, styled, commentIcon;
   function PostView({
     email = void 0,
     channel = void 0,
@@ -25350,7 +25363,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateForma
       engagements = []
     } = email;
     const isComment = email.parentID !== null;
-    return XNode.create("section", {
+    return XNode.create("post-view", {
       "data-element": "blog-item",
       "data-comment": isComment,
       "data-item-path": itemPath,
@@ -25363,6 +25376,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateForma
       "data-element": "date",
       text: DateFormats.relative.short(email.dateSent)
     }), !isComment && XNode.create("h5", {
+      "data-element": "author",
       text: email.senderName
     }), XNode.create("section", {
       "data-element": "content"
@@ -25418,8 +25432,107 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../common/date/DateForma
       renderMail = _webPageMailsServiceConversationService.renderMail;
     }, function (_controlsMediaCarousel) {
       MediaCarousel = _controlsMediaCarousel.default;
+    }, function (_webAtomsCoreDistStyleStyled) {
+      styled = _webAtomsCoreDistStyleStyled.default;
     }],
     execute: function () {
+      styled.css`
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto 1fr auto auto auto;
+
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    row-gap: 10px;
+
+    & > [data-element=author] {
+        grid-row: 1;
+        grid-column: 1;
+        margin: 0;
+        font-weight: normal;
+        font-size: 0.8rem;
+        line-height: 1;
+        letter-spacing: 0.05rem;
+    }
+
+    & > [data-element=date] {
+        grid-row: 1;
+        grid-column: 2;
+        margin: 0;
+        font-weight: normal;
+        font-size: 0.8rem;
+        line-height: 1;
+        letter-spacing: 0.05rem;
+    }
+
+    & > [data-element=title] {
+        grid-row: 2;
+        grid-column: 1 / span 2;
+        margin: 0;
+        font-weight: normal;
+        font-size: 1.65rem;
+        line-height: 1.2;
+    }
+
+    & > [data-element=media] {
+        grid-row: 3;
+        grid-column: 1/ span 2;
+        display: grid;
+        background-color: #343a400d;
+        border-radius: 20px;
+        overflow: hidden;
+        & img, & video {
+            max-height: 70vh;
+        }
+        & [data-element=preview] {
+            display: grid;
+            width: 100%;
+            & > * {
+                place-self: center;
+                max-width: 100%;
+            }
+        }
+        & > carousel-slider {
+            place-self: stretch;
+        }
+    }
+
+    &[has-poster] > [data-element=media] {
+        grid-row: 5;
+        grid-column: 1 / span 3;
+    }
+
+    & > [data-element=content] {
+        grid-row: 4;
+        grid-column: 1 / span 2;
+    }
+
+    & > footer {
+        grid-row: 6;
+        padding: 10px;
+        grid-column: 1/ span 2;
+        background-color: canvas;
+        color: canvastext;
+        display: flex;
+        gap: 5px;
+        flex-wrap: wrap;
+
+        & > [data-element=engagements] {
+            border-radius: 9999px;
+            padding: 2px;
+            padding-left: 10px;
+            padding-right: 10px;
+            border: solid 1px lightgray;
+            cursor: pointer;
+        }
+    }
+
+    & > [data-element=comments] {
+        grid-row: 7;
+    }
+
+    `.installGlobal("post-view");
       commentIcon = "💬";
     }
   };
@@ -25843,6 +25956,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
                 object-fit: contain;
                 grid-column: 1;
                 background-color: lightgray;
+                border-radius: 5px;
             }
             & > a {
                 grid-column: 2;