@banta/sdk 3.0.0 → 3.0.1

package/banta-sdk.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"exports":[{"from":"./common"},{"from":"./emoji"},{"from":"./banta/banta.component"},{"from":"./banta-logo.component"},{"from":"./chat"},{"from":"./live-message.component"},{"from":"./comments"},{"from":"./chat-backend.service"},{"from":"./banta-sdk.module"}],"metadata":{},"origins":{},"importAs":"@banta/sdk"}
+{"__symbolic":"module","version":4,"exports":[{"from":"./common"},{"from":"./emoji"},{"from":"./banta/banta.component"},{"from":"./banta-logo.component"},{"from":"./chat"},{"from":"./live-message.component"},{"from":"./comments"},{"from":"./banta-sdk.module"}],"metadata":{},"origins":{},"importAs":"@banta/sdk"}

package/bundles/banta-sdk.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/icon'), require('@angular/material/button'), require('subsink'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/form-field'), require('@angular/material/input')) :
-    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/platform-browser', '@angular/material/icon', '@angular/material/button', 'subsink', '@angular/material/dialog', '@angular/forms', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/form-field', '@angular/material/input'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.platformBrowser, global.ng.material.icon, global.ng.material.button, global.subsink, global.ng.material.dialog, global.ng.forms, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.formField, global.ng.material.input));
-}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, subsink, dialog, forms, menu, tooltip, formField, input) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/platform-browser'), require('@angular/material/icon'), require('@angular/material/button'), require('subsink'), require('@angular/material/dialog'), require('@angular/forms'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/cdk/text-field'), require('@angular/material/tooltip')) :
+    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', '@angular/common', '@angular/platform-browser', '@angular/material/icon', '@angular/material/button', 'subsink', '@angular/material/dialog', '@angular/forms', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/form-field', '@angular/material/input', '@angular/cdk/text-field', '@angular/material/tooltip'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.ng.common, global.ng.platformBrowser, global.ng.material.icon, global.ng.material.button, global.subsink, global.ng.material.dialog, global.ng.forms, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.formField, global.ng.material.input, global.ng.cdk.textField, global.ng.material.tooltip));
+}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, subsink, dialog, forms, menu, progressSpinner, formField, input, textField, tooltip) { 'use strict';
 
     function lazyConnection(options) {
         var obs = new rxjs.Observable(function (observer) {
@@ -149,6 +149,15 @@
         value: [{ type: core.Input }]
     };
 
+    var ChatBackendService = /** @class */ (function () {
+        function ChatBackendService() {
+        }
+        return ChatBackendService;
+    }());
+    ChatBackendService.decorators = [
+        { type: core.Injectable }
+    ];
+
     var COMPONENTS = [
         TimestampComponent
     ];
@@ -7138,15 +7147,6 @@
                 },] }
     ];
 
-    var ChatBackendService = /** @class */ (function () {
-        function ChatBackendService() {
-        }
-        return ChatBackendService;
-    }());
-    ChatBackendService.decorators = [
-        { type: core.Injectable }
-    ];
-
     /**
      * Unified chat and comments component
      */
@@ -7177,9 +7177,6 @@
                 _this.newNotifications = true;
             }));
         };
-        BantaComponent.prototype.newPointSubMessageKeyDown = function (event) {
-            // TODO
-        };
         BantaComponent.prototype.sendPointSubMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var text, message, e_1;
