@banta/sdk 4.6.1 → 4.6.3

package/bundles/banta-sdk.umd.js

@@ -8620,6 +8620,7 @@
 
     var CommentViewComponent = /** @class */ (function () {
         function CommentViewComponent(backend) {
+            var _this = this;
             this.backend = backend;
             this._sourceSubs = new rxjs.Subscription();
             this._selected = new rxjs.Subject();
@@ -8638,6 +8639,7 @@
             this.menuMessage = null;
             this.messages = [];
             this.customSortEnabled = false;
+            this.sourceLoaded = new Promise(function (r) { return _this.markSourceLoaded = r; });
             this.maxMessages = 2000;
             this.maxVisibleMessages = 200;
             this.newestLast = false;
@@ -8655,6 +8657,61 @@
             enumerable: false,
             configurable: true
         });
+        /**
+         * Returns true if this message can be found within one of the message buffers (older, current, newer)
+         * @param message
+         */
+        CommentViewComponent.prototype.isMessageLoadedInContext = function (message) {
+            return this.olderMessages.find(function (x) { return x.id === message.id; })
+                || this.messages.find(function (x) { return x.id === message.id; })
+                || this.newMessages.find(function (x) { return x.id === message.id; });
+        };
+        CommentViewComponent.prototype.loadMessageInContext = function (message) {
+            return __awaiter(this, void 0, void 0, function () {
+                var pageSize, items, index, startIndex;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.sourceLoaded];
+                        case 1:
+                            _c.sent();
+                            console.log("Loading message " + message.id + " in context...");
+                            _c.label = 2;
+                        case 2:
+                            if (!(this.hasMore && !this.isMessageLoadedInContext(message))) return [3 /*break*/, 4];
+                            console.log("...Need to load more comments to find " + message.id);
+                            return [4 /*yield*/, this.showMore()];
+                        case 3:
+                            _c.sent();
+                            return [3 /*break*/, 2];
+                        case 4:
+                            console.log("Finished loading comments, hasMore=" + this.hasMore);
+                            if (!this.isMessageLoadedInContext(message)) {
+                                console.error("Error while loading message in context: Failed to find message " + message.id + ", maybe it was deleted!");
+                                return [2 /*return*/, false];
+                            }
+                            pageSize = this.maxVisibleMessages;
+                            items = [].concat(this.olderMessages, this.messages, this.newMessages);
+                            index = items.findIndex(function (x) { return x.id === message.id; });
+                            if (index < 0) {
+                                console.error("Error while loading message in context: Message was not present in message list!");
+                                return [2 /*return*/, false];
+                            }
+                            console.log("Total messages: " + items.length);
+                            console.log("Page size: " + pageSize);
+                            console.log("Message index: " + index);
+                            startIndex = Math.max(0, index - pageSize / 2);
+                            console.log("Start index: " + index);
+                            this.newMessages = items.splice(0, startIndex);
+                            this.messages = items.splice(0, pageSize);
+                            this.olderMessages = items;
+                            console.log(this.olderMessages.length + " older messages");
+                            console.log(this.messages.length + " current messages");
+                            console.log(this.newMessages.length + " newer messages");
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         /**
          * Get the CommentComponent instantiated for the given ChatMessage,
          * if it exists in the current view. Note that messages which are not
@@ -8796,6 +8853,8 @@
                             messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
                             this.messages = this.newestLast ? messages.slice().reverse() : messages;
                             this.sortMessages();
+                            if (this.markSourceLoaded)
+                                this.markSourceLoaded();
                             return [2 /*return*/];
                     }
                 });
@@ -8821,6 +8880,7 @@
                     overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
                     this.olderMessages = overflow.concat(this.olderMessages);
                     this.olderMessages.splice(this.maxMessages - this.maxVisibleMessages, this.olderMessages.length);
+                    this.hasMore = this.olderMessages.length > 0;
                     return [2 /*return*/];
                 });
             });
@@ -9040,6 +9100,7 @@
             this.activatedRoute = activatedRoute;
             this.matSnackBar = matSnackBar;
             this.ngZone = ngZone;
+            this.viewReady = new Promise(function (r) { return _this.markViewReady = r; });
             // Loading Screen
             this._loadingMessage = '';
             this.loadingMessageVisible = false;
@@ -9057,6 +9118,7 @@
                 "We'll keep trying, but it's not looking great. \n            Commenting & chat services may be down. \n            If you continue to experience issues, please contact support.\n        "
             ];
             this.useInlineReplies = true;
