@banta/sdk 4.0.1 → 4.0.2

package/bundles/banta-sdk.umd.js

@@ -7863,8 +7863,8 @@
         BantaChatComponent.prototype.showSignIn = function () {
             this._signInSelected.next();
         };
-        BantaChatComponent.prototype.sendPermissionError = function () {
-            this._permissionDeniedError.next();
+        BantaChatComponent.prototype.sendPermissionError = function (message) {
+            this._permissionDeniedError.next(message);
         };
         BantaChatComponent.prototype.insertEmoji = function (emoji) {
             var message = this.newMessage.message || '';
@@ -8684,9 +8684,8 @@
                             return [2 /*return*/, true];
                         case 4:
                             e_1 = _d.sent();
-                            console.error("Failed to send message: ", message);
-                            console.error(e_1);
-                            throw new Error("Could not send: " + e_1.message);
+                            this.handleBackendException(e_1, 'Could not send: ');
+                            return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
                     }
                 });
@@ -8708,20 +8707,41 @@
                         case 3: return [2 /*return*/, true];
                         case 4:
                             e_2 = _d.sent();
-                            console.error("Failed to send message: ", message);
-                            console.error(e_2);
-                            throw new Error("Could not send reply: " + e_2.message);
+                            this.handleBackendException(e_2, 'Could not send reply: ');
+                            return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
                     }
                 });
             }); };
         }
+        BantaCommentsComponent.prototype.handleBackendExceptionAsAlert = function (e, prefix) {
+            if (prefix === void 0) { prefix = ''; }
+            try {
+                this.handleBackendException(e, prefix);
+            }
+            catch (e) {
+                alert(e.message);
+            }
+        };
+        BantaCommentsComponent.prototype.handleBackendException = function (e, prefix) {
+            if (prefix === void 0) { prefix = ''; }
+            var errorMessage = e.message;
+            if (errorMessage.startsWith('permission-denied|')) {
+                errorMessage = errorMessage.replace(/^permission-denied\|/, '');
+                if (errorMessage.startsWith("app-handle|")) {
+                    // If this is an error during authorizeAction on the backend, pass control to the user-provided 
+                    // permission-denied handler.
+                    this.sendPermissionDenied(errorMessage.replace(/^app-handle\|/, ''));
+                    return;
+                }
+            }
+            throw new Error("" + prefix + errorMessage);
+        };
         // Lifecycle Events / Initialization
         BantaCommentsComponent.prototype.ngOnInit = function () {
             var _this = this;
             this._subs.add(this.backend.userChanged.subscribe(function (user) { return _this.user = user; }));
             this.startLoading();
-            console.log("Checking...");
             if (typeof window !== 'undefined') {
                 var queryString = window.location.search.substring(1);
                 var query = queryString.split('&')
@@ -8730,8 +8750,6 @@
                     var _e = __read(_d, 2), k = _e[0], v = _e[1];
                     return (o[k] = v, o);
                 }, {});
-                console.log('here:');
-                console.dir(query);
                 var commentID = query['comment'];
                 if (commentID) {
                     this.sharedCommentID = commentID;
@@ -8828,7 +8846,7 @@
         };
         BantaCommentsComponent.prototype.updateLoading = function () {
             var _this = this;
-            var _a, _b, _c;
+            var _a, _b;
             if (((_a = this.source) === null || _a === void 0 ? void 0 : _a.state) && ((_b = this.source) === null || _b === void 0 ? void 0 : _b.state) !== 'connecting') {
                 clearInterval(this._loadingTimer);
                 this.loadingMessage = "Here we go!";
@@ -8837,7 +8855,6 @@
                 }, 750);
                 return true;
             }