@@ -8120,17 +8117,25 @@
     };
 
     var CommentViewComponent = /** @class */ (function () {
-        function CommentViewComponent() {
+        function CommentViewComponent(backend) {
+            this.backend = backend;
             this._sourceSubs = new subsink.SubSink();
             this._selected = new rxjs.Subject();
             this._upvoted = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
+            this.showEmptyState = true;
             this.allowReplies = true;
             this.menuMessage = null;
             this.messages = [];
-            this.maxMessages = 200;
+            this.maxMessages = 2000;
+            this.maxVisibleMessages = 200;
             this.newestLast = false;
+            this.isViewingMore = false;
+            this.isLoadingMore = false;
+            this.hasMore = false;
+            this.newMessages = [];
+            this.olderMessages = [];
         }
         Object.defineProperty(CommentViewComponent.prototype, "selected", {
             get: function () {
@@ -8172,9 +8177,11 @@
                 }
                 this._source = value;
                 if (value) {
-                    var messages = value.messages || [];
+                    var messages = (value.messages || []).slice();
+                    this.messages = messages;
+                    this.olderMessages = messages.splice(this.maxVisibleMessages, messages.length);
+                    this.hasMore = this.olderMessages.length > 0;
                     this._sourceSubs = new subsink.SubSink();
-                    this.messages = messages.slice();
                     this._sourceSubs.add(this._source.messageReceived
                         .subscribe(function (msg) { return _this.messageReceived(msg); }), this._source.messageSent
                         .subscribe(function (msg) { return _this.messageSent(msg); }));
@@ -8193,22 +8200,82 @@
             this._reported.next(message);
         };
         CommentViewComponent.prototype.selectMessage = function (message) {
-            this._selected.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    this._selected.next(message);
+                    return [2 /*return*/];
+                });
+            });
         };
         CommentViewComponent.prototype.selectMessageUser = function (message) {
             this._userSelected.next(message);
         };
+        CommentViewComponent.prototype.messageIdentity = function (chatMessage) {
+            return chatMessage.id;
+        };
+        CommentViewComponent.prototype.showNew = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var overflow;
+                return __generator(this, function (_a) {
+                    this.isViewingMore = false;
+                    this.messages = this.newMessages.splice(0, this.newMessages.length).concat(this.messages);
+                    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);
+                    return [2 /*return*/];
+                });
+            });
+        };
+        CommentViewComponent.prototype.showMore = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var lastMessage, messages;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.isViewingMore = true;
+                            if (!(this.olderMessages.length > 0)) return [3 /*break*/, 1];
+                            this.isLoadingMore = false;
+                            this.messages = this.messages.concat(this.olderMessages.splice(0, 50));
+                            return [3 /*break*/, 4];
+                        case 1:
+                            if (!this.source.loadAfter) return [3 /*break*/, 3];
+                            this.isLoadingMore = true;
+                            lastMessage = this.messages[this.messages.length - 1];
+                            return [4 /*yield*/, this.source.loadAfter(lastMessage, 100)];
+                        case 2:
+                            messages = _a.sent();
+                            this.messages = this.messages.concat(messages);
+                            this.isLoadingMore = false;
+                            if (messages.length === 0)
+                                this.hasMore = false;
+                            return [3 /*break*/, 4];
+                        case 3:
+                            this.hasMore = false;
+                            _a.label = 4;
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         CommentViewComponent.prototype.addMessage = function (message) {
+            var destination = this.messages;
+            var bucket = this.olderMessages;
+            if (this.isViewingMore) {
+                destination = this.newMessages;
+                bucket = null;
+            }
             if (this.newestLast) {
-                while (this.messages.length + 1 > this.maxMessages)
-                    this.messages.shift();
-                this.messages.push(message);
+                destination.push(message);
+                var overflow = destination.splice(this.maxVisibleMessages, destination.length);
+                bucket === null || bucket === void 0 ? void 0 : bucket.push.apply(bucket, __spread(overflow));
             }
             else {
-                while (this.messages.length + 1 > this.maxMessages)
-                    this.messages.pop();
-                this.messages.unshift(message);
+                destination.unshift(message);
+                var overflow = destination.splice(this.maxVisibleMessages, destination.length);
+                bucket === null || bucket === void 0 ? void 0 : bucket.unshift.apply(bucket, __spread(overflow));
             }
+            if ((bucket === null || bucket === void 0 ? void 0 : bucket.length) > 0)
+                this.hasMore = true;
         };
         CommentViewComponent.prototype.messageReceived = function (message) {
             var _this = this;
@@ -8254,13 +8321,17 @@
     CommentViewComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment-view',
-                    template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    <banta-comment \r\n        *ngFor=\"let message of messages\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        [showReplyAction]=\"allowReplies\"\r\n        (userSelected)=\"selectMessageUser(message)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        ></banta-comment>\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
-                    styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#000;flex-grow:1;height:10em;overflow-x:hidden;overflow-y:auto;padding:.5em 1em .5em .5em}.message-container.no-scroll{height:auto;overflow-y:visible}:host-context(.mat-dark-theme) .message-container{background:#000;color:#fff}"]
+                    template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    \r\n    <a mat-button class=\"nav\" *ngIf=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        Show \r\n        <ng-container *ngIf=\"newMessages.length === 1\">\r\n            {{newMessages.length}} new message\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length > 1\">\r\n            {{newMessages.length}} new messages\r\n        </ng-container>\r\n        <ng-container *ngIf=\"newMessages.length === 0\">\r\n            new messages\r\n        </ng-container>\r\n    </a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <banta-comment \r\n        *ngFor=\"let message of messages; trackBy: messageIdentity\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        [showReplyAction]=\"allowReplies\"\r\n        (userSelected)=\"selectMessageUser(message)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        ></banta-comment>\r\n\r\n    <a mat-button class=\"nav\" *ngIf=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
+                    styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#000;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em .5em .5em;position:relative;transition:opacity .5s ease-in-out}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{background:#000;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{text-transform:uppercase;width:100%}.loading-more,a.nav{padding:2em;text-align:center}.loading-more{margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}"]
                 },] }
     ];