+            this.loaded = new Promise(function (r) { return _this.markLoaded = r; });
             // Properties
             this._signInSelected = new rxjs.Subject();
             this._permissionDeniedError = new rxjs.Subject();
@@ -9093,27 +9155,28 @@
                 { hashtag: 'timeout', description: 'Cause a slow timeout error' },
                 { hashtag: 'slow', description: 'Be slow when this message is posted' },
             ];
+            this.loadingSharedComment = false;
             this.sendMessage = function (message) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, intercept, e_1;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
-                            _d.trys.push([0, 4, , 5]);
+                            _e.trys.push([0, 4, , 5]);
                             return [4 /*yield*/, ((_a = this.shouldInterceptMessageSend) === null || _a === void 0 ? void 0 : _a.call(this, message, this.source))];
                         case 1:
-                            intercept = _d.sent();
+                            intercept = _e.sent();
                             if (!!intercept) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.source.send(message)];
                         case 2:
-                            _d.sent();
-                            _d.label = 3;
+                            _e.sent();
+                            _e.label = 3;
                         case 3:
                             if (this.source.sortOrder !== common$1.CommentsOrder.NEWEST) {
                                 this.sortOrder = common$1.CommentsOrder.NEWEST;
                             }
                             return [2 /*return*/, true];
                         case 4:
-                            e_1 = _d.sent();
+                            e_1 = _e.sent();
                             this.handleBackendException(e_1, 'Could not send: ');
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -9122,21 +9185,21 @@
             }); };
             this.sendReply = function (message) { return __awaiter(_this, void 0, void 0, function () {
                 var _b, intercept, e_2;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
-                            _d.trys.push([0, 4, , 5]);
+                            _e.trys.push([0, 4, , 5]);
                             return [4 /*yield*/, ((_b = this.shouldInterceptMessageSend) === null || _b === void 0 ? void 0 : _b.call(this, message, this.selectedMessageThread))];
                         case 1:
-                            intercept = _d.sent();
+                            intercept = _e.sent();
                             if (!!intercept) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.selectedMessageThread.send(message)];
                         case 2:
-                            _d.sent();
-                            _d.label = 3;
+                            _e.sent();
+                            _e.label = 3;
                         case 3: return [2 /*return*/, true];
                         case 4:
-                            e_2 = _d.sent();
+                            e_2 = _e.sent();
                             this.handleBackendException(e_2, 'Could not send reply: ');
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -9183,9 +9246,9 @@
                 var queryString = window.location.search.substring(1);
                 var query = queryString.split('&')
                     .map(function (s) { return s.split('='); })
-                    .reduce(function (o, _d) {
-                    var _e = __read(_d, 2), k = _e[0], v = _e[1];
-                    return (o[k] = v, o);
+                    .reduce(function (o, _e) {
+                    var _f = __read(_e, 2), k = _f[0], v = _f[1];
+                    return (o[decodeURIComponent(k)] = decodeURIComponent(v), o);
                 }, {});
                 var commentID = query['comment'];
                 if (commentID) {
@@ -9225,6 +9288,7 @@
                 }
                 callback();
             }
+            this.markViewReady();
         };
         BantaCommentsComponent.prototype.ngOnDestroy = function () {
             this._subs.unsubscribe();
@@ -9234,19 +9298,19 @@
         BantaCommentsComponent.prototype.setSourceFromTopicID = function (topicID) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     if (typeof window === 'undefined')
                         return [2 /*return*/];
                     setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                        var _d;
-                        return __generator(this, function (_e) {
-                            switch (_e.label) {
+                        var _e;
+                        return __generator(this, function (_f) {
+                            switch (_f.label) {
                                 case 0:
                                     console.log("[banta-comments] Subscribing to topic source '" + topicID + "'");
-                                    _d = this;
+                                    _e = this;
                                     return [4 /*yield*/, this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder })];
                                 case 1:
-                                    _d.source = _e.sent();
+                                    _e.source = _f.sent();
                                     this._sourceIsOwned = true;
                                     return [2 /*return*/];
                             }
@@ -9277,25 +9341,25 @@
         BantaCommentsComponent.prototype.startLoading = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             this.loadingStartedAt = this.messageChangedAt = Date.now();
                             if (this.updateLoading())
                                 return [2 /*return*/];
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 100); })];
                         case 1:
-                            _d.sent();
+                            _e.sent();
                             if (this.updateLoading())
                                 return [2 /*return*/];
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
                         case 2:
-                            _d.sent();
+                            _e.sent();
                             if (this.updateLoading())
                                 return [2 /*return*/];
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 500); })];
                         case 3:
-                            _d.sent();
+                            _e.sent();
                             if (this.updateLoading())
                                 return [2 /*return*/];
                             console.log("[Banta] Loading is taking a long time! Showing loading screen.");
@@ -9344,6 +9408,7 @@
                 this.loadingMessage = "Here we go!";
                 setTimeout(function () {
                     _this.loading = false;
+                    _this.markLoaded();
                 }, 750);
                 return true;
             }
@@ -9478,65 +9543,88 @@
                 var comment = document.querySelectorAll("[data-comment-id=\"" + commentId + "\"]");
                 if (comment.length > 0) {
                     // comment.item(0).scroll({behavior: 'smooth'});
-                    comment.item(0).scrollIntoView();
+                    comment.item(0).scrollIntoView({
+                        inline: 'center',
+                        block: 'center'
+                    });
                 }
             }, 1000);
         };
         BantaCommentsComponent.prototype.navigateToSharedComment = function (id) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
                 var source, message, e_3, parentMessage, thread;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
+                            this.loadingSharedComment = true;
                             source = this.source;
                             return [4 /*yield*/, source.ready];
                         case 1:
-                            _d.sent();
-                            console.log("Navigating to shared comment with ID '" + id + "'...");
-                            _d.label = 2;
+                            _e.sent();
+                            return [4 /*yield*/, this.viewReady];
                         case 2:
-                            _d.trys.push([2, 4, , 5]);
-                            return [4 /*yield*/, this.source.get(id)];
+                            _e.sent();
+                            return [4 /*yield*/, this.loaded];
                         case 3:
-                            message = _d.sent();
-                            return [3 /*break*/, 5];
+                            _e.sent();
+                            console.log("Navigating to shared comment with ID '" + id + "'...");
+                            _e.label = 4;
                         case 4:
-                            e_3 = _d.sent();
+                            _e.trys.push([4, 6, , 7]);
+                            return [4 /*yield*/, this.source.get(id)];
+                        case 5:
+                            message = _e.sent();
+                            return [3 /*break*/, 7];
+                        case 6:
+                            e_3 = _e.sent();
                             console.error("Failed to find comment from URL: " + e_3.message);
+                            alert("Could not load desired comment. It may have been removed.");
                             return [2 /*return*/];
-                        case 5:
+                        case 7:
                             (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
-                            if (!message.parentMessageId) return [3 /*break*/, 11];
+                            if (!message.parentMessageId) return [3 /*break*/, 14];
                             return [4 /*yield*/, this.source.get(message.parentMessageId)];
-                        case 6:
-                            parentMessage = _d.sent();
+                        case 8:
+                            parentMessage = _e.sent();
                             (_b = parentMessage.transientState) !== null && _b !== void 0 ? _b : (parentMessage.transientState = {});
+                            // Make sure that this message is loaded and visible to the user
+                            return [4 /*yield*/, this.commentView.loadMessageInContext(parentMessage)];
+                        case 9:
+                            // Make sure that this message is loaded and visible to the user
+                            _e.sent();
                             return [4 /*yield*/, this.selectMessage(parentMessage)];
-                        case 7:
-                            thread = _d.sent();
+                        case 10:
+                            thread = _e.sent();
                             // Need to re-retrieve the message within the new chat source to affect its
                             // transient state.
                             return [4 /*yield*/, thread.ready];
-                        case 8:
+                        case 11:
                             // Need to re-retrieve the message within the new chat source to affect its
                             // transient state.
-                            _d.sent();
+                            _e.sent();
                             return [4 /*yield*/, thread.get(message.id)];
-                        case 9:
-                            message = _d.sent();
+                        case 12:
+                            message = _e.sent();
                             (_c = message.transientState) !== null && _c !== void 0 ? _c : (message.transientState = {});
                             message.transientState.highlighted = true;
                             console.dir(message);
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 500); })];
-                        case 10:
-                            _d.sent();
-                            return [3 /*break*/, 12];
-                        case 11:
-                            this.selectMessage(message);
-                            _d.label = 12;
-                        case 12:
+                        case 13:
+                            _e.sent();
+                            return [3 /*break*/, 16];
+                        case 14: 
+                        // Make sure that this message is loaded and visible to the user
+                        return [4 /*yield*/, this.commentView.loadMessageInContext(message)];
+                        case 15:
+                            // Make sure that this message is loaded and visible to the user
+                            _e.sent();
+                            (_d = message.transientState) !== null && _d !== void 0 ? _d : (message.transientState = {});
+                            message.transientState.highlighted = true;
+                            _e.label = 16;
+                        case 16:
                             this.scrollToComment(id);