-            console.log("[Banta] Status check: " + (((_c = this.source) === null || _c === void 0 ? void 0 : _c.state) || 'connecting'));
             var messageSwitchTime = 5 * 1000;
             if (this.messageChangedAt + messageSwitchTime < Date.now()) {
                 if (this.loadingMessages[this._loadingMessageIndex]) {
@@ -8940,7 +8957,6 @@
         BantaCommentsComponent.prototype.scrollToComment = function (commentId) {
             setTimeout(function () {
                 var comment = document.querySelectorAll("[data-comment-id=\"" + commentId + "\"]");
-                console.dir(comment);
                 if (comment.length > 0) {
                     // comment.item(0).scroll({behavior: 'smooth'});
                     comment.item(0).scrollIntoView();
@@ -9007,8 +9023,8 @@
                 });
             });
         };
-        BantaCommentsComponent.prototype.showPermissionDenied = function () {
-            this._permissionDeniedError.next();
+        BantaCommentsComponent.prototype.sendPermissionDenied = function (message) {
+            this._permissionDeniedError.next(message);
         };
         BantaCommentsComponent.prototype.scrollToMessage = function (message) {
             var el = this.elementRef.nativeElement.querySelector("[data-comment-id=\"" + message.id + "\"]");
@@ -9045,8 +9061,8 @@
                             return [3 /*break*/, 4];
                         case 3:
                             e_4 = _d.sent();
-                            alert("Could not like this message: " + e_4.message);
-                            return [2 /*return*/];
+                            this.handleBackendExceptionAsAlert(e_4, 'Could not like this message: ');
+                            return [3 /*break*/, 4];
                         case 4: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
                         case 5:
                             _d.sent();
@@ -9076,7 +9092,7 @@
                             return [3 /*break*/, 4];
                         case 3:
                             e_5 = _d.sent();
-                            alert("Failed to unlike message: " + e_5.message);
+                            this.handleBackendExceptionAsAlert(e_5, 'Failed to unlike this message: ');
                             return [3 /*break*/, 4];
                         case 4: return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 250); })];
                         case 5:
@@ -9188,17 +9204,31 @@
         };
         BantaCommentsComponent.prototype.deleteMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
+                var e_6;
                 return __generator(this, function (_d) {
-                    if (!confirm("Are you sure you want to delete this comment? You cannot undo this action."))
-                        return [2 /*return*/];
-                    this.source.deleteMessage(message.id);
-                    return [2 /*return*/];
+                    switch (_d.label) {
+                        case 0:
+                            if (!confirm("Are you sure you want to delete this comment? You cannot undo this action."))
+                                return [2 /*return*/];
+                            _d.label = 1;
+                        case 1:
+                            _d.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.source.deleteMessage(message.id)];
+                        case 2:
+                            _d.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_6 = _d.sent();
+                            this.handleBackendExceptionAsAlert(e_6, "Could not delete message: ");
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
                 });
             });
         };
         BantaCommentsComponent.prototype.editMessage = function (source, message, newText) {
             return __awaiter(this, void 0, void 0, function () {
-                var e_6;
+                var e_7;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
@@ -9208,8 +9238,8 @@
                             _d.sent();
                             return [3 /*break*/, 3];
                         case 2:
-                            e_6 = _d.sent();
-                            alert(e_6.message);
+                            e_7 = _d.sent();
+                            this.handleBackendExceptionAsAlert(e_7, 'Could not edit this message: ');
                             return [2 /*return*/];
                         case 3:
                             message.message = newText;
@@ -9230,7 +9260,7 @@
         };
         BantaCommentsComponent.prototype.saveEdit = function (message, text) {
             return __awaiter(this, void 0, void 0, function () {
-                var e_7;
+                var e_8;
                 return __generator(this, function (_d) {
                     switch (_d.label) {
                         case 0:
@@ -9241,8 +9271,8 @@
                             message.transientState.editing = false;
                             return [3 /*break*/, 3];
                         case 2:
-                            e_7 = _d.sent();
-                            alert("Could not edit message: " + e_7.message);
+                            e_8 = _d.sent();
+                            this.handleBackendExceptionAsAlert(e_8, "Could not edit message: ");
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
                     }
@@ -9254,7 +9284,7 @@
     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 Comments</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\">\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            (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                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\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                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"showPermissionDenied()\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    >\r\n                    <ng-content select=\".reply-send-options\"></ng-content>\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\">\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            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"showPermissionDenied()\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\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            [class.faded]=\"selectedMessage\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\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            (deleted)=\"deleteMessage($event)\"\r\n            ></banta-comment-view>\r\n    </div>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading Comments</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\">\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            (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                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\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                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"sendPermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    >\r\n                    <ng-content select=\".reply-send-options\"></ng-content>\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\">\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            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"sendPermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\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            [class.faded]=\"selectedMessage\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\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            (deleted)=\"deleteMessage($event)\"\r\n            ></banta-comment-view>\r\n    </div>\r\n</ng-container>",
                     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:4em}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}@media (max-width:500px){.focused .replies{margin-left:0}}.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}"]
                 },] }
     ];