-    CommentViewComponent.ctorParameters = function () { return []; };
+    CommentViewComponent.ctorParameters = function () { return [
+        { type: ChatBackendService }
+    ]; };
     CommentViewComponent.propDecorators = {
+        showEmptyState: [{ type: core.Input }],
         allowReplies: [{ type: core.Input }],
+        fixedHeight: [{ type: core.Input }, { type: core.HostBinding, args: ['class.fixed-height',] }],
         selected: [{ type: core.Output }],
         userSelected: [{ type: core.Output }],
         reported: [{ type: core.Output }],
@@ -8269,6 +8340,7 @@
         genericAvatarUrl: [{ type: core.Input }],
         messageContainer: [{ type: core.ViewChild, args: ['messageContainer',] }],
         maxMessages: [{ type: core.Input }],
+        maxVisibleMessages: [{ type: core.Input }],
         newestLast: [{ type: core.Input }]
     };
 
@@ -8398,6 +8470,11 @@
         BantaCommentsComponent.prototype.insertEmoji = function (text) {
             this.newMessageText += text;
         };
+        BantaCommentsComponent.prototype.onReplyKeyDown = function (event) {
+        };
+        BantaCommentsComponent.prototype.insertReplyEmoji = function (text) {
+            this.replyMessage += text;
+        };
         BantaCommentsComponent.prototype.sendMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var text, message, e_1;
@@ -8439,19 +8516,69 @@
         BantaCommentsComponent.prototype.reportMessage = function (message) {
             this._reported.next(message);
         };
+        BantaCommentsComponent.prototype.unselectMessage = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    this._selected.next(null);
+                    this.selectedMessage = null;
+                    if (this.selectedMessageThread) {
+                        if (this.selectedMessageThread.close)
+                            this.selectedMessageThread.close();
+                        this.selectedMessageThread = null;
+                    }
+                    return [2 /*return*/];
+                });
+            });
+        };
         BantaCommentsComponent.prototype.selectMessage = function (message) {
-            this._selected.next(message);
+            return __awaiter(this, void 0, void 0, function () {
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            this._selected.next(message);
+                            this.selectedMessage = message;
+                            _b = this;
+                            return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
+                        case 1:
+                            _b.selectedMessageThread = _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         BantaCommentsComponent.prototype.selectMessageUser = function (message) {
             this._userSelected.next(message);
         };
+        BantaCommentsComponent.prototype.sendReply = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, this.selectedMessageThread.send({
+                                message: this.replyMessage,
+                                parentMessageId: this.selectedMessage.id,
+                                upvotes: 0,
+                                user: this.user,
+                                submessages: [],
+                                topicId: this.topicID,
+                                sentAt: Date.now(),
+                                updatedAt: Date.now()
+                            })];
+                        case 1:
+                            _b.sent();
+                            this.replyMessage = '';
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return BantaCommentsComponent;
     }());
     BantaCommentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comments',