+                            this.loadingSharedComment = false;
                             return [2 /*return*/];
                     }
                 });
@@ -9573,31 +9661,31 @@
         BantaCommentsComponent.prototype.likeMessage = function (source, message) {
             return __awaiter(this, void 0, void 0, function () {
                 var e_4;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             if (!!this.user) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.showSignIn()];
                         case 1:
-                            _d.sent();
+                            _e.sent();
                             return [2 /*return*/];
                         case 2:
                             this._upvoted.next(message);
                             message.transientState.liking = true;
-                            _d.label = 3;
+                            _e.label = 3;
                         case 3:
-                            _d.trys.push([3, 5, 6, 8]);
+                            _e.trys.push([3, 5, 6, 8]);
                             return [4 /*yield*/, source.likeMessage(message.id)];
                         case 4:
-                            _d.sent();
+                            _e.sent();
                             return [3 /*break*/, 8];
                         case 5:
-                            e_4 = _d.sent();
+                            e_4 = _e.sent();
                             this.handleBackendExceptionAsAlert(e_4, 'Could not like this message: ');
                             return [3 /*break*/, 8];
                         case 6: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
                         case 7:
-                            _d.sent();
+                            _e.sent();
                             message.transientState.liking = false;
                             return [7 /*endfinally*/];
                         case 8: return [2 /*return*/];
@@ -9609,33 +9697,33 @@
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var e_5;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             if (!!this.user) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.showSignIn()];
                         case 1:
-                            _d.sent();
+                            _e.sent();
                             return [2 /*return*/];
                         case 2:
                             this._upvoted.next(message);
                             message.transientState.liking = true;
                             if ((_a = message.userState) === null || _a === void 0 ? void 0 : _a.liked)
                                 message.likes = (message.likes || 0) - 1;
-                            _d.label = 3;
+                            _e.label = 3;
                         case 3:
-                            _d.trys.push([3, 5, , 6]);
+                            _e.trys.push([3, 5, , 6]);
                             return [4 /*yield*/, source.unlikeMessage(message.id)];
                         case 4:
-                            _d.sent();
+                            _e.sent();
                             return [3 /*break*/, 6];
                         case 5:
-                            e_5 = _d.sent();
+                            e_5 = _e.sent();
                             this.handleBackendExceptionAsAlert(e_5, 'Failed to unlike this message: ');
                             return [3 /*break*/, 6];
                         case 6: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
                         case 7:
-                            _d.sent();
+                            _e.sent();
                             message.transientState.liking = false;
                             return [2 /*return*/];
                     }
@@ -9644,7 +9732,7 @@
         };
         BantaCommentsComponent.prototype.reportMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this._reported.next(message);
                     return [2 /*return*/];
                 });
@@ -9654,7 +9742,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var message;
                 var _this = this;
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     message = this.selectedMessage;
                     this._selected.next(null);
                     this.selectedMessage = null;
@@ -9673,8 +9761,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var selectedMessageThread;
                 var _this = this;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             if (this.selectedMessage === message) {
                                 this.unselectMessage();
@@ -9684,10 +9772,10 @@
                             this.selectedMessage = message;
                             return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
                         case 1:
-                            selectedMessageThread = _d.sent();
+                            selectedMessageThread = _e.sent();
                             setTimeout(function () { return _this.selectedMessageVisible = true; });
                             setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                                return __generator(this, function (_d) {
+                                return __generator(this, function (_e) {
                                     this.selectedMessageThread = selectedMessageThread;
                                     return [2 /*return*/];
                                 });
@@ -9699,7 +9787,7 @@
         };
         BantaCommentsComponent.prototype.showSignIn = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this._signInSelected.next();
                     return [2 /*return*/];
                 });
@@ -9707,7 +9795,7 @@
         };
         BantaCommentsComponent.prototype.showEditAvatar = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this._editAvatarSelected.next();
                     return [2 /*return*/];
                 });