@@ -9403,8 +9433,8 @@
             var root = document.body.querySelector('[ng-version]') || document.body;
             root.appendChild(this.autocompleteEl.nativeElement);
         };
-        CommentFieldComponent.prototype.showPermissionDenied = function () {
-            this._permissionDeniedError.next();
+        CommentFieldComponent.prototype.sendPermissionDenied = function (message) {
+            this._permissionDeniedError.next(message);
         };
         CommentFieldComponent.prototype.showAutoComplete = function (options) {
             this.autoCompleteSelected = 0;
@@ -9630,7 +9660,7 @@
     CommentFieldComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment-field',
-                    template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + user?.avatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                <mat-label>{{label}}</mat-label>\r\n                <textarea\r\n                    #textarea\r\n                    name=\"message\"\r\n                    [placeholder]=\"placeholder\"\r\n                    matInput\r\n                    cdkTextareaAutosize\r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    (blur)=\"onBlur()\"\r\n                    [disabled]=\"sending\"\r\n                    [(ngModel)]=\"text\"></textarea>\r\n            </mat-form-field>\r\n            <ng-content></ng-content>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n        <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\">\r\n            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n            {{sendError.message}}\r\n        </div>\r\n        <emoji-selector-button\r\n            class=\"top-right\"\r\n            (selected)=\"insertEmoji($event)\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                *ngIf=\"canComment\"\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!text || sending\"\r\n                >\r\n                <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!sending\">\r\n                        {{sendLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"sending\">\r\n                        {{sendingLabel}}\r\n                    </ng-container>\r\n                </span>\r\n\r\n                </button>\r\n            <button\r\n                *ngIf=\"!canComment\"\r\n                type=\"button\"\r\n                (click)=\"showPermissionDenied()\"\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                >{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>\r\n",
+                    template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + user?.avatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                <mat-label>{{label}}</mat-label>\r\n                <textarea\r\n                    #textarea\r\n                    name=\"message\"\r\n                    [placeholder]=\"placeholder\"\r\n                    matInput\r\n                    cdkTextareaAutosize\r\n                    (keydown)=\"onKeyDown($event)\"\r\n                    (blur)=\"onBlur()\"\r\n                    [disabled]=\"sending\"\r\n                    [(ngModel)]=\"text\"></textarea>\r\n            </mat-form-field>\r\n            <ng-content></ng-content>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n        <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\">\r\n            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n            {{sendError.message}}\r\n        </div>\r\n        <emoji-selector-button\r\n            class=\"top-right\"\r\n            (selected)=\"insertEmoji($event)\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                *ngIf=\"canComment\"\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!text || sending\"\r\n                >\r\n                <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!sending\">\r\n                        {{sendLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"sending\">\r\n                        {{sendingLabel}}\r\n                    </ng-container>\r\n                </span>\r\n\r\n                </button>\r\n            <button\r\n                *ngIf=\"!canComment\"\r\n                type=\"button\"\r\n                (click)=\"sendPermissionDenied('')\"\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                >{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>\r\n",
                     styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end}.avatar-container .avatar{width:48px;height:48px;background:pink;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-form-field{margin-bottom:1em}form .text-container emoji-selector-button{bottom:0;right:0;position:absolute}form .text-container .error-message,form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .error-message{color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out}form .text-container .error-message.expanded,form .text-container .error-message:hover{max-width:100%}form .text-container .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column}form.new-message mat-form-field{width:100%}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}"]
                 },] }
     ];