@k2b/ui 0.36.0 → 0.38.0

package/dist/browser/content/MessageRow.js

@@ -44,7 +44,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span>`),
   _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-message-row__footer><!$><!/><!$><!/>`),
   _tmpl$29 = /*#__PURE__*/_$template(`<div><!$><!/><div class=k2b-message-row__body><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
   _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-sr-only><!$><!/>, <!$><!/>: `),
-  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-message-row__meta><span class=k2b-sr-only><!$><!/>, </span><time class=k2b-message-row__time>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-message-row__meta><span class=k2b-sr-only><!$><!/>, </span><!$><!/><time class=k2b-message-row__time>`),
   _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-message-row__deleted><i class="ti ti-message-off"aria-hidden=true></i><!$><!/>`),
   _tmpl$33 = /*#__PURE__*/_$template(`<span class=k2b-message-row__writing><span class=k2b-chat-progress-dots aria-hidden=true><span></span><span></span><span>`),
   _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-message-row__file-icon aria-hidden=true><i>`),
@@ -699,10 +699,22 @@ export function MessageRow(props) {
                 _el$97 = _el$95.firstChild,
                 [_el$98, _co$25] = _$getNextMarker(_el$97.nextSibling),
                 _el$96 = _el$98.nextSibling,
-                _el$99 = _el$95.nextSibling;
+                _el$101 = _el$95.nextSibling,
+                [_el$102, _co$26] = _$getNextMarker(_el$101.nextSibling),
+                _el$100 = _el$102.nextSibling;
               _$insert(_el$95, () => props.author.name, _el$98, _co$25);
-              _$insert(_el$99, () => props.time);
-              _$effect(() => _$setAttribute(_el$99, "datetime", dateTimeOf(props.dateTime)));
+              _$insert(_el$94, _$createComponent(Show, {
+                get when() {
+                  return props.badge;
+                },
+                get children() {
+                  var _el$99 = _$getNextElement(_tmpl$7);
+                  _$insert(_el$99, () => props.badge);
+                  return _el$99;
+                }
+              }), _el$102, _co$26);
+              _$insert(_el$100, () => props.time);
+              _$effect(() => _$setAttribute(_el$100, "datetime", dateTimeOf(props.dateTime)));
               return _el$94;
             })();
           },
@@ -753,12 +765,12 @@ export function MessageRow(props) {
           },
           get fallback() {
             return (() => {
-              var _el$100 = _$getNextElement(_tmpl$32),
-                _el$101 = _el$100.firstChild,
-                _el$102 = _el$101.nextSibling,
-                [_el$103, _co$26] = _$getNextMarker(_el$102.nextSibling);
-              _$insert(_el$100, () => chatMessages().messageDeleted, _el$103, _co$26);
-              return _el$100;
+              var _el$103 = _$getNextElement(_tmpl$32),
+                _el$104 = _el$103.firstChild,
+                _el$105 = _el$104.nextSibling,
+                [_el$106, _co$27] = _$getNextMarker(_el$105.nextSibling);
+              _$insert(_el$103, () => chatMessages().messageDeleted, _el$106, _co$27);
+              return _el$103;
             })();
           },
           get children() {
@@ -920,27 +932,27 @@ export function MessageRow(props) {
             },
             get children() {
               return [(() => {
-                var _el$105 = _$getNextElement(_tmpl$34),
-                  _el$106 = _el$105.firstChild;
-                _$effect(() => _$className(_el$106, fileIcon(file)));
-                return _el$105;
+                var _el$108 = _$getNextElement(_tmpl$34),
+                  _el$109 = _el$108.firstChild;
+                _$effect(() => _$className(_el$109, fileIcon(file)));
+                return _el$108;
               })(), (() => {
-                var _el$107 = _$getNextElement(_tmpl$36),
-                  _el$108 = _el$107.firstChild,
-                  _el$110 = _el$108.nextSibling,
-                  [_el$111, _co$27] = _$getNextMarker(_el$110.nextSibling);
-                _$insert(_el$108, () => file.name);
-                _$insert(_el$107, _$createComponent(Show, {
+                var _el$110 = _$getNextElement(_tmpl$36),
+                  _el$111 = _el$110.firstChild,
+                  _el$113 = _el$111.nextSibling,
+                  [_el$114, _co$28] = _$getNextMarker(_el$113.nextSibling);
+                _$insert(_el$111, () => file.name);
+                _$insert(_el$110, _$createComponent(Show, {
                   get when() {
                     return file.detail;
                   },
                   get children() {
-                    var _el$109 = _$getNextElement(_tmpl$35);
-                    _$insert(_el$109, () => file.detail);
-                    return _el$109;
+                    var _el$112 = _$getNextElement(_tmpl$35);
+                    _$insert(_el$112, () => file.detail);
+                    return _el$112;
                   }
-                }), _el$111, _co$27);
-                return _el$107;
+                }), _el$114, _co$28);
+                return _el$110;
               })()];
             }
           })
@@ -973,20 +985,20 @@ export function MessageRow(props) {
         return props.thread;
       },
       children: thread => (() => {
-        var _el$112 = _$getNextElement(_tmpl$38),
-          _el$115 = _el$112.firstChild,
-          [_el$116, _co$28] = _$getNextMarker(_el$115.nextSibling),
-          _el$114 = _el$116.nextSibling,
-          _el$117 = _el$114.nextSibling,
-          [_el$118, _co$29] = _$getNextMarker(_el$117.nextSibling);
-        _el$112.$$click = () => thread().onOpen();
-        _$insert(_el$112, _$createComponent(Show, {
+        var _el$115 = _$getNextElement(_tmpl$38),
+          _el$118 = _el$115.firstChild,
+          [_el$119, _co$29] = _$getNextMarker(_el$118.nextSibling),
+          _el$117 = _el$119.nextSibling,
+          _el$120 = _el$117.nextSibling,
+          [_el$121, _co$30] = _$getNextMarker(_el$120.nextSibling);
+        _el$115.$$click = () => thread().onOpen();
+        _$insert(_el$115, _$createComponent(Show, {
           get when() {
             return (thread().participants?.length ?? 0) > 0;
           },
           get children() {
-            var _el$113 = _$getNextElement(_tmpl$37);
-            _$insert(_el$113, _$createComponent(For, {
+            var _el$116 = _$getNextElement(_tmpl$37);
+            _$insert(_el$116, _$createComponent(For, {
               get each() {
                 return thread().participants?.slice(0, 3);
               },
@@ -1003,27 +1015,27 @@ export function MessageRow(props) {
                 size: "xs"
               })
             }));
-            return _el$113;
+            return _el$116;
           }
-        }), _el$116, _co$28);
-        _$insert(_el$114, () => chatMessages().messageReplies({
+        }), _el$119, _co$29);
+        _$insert(_el$117, () => chatMessages().messageReplies({
           count: thread().count
         }));
-        _$insert(_el$112, _$createComponent(Show, {
+        _$insert(_el$115, _$createComponent(Show, {
           get when() {
             return thread().lastReply;
           },
           children: time => (() => {
-            var _el$119 = _$getNextElement(_tmpl$39);
-            _$insert(_el$119, () => chatMessages().messageLastReply({
+            var _el$122 = _$getNextElement(_tmpl$39);
+            _$insert(_el$122, () => chatMessages().messageLastReply({
               time: time()
             }));
-            _$effect(() => _$setAttribute(_el$119, "datetime", dateTimeOf(thread().lastReplyDateTime)));
-            return _el$119;
+            _$effect(() => _$setAttribute(_el$122, "datetime", dateTimeOf(thread().lastReplyDateTime)));
+            return _el$122;
           })()
-        }), _el$118, _co$29);
+        }), _el$121, _co$30);
         _$runHydrationEvents();
-        return _el$112;
+        return _el$115;
       })()
     }), _el$80, _co$19);
     _$insert(_el$27, _$createComponent(Show, {
@@ -1079,9 +1091,9 @@ export function MessageRow(props) {
                   },
                   get children() {
                     return [_$getNextElement(_tmpl$40), (() => {
-                      var _el$121 = _$getNextElement(_tmpl$);
-                      _$insert(_el$121, () => chatMessages().sending);
-                      return _el$121;
+                      var _el$124 = _$getNextElement(_tmpl$);
+                      _$insert(_el$124, () => chatMessages().sending);
+                      return _el$124;
                     })()];
                   }
                 }), _$createComponent(Show, {
@@ -1090,9 +1102,9 @@ export function MessageRow(props) {
                   },
                   get children() {
                     return [_$getNextElement(_tmpl$41), (() => {
-                      var _el$123 = _$getNextElement(_tmpl$);
-                      _$insert(_el$123, () => chatMessages().messageNotSent);
-                      return _el$123;
+                      var _el$126 = _$getNextElement(_tmpl$);
+                      _$insert(_el$126, () => chatMessages().messageNotSent);
+                      return _el$126;
                     })(), _$createComponent(Show, {
                       get when() {
                         return props.onRetry;
@@ -1135,26 +1147,26 @@ export function MessageRow(props) {
                           },
                           get children() {
                             return [_$getNextElement(_tmpl$42), (() => {
-                              var _el$125 = _$getNextElement(_tmpl$43);
-                              _$insert(_el$125, () => chatMessages().messageSent);
-                              return _el$125;
+                              var _el$128 = _$getNextElement(_tmpl$43);
+                              _$insert(_el$128, () => chatMessages().messageSent);
+                              return _el$128;
                             })()];
                           }
                         });
                       },
                       children: receipt => [_$getNextElement(_tmpl$44), (() => {
-                        var _el$127 = _$getNextElement(_tmpl$45);
-                        _$insert(_el$127, receipt);
-                        return _el$127;
+                        var _el$130 = _$getNextElement(_tmpl$45);
+                        _$insert(_el$130, receipt);
+                        return _el$130;
                       })()]
                     });
                   }
                 })];
               },
               children: progress => [_$getNextElement(_tmpl$46), (() => {
-                var _el$129 = _$getNextElement(_tmpl$47);
-                _$insert(_el$129, () => progress().status);
-                return _el$129;
+                var _el$132 = _$getNextElement(_tmpl$47);
+                _$insert(_el$132, () => progress().status);
+                return _el$132;
               })(), _$createComponent(Show, {
                 get when() {
                   return progress().onStop;
@@ -1228,46 +1240,46 @@ function OriginChip(props) {
     },
     get fallback() {
       return (() => {
-        var _el$130 = _$getNextElement(_tmpl$48),
-          _el$131 = _el$130.firstChild,
-          [_el$132, _co$30] = _$getNextMarker(_el$131.nextSibling),
-          _el$133 = _el$132.nextSibling,
-          [_el$134, _co$31] = _$getNextMarker(_el$133.nextSibling);
-        _$insert(_el$130, _$createComponent(Show, {
+        var _el$133 = _$getNextElement(_tmpl$48),
+          _el$134 = _el$133.firstChild,
+          [_el$135, _co$31] = _$getNextMarker(_el$134.nextSibling),
+          _el$136 = _el$135.nextSibling,
+          [_el$137, _co$32] = _$getNextMarker(_el$136.nextSibling);
+        _$insert(_el$133, _$createComponent(Show, {
           get when() {
             return props.origin.icon;
           },
           children: icon => (() => {
-            var _el$135 = _$getNextElement(_tmpl$49);
-            _$effect(() => _$className(_el$135, icon()));
-            return _el$135;
+            var _el$138 = _$getNextElement(_tmpl$49);
+            _$effect(() => _$className(_el$138, icon()));
+            return _el$138;
           })()
-        }), _el$132, _co$30);
-        _$insert(_el$130, () => props.origin.label, _el$134, _co$31);
-        return _el$130;
+        }), _el$135, _co$31);
+        _$insert(_el$133, () => props.origin.label, _el$137, _co$32);
+        return _el$133;
       })();
     },
     children: select => (() => {
-      var _el$136 = _$getNextElement(_tmpl$50),
-        _el$137 = _el$136.firstChild,
-        [_el$138, _co$32] = _$getNextMarker(_el$137.nextSibling),
-        _el$139 = _el$138.nextSibling,
-        [_el$140, _co$33] = _$getNextMarker(_el$139.nextSibling);
-      _el$136.$$click = () => select()();
-      _$insert(_el$136, _$createComponent(Show, {
+      var _el$139 = _$getNextElement(_tmpl$50),
+        _el$140 = _el$139.firstChild,
+        [_el$141, _co$33] = _$getNextMarker(_el$140.nextSibling),
+        _el$142 = _el$141.nextSibling,
+        [_el$143, _co$34] = _$getNextMarker(_el$142.nextSibling);
+      _el$139.$$click = () => select()();
+      _$insert(_el$139, _$createComponent(Show, {
         get when() {
           return props.origin.icon;
         },
         children: icon => (() => {
-          var _el$141 = _$getNextElement(_tmpl$49);
-          _$effect(() => _$className(_el$141, icon()));
-          return _el$141;
+          var _el$144 = _$getNextElement(_tmpl$49);
+          _$effect(() => _$className(_el$144, icon()));
+          return _el$144;
         })()
-      }), _el$138, _co$32);
-      _$insert(_el$136, () => props.origin.label, _el$140, _co$33);
-      _$effect(() => _$setAttribute(_el$136, "aria-label", props.origin.selectLabel));
+      }), _el$141, _co$33);
+      _$insert(_el$139, () => props.origin.label, _el$143, _co$34);
+      _$effect(() => _$setAttribute(_el$139, "aria-label", props.origin.selectLabel));
       _$runHydrationEvents();
-      return _el$136;
+      return _el$139;
     })()
   });
 }
@@ -1278,33 +1290,33 @@ function OriginChip(props) {
  */
 export function MessageEventRow(props) {
   return (() => {
-    var _el$142 = _$getNextElement(_tmpl$52),
-      _el$143 = _el$142.firstChild,
-      _el$145 = _el$143.nextSibling,
-      [_el$146, _co$34] = _$getNextMarker(_el$145.nextSibling),
-      _el$147 = _el$146.nextSibling,
-      [_el$148, _co$35] = _$getNextMarker(_el$147.nextSibling),
-      _el$149 = _el$148.nextSibling,
-      [_el$150, _co$36] = _$getNextMarker(_el$149.nextSibling);
-    _$insert(_el$142, _$createComponent(Show, {
+    var _el$145 = _$getNextElement(_tmpl$52),
+      _el$146 = _el$145.firstChild,
+      _el$148 = _el$146.nextSibling,
+      [_el$149, _co$35] = _$getNextMarker(_el$148.nextSibling),
+      _el$150 = _el$149.nextSibling,
+      [_el$151, _co$36] = _$getNextMarker(_el$150.nextSibling),
+      _el$152 = _el$151.nextSibling,
+      [_el$153, _co$37] = _$getNextMarker(_el$152.nextSibling);
+    _$insert(_el$145, _$createComponent(Show, {
       get when() {
         return props.href;
       },
       get fallback() {
         return (() => {
-          var _el$151 = _$getNextElement(_tmpl$53);
-          _$insert(_el$151, () => props.children);
-          return _el$151;
+          var _el$154 = _$getNextElement(_tmpl$53);
+          _$insert(_el$154, () => props.children);
+          return _el$154;
         })();
       },
       children: href => (() => {
-        var _el$152 = _$getNextElement(_tmpl$54);
-        _$insert(_el$152, () => props.children);
-        _$effect(() => _$setAttribute(_el$152, "href", href()));
-        return _el$152;
+        var _el$155 = _$getNextElement(_tmpl$54);
+        _$insert(_el$155, () => props.children);
+        _$effect(() => _$setAttribute(_el$155, "href", href()));
+        return _el$155;
       })()
-    }), _el$146, _co$34);
-    _$insert(_el$142, _$createComponent(Show, {
+    }), _el$149, _co$35);
+    _$insert(_el$145, _$createComponent(Show, {
       get when() {
         return props.origin;
       },
@@ -1313,61 +1325,61 @@ export function MessageEventRow(props) {
           return origin();
         }
       })
-    }), _el$148, _co$35);
-    _$insert(_el$142, _$createComponent(Show, {
+    }), _el$151, _co$36);
+    _$insert(_el$145, _$createComponent(Show, {
       get when() {
         return props.time;
       },
       get children() {
-        var _el$144 = _$getNextElement(_tmpl$51);
-        _$insert(_el$144, () => props.time);
-        _$effect(() => _$setAttribute(_el$144, "datetime", dateTimeOf(props.dateTime)));
-        return _el$144;
+        var _el$147 = _$getNextElement(_tmpl$51);
+        _$insert(_el$147, () => props.time);
+        _$effect(() => _$setAttribute(_el$147, "datetime", dateTimeOf(props.dateTime)));
+        return _el$147;
       }
-    }), _el$150, _co$36);
+    }), _el$153, _co$37);
     _$effect(_p$ => {
       var _v$26 = props.class ? `k2b-message-event-row ${props.class}` : "k2b-message-event-row",
         _v$27 = props.icon ?? "ti ti-point";
-      _v$26 !== _p$.e && _$className(_el$142, _p$.e = _v$26);
-      _v$27 !== _p$.t && _$className(_el$143, _p$.t = _v$27);
+      _v$26 !== _p$.e && _$className(_el$145, _p$.e = _v$26);
+      _v$27 !== _p$.t && _$className(_el$146, _p$.t = _v$27);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$142;
+    return _el$145;
   })();
 }
 
 /** Several event lines in a row as one line that opens them, such as "4 changes to Invitation and Light test". */
 export function MessageEventGroup(props) {
   return (() => {
-    var _el$153 = _$getNextElement(_tmpl$55),
-      _el$154 = _el$153.firstChild,
-      _el$155 = _el$154.nextSibling,
-      _el$158 = _el$155.nextSibling,
-      [_el$159, _co$37] = _$getNextMarker(_el$158.nextSibling),
-      _el$157 = _el$159.nextSibling;
-    _el$153.$$click = () => props.onToggle();
-    _$insert(_el$155, () => props.label);
-    _$insert(_el$153, _$createComponent(Show, {
+    var _el$156 = _$getNextElement(_tmpl$55),
+      _el$157 = _el$156.firstChild,
+      _el$158 = _el$157.nextSibling,
+      _el$161 = _el$158.nextSibling,
+      [_el$162, _co$38] = _$getNextMarker(_el$161.nextSibling),
+      _el$160 = _el$162.nextSibling;
+    _el$156.$$click = () => props.onToggle();
+    _$insert(_el$158, () => props.label);
+    _$insert(_el$156, _$createComponent(Show, {
       get when() {
         return props.time;
       },
       get children() {
-        var _el$156 = _$getNextElement(_tmpl$51);
-        _$insert(_el$156, () => props.time);
-        _$effect(() => _$setAttribute(_el$156, "datetime", dateTimeOf(props.dateTime)));
-        return _el$156;
+        var _el$159 = _$getNextElement(_tmpl$51);
+        _$insert(_el$159, () => props.time);
+        _$effect(() => _$setAttribute(_el$159, "datetime", dateTimeOf(props.dateTime)));
+        return _el$159;
       }
-    }), _el$159, _co$37);
+    }), _el$162, _co$38);
     _$effect(_p$ => {
       var _v$28 = props.class ? `k2b-message-event-row k2b-message-event-group ${props.class}` : "k2b-message-event-row k2b-message-event-group",
         _v$29 = props.expanded,
         _v$30 = props.expanded ? "ti ti-chevron-up" : "ti ti-chevron-down";
-      _v$28 !== _p$.e && _$className(_el$153, _p$.e = _v$28);
-      _v$29 !== _p$.t && _$setAttribute(_el$153, "aria-expanded", _p$.t = _v$29);
-      _v$30 !== _p$.a && _$className(_el$157, _p$.a = _v$30);
+      _v$28 !== _p$.e && _$className(_el$156, _p$.e = _v$28);
+      _v$29 !== _p$.t && _$setAttribute(_el$156, "aria-expanded", _p$.t = _v$29);
+      _v$30 !== _p$.a && _$className(_el$160, _p$.a = _v$30);
       return _p$;
     }, {
       e: undefined,
@@ -1375,43 +1387,43 @@ export function MessageEventGroup(props) {
       a: undefined
     });
     _$runHydrationEvents();
-    return _el$153;
+    return _el$156;
   })();
 }
 
 /** A quiet, centered line for something that happened in the conversation, such as a person joining. */
 export function MessageSystemRow(props) {
   return (() => {
-    var _el$160 = _$getNextElement(_tmpl$56),
-      _el$163 = _el$160.firstChild,
-      [_el$164, _co$38] = _$getNextMarker(_el$163.nextSibling),
-      _el$161 = _el$164.nextSibling,
-      _el$165 = _el$161.nextSibling,
-      [_el$166, _co$39] = _$getNextMarker(_el$165.nextSibling);
-    _$insert(_el$160, _$createComponent(Show, {
+    var _el$163 = _$getNextElement(_tmpl$56),
+      _el$166 = _el$163.firstChild,
+      [_el$167, _co$39] = _$getNextMarker(_el$166.nextSibling),
+      _el$164 = _el$167.nextSibling,
+      _el$168 = _el$164.nextSibling,
+      [_el$169, _co$40] = _$getNextMarker(_el$168.nextSibling);
+    _$insert(_el$163, _$createComponent(Show, {
       get when() {
         return props.icon;
       },
       children: icon => (() => {
-        var _el$167 = _$getNextElement(_tmpl$49);
-        _$effect(() => _$className(_el$167, icon()));
-        return _el$167;
+        var _el$170 = _$getNextElement(_tmpl$49);
+        _$effect(() => _$className(_el$170, icon()));
+        return _el$170;
       })()
-    }), _el$164, _co$38);
-    _$insert(_el$161, () => props.children);
-    _$insert(_el$160, _$createComponent(Show, {
+    }), _el$167, _co$39);
+    _$insert(_el$164, () => props.children);
+    _$insert(_el$163, _$createComponent(Show, {
       get when() {
         return props.time;
       },
       get children() {
-        var _el$162 = _$getNextElement(_tmpl$51);
-        _$insert(_el$162, () => props.time);
-        _$effect(() => _$setAttribute(_el$162, "datetime", dateTimeOf(props.dateTime)));
-        return _el$162;
+        var _el$165 = _$getNextElement(_tmpl$51);
+        _$insert(_el$165, () => props.time);
+        _$effect(() => _$setAttribute(_el$165, "datetime", dateTimeOf(props.dateTime)));
+        return _el$165;
       }
-    }), _el$166, _co$39);
-    _$effect(() => _$className(_el$160, props.class ? `k2b-message-system-row ${props.class}` : "k2b-message-system-row"));
-    return _el$160;
+    }), _el$169, _co$40);
+    _$effect(() => _$className(_el$163, props.class ? `k2b-message-system-row ${props.class}` : "k2b-message-system-row"));
+    return _el$163;
   })();
 }
 _$delegateEvents(["click", "focusin"]);