@@ -9715,7 +9803,7 @@
         };
         BantaCommentsComponent.prototype.selectMessageUser = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this._userSelected.next(message);
                     return [2 /*return*/];
                 });
@@ -9723,7 +9811,7 @@
         };
         BantaCommentsComponent.prototype.selectUsername = function (user) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this._usernameSelected.next(user);
                     return [2 /*return*/];
                 });
@@ -9731,7 +9819,7 @@
         };
         BantaCommentsComponent.prototype.selectAvatar = function (user) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this._avatarSelected.next(user);
                     return [2 /*return*/];
                 });
@@ -9739,7 +9827,7 @@
         };
         BantaCommentsComponent.prototype.shareMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this._shared.next(message);
                     return [2 /*return*/];
                 });
@@ -9749,28 +9837,28 @@
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var e_6;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             if (!!this.user) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.showSignIn()];
                         case 1:
-                            _d.sent();
+                            _e.sent();
                             return [2 /*return*/];
                         case 2:
                             if (!confirm("Are you sure you want to delete this comment? You cannot undo this action."))
                                 return [2 /*return*/];
-                            _d.label = 3;
+                            _e.label = 3;
                         case 3:
-                            _d.trys.push([3, 5, , 6]);
+                            _e.trys.push([3, 5, , 6]);
                             return [4 /*yield*/, this.source.deleteMessage(message.id)];
                         case 4:
-                            _d.sent();
+                            _e.sent();
                             if (((_a = this.selectedMessage) === null || _a === void 0 ? void 0 : _a.id) === message.id)
                                 this.unselectMessage();
                             return [3 /*break*/, 6];
                         case 5:
-                            e_6 = _d.sent();
+                            e_6 = _e.sent();
                             this.handleBackendExceptionAsAlert(e_6, "Could not delete message: ");
                             return [3 /*break*/, 6];
                         case 6: return [2 /*return*/];
@@ -9781,22 +9869,22 @@
         BantaCommentsComponent.prototype.editMessage = function (source, message, newText) {
             return __awaiter(this, void 0, void 0, function () {
                 var e_7;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             if (!!this.user) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.showSignIn()];
                         case 1:
-                            _d.sent();
+                            _e.sent();
                             return [2 /*return*/];
                         case 2:
-                            _d.trys.push([2, 4, , 5]);
+                            _e.trys.push([2, 4, , 5]);
                             return [4 /*yield*/, source.editMessage(message.id, newText)];
                         case 3:
-                            _d.sent();
+                            _e.sent();
                             return [3 /*break*/, 5];
                         case 4:
-                            e_7 = _d.sent();
+                            e_7 = _e.sent();
                             this.handleBackendExceptionAsAlert(e_7, 'Could not edit this message: ');
                             return [2 /*return*/];
                         case 5:
@@ -9809,7 +9897,7 @@
         };
         BantaCommentsComponent.prototype.startEditing = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_d) {
+                return __generator(this, function (_e) {
                     this.selectedMessage.transientState.editing = false;
                     message.transientState.editing = true;
                     return [2 /*return*/];
@@ -9819,23 +9907,23 @@
         BantaCommentsComponent.prototype.saveEdit = function (message, text) {
             return __awaiter(this, void 0, void 0, function () {
                 var e_8;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             if (!!this.user) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.showSignIn()];
                         case 1:
-                            _d.sent();
+                            _e.sent();
                             return [2 /*return*/];
                         case 2:
-                            _d.trys.push([2, 4, , 5]);
+                            _e.trys.push([2, 4, , 5]);
                             return [4 /*yield*/, this.source.editMessage(message.id, text)];
                         case 3:
-                            _d.sent();
+                            _e.sent();
                             message.transientState.editing = false;
                             return [3 /*break*/, 5];
                         case 4:
-                            e_8 = _d.sent();
+                            e_8 = _e.sent();
                             this.handleBackendExceptionAsAlert(e_8, "Could not edit message: ");
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -9848,8 +9936,8 @@
     BantaCommentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comments',
-                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading...</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>            \r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n</ng-container>\r\n",
-                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width:500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}"]
+                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading...</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading desired comment...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>            \r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n</ng-container>\r\n",
+                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width:500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}"]
                 },] }
     ];
     BantaCommentsComponent.ctorParameters = function () { return [