-                    template: "\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"text-container\">\r\n        <textarea \r\n            name=\"message\" \r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessageText\"></textarea>\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\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                color=\"primary\"\r\n                [disabled]=\"!newMessageText\" \r\n                >{{sendLabel}}</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\r\n<banta-comment-view \r\n    [source]=\"source\"\r\n    (userSelected)=\"selectMessageUser($event)\"\r\n    (selected)=\"selectMessage($event)\"\r\n    (upvoted)=\"upvoteMessage($event)\"\r\n    (reported)=\"reportMessage($event)\"\r\n    ></banta-comment-view>",
-                    styles: [":host{flex-direction:column}:host,form{display:flex}form{align-items:center;padding:.5em 0}form .text-container{display:flex;flex-grow:1;position:relative}form .text-container textarea{background-color:#fff;border:1px solid #ccc;color:#333;font-size:14pt;min-height:6em;width:100%}form .text-container emoji-selector-button{bottom:0;position:absolute;right:0}form input[type=text]{background:#000;border:1px solid #333;color:#fff;height:1em;width:100%}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form .text-container textarea{background:#000;border-color:#333;color:#fff}"]
+                    template: "\r\n<div class=\"focused\" *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        ></banta-comment>\r\n\r\n    <div class=\"replies\">\r\n        Reply\r\n        <form class=\"new-message\" (submit)=\"sendReply()\">\r\n            <div class=\"text-container\">\r\n                <textarea \r\n                    name=\"message\" \r\n                    (keydown)=\"onReplyKeyDown($event)\"\r\n                    [(ngModel)]=\"replyMessage\"></textarea>\r\n                <emoji-selector-button \r\n                    class=\"top-right\"\r\n                    (selected)=\"insertReplyEmoji($event)\"\r\n                    ></emoji-selector-button>\r\n            </div>\r\n            <button [disabled]=\"!replyMessage\" \r\n                mat-raised-button color=\"primary\">Send</button>\r\n        </form>\r\n        <banta-comment-view \r\n            [source]=\"selectedMessageThread\"\r\n            [allowReplies]=\"false\"\r\n            [fixedHeight]=\"false\"\r\n            [showEmptyState]=\"false\"\r\n            ></banta-comment-view>\r\n    </div>\r\n</div>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\" *ngIf=\"!selectedMessage\">\r\n    <div class=\"text-container\">\r\n        <textarea \r\n            name=\"message\" \r\n            placeholder=\"Type your comment\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessageText\"></textarea>\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                color=\"primary\"\r\n                [disabled]=\"!newMessageText\" \r\n                >{{sendLabel}}</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\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    (selected)=\"selectMessage($event)\"\r\n    (upvoted)=\"upvoteMessage($event)\"\r\n    (reported)=\"reportMessage($event)\"\r\n    ></banta-comment-view>",
+                    styles: [":host{flex-direction:column}:host,form{display:flex}form{align-items:center;padding:.5em 0}form .text-container{display:flex;flex-grow:1;position:relative}form .text-container textarea{background-color:#fff;border:1px solid #ccc;color:#333;font-size:14pt;min-height:6em;width:100%}form .text-container emoji-selector-button{bottom:0;position:absolute;right:0}form input[type=text]{background:#000;border:1px solid #333;color:#fff;height:1em;width:100%}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form .text-container textarea{background:#000;border-color:#333;color:#fff}.focused .replies{margin-left:4em;margin-top:1em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}form.new-message{align-items:flex-start;display:flex}form.new-message mat-form-field{flex-grow:1}form.new-message button{margin-left:1em;margin-top:.5em}"]
                 },] }
     ];
     BantaCommentsComponent.ctorParameters = function () { return [
@@ -8460,6 +8587,10 @@
     ]; };
     BantaCommentsComponent.propDecorators = {
         source: [{ type: core.Input }],
+        fixedHeight: [{ type: core.Input }],
+        maxMessages: [{ type: core.Input }],
+        maxVisibleMessages: [{ type: core.Input }],
+        genericAvatarUrl: [{ type: core.Input }],
         topicID: [{ type: core.Input }],
         signInLabel: [{ type: core.Input }],
         sendLabel: [{ type: core.Input }],
@@ -8566,10 +8697,14 @@
                     declarations: COMPONENTS$3,
                     imports: [
                         common.CommonModule,
+                        textField.TextFieldModule,
                         forms.FormsModule,
                         icon.MatIconModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
                         button.MatButtonModule,
                         menu.MatMenuModule,
+                        progressSpinner.MatProgressSpinnerModule,
                         BantaCommonModule,
                         EmojiModule
                     ],
@@ -8605,7 +8740,8 @@
                         menu.MatMenuModule,
                         dialog.MatDialogModule,
                         formField.MatFormFieldModule,
-                        input.MatInputModule
+                        input.MatInputModule,
+                        progressSpinner.MatProgressSpinnerModule
                     ],
                     declarations: [
                         BantaComponent,