@banta/sdk 3.2.2 → 3.3.0

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('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('subsink'), require('@angular/material/dialog'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), 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', '@angular/material/form-field', '@angular/material/input', '@angular/forms', 'subsink', '@angular/material/dialog', '@angular/material/menu', '@angular/material/progress-spinner', '@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.ng.material.formField, global.ng.material.input, global.ng.forms, global.subsink, global.ng.material.dialog, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip));
-}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, formField, input, forms, subsink, dialog, menu, progressSpinner, textField, tooltip) { '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('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/cdk/text-field'), require('@angular/material/tooltip'), require('@banta/common'), require('@angular/material/select')) :
+    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', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/material/dialog', '@angular/router', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/cdk/text-field', '@angular/material/tooltip', '@banta/common', '@angular/material/select'], 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.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.material.dialog, global.ng.router, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip, global.common$1, global.ng.material.select));
+}(this, (function (exports, rxjs, operators, core, common, platformBrowser, icon, button, formField, input, forms, dialog, router, menu, progressSpinner, textField, tooltip, common$1, select) { 'use strict';
 
     function lazyConnection(options) {
         var obs = new rxjs.Observable(function (observer) {
@@ -7219,7 +7219,7 @@
             this.banta = banta;
             this.backend = backend;
             this.matDialog = matDialog;
-            this._subs = new subsink.SubSink();
+            this._subs = new rxjs.Subscription();
             this.auxOpen = false;
             this.auxTitle = 'Notifications';
             this.auxMode = 'notifications';
@@ -7235,7 +7235,9 @@
         }
         BantaComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.currentUser = user; }), this.backend.notificationsChanged.subscribe(function (notifs) { return _this.notifications = notifs; }), this.backend.newNotification.subscribe(function (notif) {
+            this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.currentUser = user; }));
+            this._subs.add(this.backend.notificationsChanged.subscribe(function (notifs) { return _this.notifications = notifs; }));
+            this._subs.add(this.backend.newNotification.subscribe(function (notif) {
                 _this.newNotifications = true;
             }));
         };
@@ -7632,7 +7634,7 @@
     var ChatViewComponent = /** @class */ (function () {
         function ChatViewComponent(elementRef) {
             this.elementRef = elementRef;
-            this._sourceSubs = new subsink.SubSink();
+            this._sourceSubs = new rxjs.Subscription();
             this._selected = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._upvoted = new rxjs.Subject();
@@ -7653,15 +7655,14 @@
                 this._source = value;
                 this.messages = [];
                 if (value) {
-                    this._sourceSubs = new subsink.SubSink();
+                    this._sourceSubs = new rxjs.Subscription();
                     this.messages = value.messages.slice();
                     console.log("Source set:");
                     console.dir(value);
                     console.log("Messages loaded:");
                     console.dir(this.messages);
-                    this._sourceSubs.add(this._source.messageReceived
-                        .subscribe(function (msg) { return _this.messageReceived(msg); }), this._source.messageSent
-                        .subscribe(function (msg) { return _this.messageSent(msg); }));
+                    this._sourceSubs.add(this._source.messageReceived.subscribe(function (msg) { return _this.messageReceived(msg); }));
+                    this._sourceSubs.add(this._source.messageSent.subscribe(function (msg) { return _this.messageSent(msg); }));
                     if (this._source.currentUserChanged) {
                         this._sourceSubs.add(this._source.currentUserChanged
                             .subscribe(function (user) { return _this.currentUser = user; }));
@@ -7805,7 +7806,7 @@
             this.banta = banta;
             this.backend = backend;
             this.elementRef = elementRef;
-            this._subs = new subsink.SubSink();
+            this._subs = new rxjs.Subscription();
             this.user = null;
             this.signInLabel = 'Sign In';
             this.sendLabel = 'Send';
@@ -8115,7 +8116,10 @@
             this._reported = new rxjs.Subject();
             this._selected = new rxjs.Subject();
             this._upvoted = new rxjs.Subject();
+            this._shared = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
+            this._avatarSelected = new rxjs.Subject();
+            this._usernameSelected = new rxjs.Subject();
             this.isNew = false;
             this.visible = false;
             this.showReplyAction = true;
@@ -8133,28 +8137,42 @@
         };
         Object.defineProperty(CommentComponent.prototype, "userSelected", {
             get: function () {
-                return this._userSelected;
+                return this._userSelected.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentComponent.prototype, "usernameSelected", {
+            get: function () {
+                return this._usernameSelected.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentComponent.prototype, "avatarSelected", {
+            get: function () {
+                return this._avatarSelected.asObservable();
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentComponent.prototype, "reported", {
             get: function () {
-                return this._reported;
+                return this._reported.asObservable();
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentComponent.prototype, "upvoted", {
             get: function () {
-                return this._upvoted;
+                return this._upvoted.asObservable();
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(CommentComponent.prototype, "selected", {
             get: function () {
-                return this._selected;
+                return this._selected.asObservable();
             },
             enumerable: false,
             configurable: true
@@ -8167,17 +8185,35 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(CommentComponent.prototype, "shared", {
+            get: function () {
+                return this._shared.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
         CommentComponent.prototype.report = function () {
             this._reported.next();
         };
         CommentComponent.prototype.upvote = function () {
             this._upvoted.next();
         };
+        CommentComponent.prototype.share = function () {
+            this._shared.next(this.message);
+        };
         CommentComponent.prototype.select = function () {
             this._selected.next();
         };
         CommentComponent.prototype.selectUser = function () {
-            return this._userSelected.next();
+            this._userSelected.next();
+        };
+        CommentComponent.prototype.selectUsername = function (user) {
+            this._usernameSelected.next(user);
+            this.selectUser();
+        };
+        CommentComponent.prototype.selectAvatar = function (user) {
+            this._avatarSelected.next(user);
+            this.selectUser();
         };
         CommentComponent.prototype.avatarForUser = function (user) {
             if (user && user.avatarUrl) {
@@ -8191,7 +8227,7 @@
     CommentComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment',
-                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"report()\">Report</button>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a \r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectUser()\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUser()\">@{{message.user.username}}</a>\r\n    </div>\r\n    <div class=\"content\">\r\n        {{message.message}}\r\n    </div>\r\n    \r\n    <div class=\"actions\">\r\n        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\">\r\n            <div class=\"count-indicator\">  \r\n                {{message.upvotes}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n            </button>\r\n        </div>\r\n        \r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
+                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"report()\">Report</button>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a\r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectAvatar(message.user)\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n    </div>\r\n    <div class=\"content\">\r\n        {{message.message}}\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\">\r\n            <div class=\"count-indicator\">\r\n                {{message.upvotes}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"counted-action\">\r\n            <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n                <mat-icon [inline]=\"true\" >share</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
                     styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;padding:.5em;position:relative;visibility:hidden}:host.new{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-appear;animation-duration:.4s;animation-fill-mode:both;animation-name:comment-appear}:host.new,:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host.abbreviated .message-content .content{max-height:8.5em;overflow-y:hidden;text-overflow:ellipsis}:host .actions{align-items:center;display:flex;margin-left:60px;padding-right:10px}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{align-items:center;display:flex;margin:1em 0 0;position:relative}.user .display-name,.user .username{color:#000;display:block;flex-grow:0;flex-shrink:1;font-size:10pt;margin:0 auto 0 0;max-width:100%;overflow:hidden;padding:0 0 0 1em;position:relative;text-overflow:ellipsis;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.user .display-name.username,.user .username.username{color:#666;flex-grow:1;flex-shrink:0}.avatar{background-color:#333;background-position:50%;background-size:cover;border-radius:100%;flex-grow:0;flex-shrink:0;height:48px;width:48px}.counted-action{align-items:center;display:flex}.count-indicator{color:#666;font-size:9pt;padding:0 0 0 3px}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:44px}:host .message-content .content{margin-left:44px;margin-right:.5em}}"]
                 },] }
     ];
@@ -8201,20 +8237,26 @@
         message: [{ type: core.Input }],
         showReplyAction: [{ type: core.Input }],
         userSelected: [{ type: core.Output }],
+        usernameSelected: [{ type: core.Output }],
+        avatarSelected: [{ type: core.Output }],
         reported: [{ type: core.Output }],
         upvoted: [{ type: core.Output }],
         selected: [{ type: core.Output }],
-        commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }]
+        commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }],
+        shared: [{ type: core.Output }]
     };
 
     var CommentViewComponent = /** @class */ (function () {
         function CommentViewComponent(backend) {
             this.backend = backend;
-            this._sourceSubs = new subsink.SubSink();
+            this._sourceSubs = new rxjs.Subscription();
             this._selected = new rxjs.Subject();
             this._upvoted = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
+            this._usernameSelected = new rxjs.Subject();
+            this._avatarSelected = new rxjs.Subject();
+            this._shared = new rxjs.Subject();
             this.showEmptyState = true;
             this.allowReplies = true;
             this.menuMessage = null;
@@ -8256,6 +8298,27 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(CommentViewComponent.prototype, "usernameSelected", {
+            get: function () {
+                return this._usernameSelected;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentViewComponent.prototype, "avatarSelected", {
+            get: function () {
+                return this._avatarSelected;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentViewComponent.prototype, "shared", {
+            get: function () {
+                return this._shared;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CommentViewComponent.prototype, "source", {
             get: function () {
                 return this._source;
@@ -8268,14 +8331,14 @@
                 }
                 this._source = value;
                 if (value) {
+                    console.log("[banta-comment-view] Subscribing to source...");
                     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._sourceSubs.add(this._source.messageReceived
-                        .subscribe(function (msg) { return _this.messageReceived(msg); }), this._source.messageSent
-                        .subscribe(function (msg) { return _this.messageSent(msg); }));
+                    this._sourceSubs = new rxjs.Subscription();
+                    this._sourceSubs.add(this._source.messageReceived.subscribe(function (msg) { return _this.messageReceived(msg); }));
+                    this._sourceSubs.add(this._source.messageSent.subscribe(function (msg) { return _this.messageSent(msg); }));
                     if (this._source.currentUserChanged) {
                         this._sourceSubs.add(this._source.currentUserChanged.subscribe(function (user) { return _this.currentUser = user; }));
                     }
@@ -8291,16 +8354,20 @@
             this._reported.next(message);
         };
         CommentViewComponent.prototype.selectMessage = function (message) {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this._selected.next(message);
-                    return [2 /*return*/];
-                });
-            });
+            this._selected.next(message);
         };
         CommentViewComponent.prototype.selectMessageUser = function (message) {
             this._userSelected.next(message);
         };
+        CommentViewComponent.prototype.selectUsername = function (user) {
+            this._usernameSelected.next(user);
+        };
+        CommentViewComponent.prototype.selectAvatar = function (user) {
+            this._avatarSelected.next(user);
+        };
+        CommentViewComponent.prototype.sharedMessage = function (message) {
+            this._shared.next(message);
+        };
         CommentViewComponent.prototype.messageIdentity = function (index, chatMessage) {
             return chatMessage.id;
         };
@@ -8412,7 +8479,7 @@
     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    \r\n    <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\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        (click)=\"isViewingMore = true\"\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\" [class.visible]=\"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>",
+                    template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\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        (click)=\"isViewingMore = true\"\r\n        [showReplyAction]=\"allowReplies\"\r\n\t\t(userSelected)=\"selectMessageUser(message)\"\r\n        (avatarSelected)=\"selectAvatar($event)\"\r\n\t\t(usernameSelected)=\"selectUsername($event)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        (shared)=\"sharedMessage($event)\"\r\n        ></banta-comment>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"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>\r\n",
                     styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#111;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em 3em .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:#111;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{background:#222;border-radius:2em;opacity:0;pointer-events:none;position:absolute;right:.5em;text-align:center;transition:opacity .4s ease-in-out;z-index:10}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{margin:0 auto;padding:2em;text-align:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:400px){.message-container{padding:0 0 3em}}"]
                 },] }
     ];
@@ -8427,6 +8494,9 @@
         userSelected: [{ type: core.Output }],
         reported: [{ type: core.Output }],
         upvoted: [{ type: core.Output }],
+        usernameSelected: [{ type: core.Output }],
+        avatarSelected: [{ type: core.Output }],
+        shared: [{ type: core.Output }],
         source: [{ type: core.Input }],
         genericAvatarUrl: [{ type: core.Input }],
         messageContainer: [{ type: core.ViewChild, args: ['messageContainer',] }],
@@ -8439,15 +8509,19 @@
      * Comments component
      */
     var BantaCommentsComponent = /** @class */ (function () {
-        function BantaCommentsComponent(banta, backend, elementRef) {
+        function BantaCommentsComponent(banta, backend, elementRef, activatedRoute) {
             this.banta = banta;
             this.backend = backend;
             this.elementRef = elementRef;
+            this.activatedRoute = activatedRoute;
             this._upvoted = new rxjs.Subject();
             this._reported = new rxjs.Subject();
             this._selected = new rxjs.Subject();
             this._userSelected = new rxjs.Subject();
-            this._subs = new subsink.SubSink();
+            this._shared = new rxjs.Subject();
+            this._usernameSelected = new rxjs.Subject();
+            this._avatarSelected = new rxjs.Subject();
+            this._subs = new rxjs.Subscription();
             this.hashtags = [
                 { hashtag: 'error', description: 'Cause an error' },
                 { hashtag: 'timeout', description: 'Cause a slow timeout error' },
@@ -8468,10 +8542,45 @@
             this.expandError = false;
             this.selectedMessageVisible = false;
         }
+        Object.defineProperty(BantaCommentsComponent.prototype, "sortOrder", {
+            get: function () {
+                return this._sortOrder;
+            },
+            set: function (value) {
+                var _this = this;
+                if (this._sortOrder !== value) {
+                    this._sortOrder = value;
+                    setTimeout(function () {
+                        _this.setSourceFromTopicID(_this.topicID);
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         BantaCommentsComponent.prototype.ngOnInit = function () {
             var _this = this;
             this._subs.add(this.banta.userChanged.subscribe(function (user) { return _this.user = user; }));
         };
+        BantaCommentsComponent.prototype.ngAfterViewInit = function () {
+            if (typeof window !== 'undefined')
+                this.checkForSharedComment();
+        };
+        BantaCommentsComponent.prototype.scrollToComment = function (commentId) {
+            setTimeout(function () {
+                var comment = document.querySelectorAll("[data-comment-id=\"" + commentId + "\"]");
+                console.log(comment);
+                if (comment.length > 0) {
+                    // comment.item(0).scroll({behavior: 'smooth'});
+                    comment.item(0).scrollIntoView();
+                }
+            }, 1000);
+        };
+        BantaCommentsComponent.prototype.checkForSharedComment = function () {
+            var commentID = this.activatedRoute.snapshot.queryParamMap.get('comment');
+            if (commentID)
+                this.scrollToComment(commentID);
+        };
         BantaCommentsComponent.prototype.ngOnDestroy = function () {
             this._subs.unsubscribe();
         };
@@ -8487,33 +8596,44 @@
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "topicID", {
             get: function () {
-                return this._source.identifier;
+                return this._topicID;
             },
             set: function (value) {
-                this.setSourceFromTopicID(value);
+                var _this = this;
+                if (this._topicID !== value) {
+                    this._topicID = value;
+                    setTimeout(function () { return _this.setSourceFromTopicID(value); });
+                }
             },
             enumerable: false,
             configurable: true
         });
         BantaCommentsComponent.prototype.setSourceFromTopicID = function (topicID) {
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
-                var _b;
                 var _this = this;
                 return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0:
-                            if (this._source && this._source.close)
-                                this._source.close();
-                            this._source = null;
-                            _b = this;
-                            return [4 /*yield*/, this.backend.getSourceForTopic(topicID)];
-                        case 1:
-                            _b._source = _c.sent();
-                            this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); });
-                            this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); });
-                            this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
-                            return [2 /*return*/];
-                    }
+                    (_b = (_a = this._source) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    this._source = null;
+                    setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
+                        var _c;
+                        var _this = this;
+                        return __generator(this, function (_d) {
+                            switch (_d.label) {
+                                case 0:
+                                    _c = this;
+                                    return [4 /*yield*/, this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder })];
+                                case 1:
+                                    _c._source = _d.sent();
+                                    console.log("[banta-comments] Subscribing to source for topic '" + topicID + "'");
+                                    this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); });
+                                    this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); });
+                                    this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [2 /*return*/];
                 });
             });
         };
@@ -8584,28 +8704,49 @@
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "upvoted", {
             get: function () {
-                return this._upvoted;
+                return this._upvoted.asObservable();
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "reported", {
             get: function () {
-                return this._reported;
+                return this._reported.asObservable();
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "selected", {
             get: function () {
-                return this._selected;
+                return this._selected.asObservable();
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(BantaCommentsComponent.prototype, "userSelected", {
             get: function () {
-                return this._userSelected;
+                return this._userSelected.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaCommentsComponent.prototype, "usernameSelected", {
+            get: function () {
+                return this._usernameSelected.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaCommentsComponent.prototype, "avatarSelected", {
+            get: function () {
+                return this._avatarSelected.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaCommentsComponent.prototype, "shared", {
+            get: function () {
+                return this._shared.asObservable();
             },
             enumerable: false,
             configurable: true
@@ -8632,13 +8773,13 @@
         };
         BantaCommentsComponent.prototype.upvoteMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             this._upvoted.next(message);
                             return [4 /*yield*/, this.backend.upvoteMessage(message.topicId, message.parentMessageId ? message.parentMessageId : message.id, message.parentMessageId ? message.id : undefined)];
                         case 1:
-                            _b.sent();
+                            _c.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -8651,7 +8792,7 @@
             return __awaiter(this, void 0, void 0, function () {
                 var message;
                 var _this = this;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_c) {
                     message = this.selectedMessage;
                     this._selected.next(null);
                     this.selectedMessage = null;
@@ -8669,19 +8810,19 @@
         BantaCommentsComponent.prototype.selectMessage = function (message) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_b) {
+                return __generator(this, function (_c) {
                     this._selected.next(message);
                     this.selectedMessage = message;
                     setTimeout(function () { return _this.selectedMessageVisible = true; });
                     setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-                        var _b;
-                        return __generator(this, function (_c) {
-                            switch (_c.label) {
+                        var _c;
+                        return __generator(this, function (_d) {
+                            switch (_d.label) {
                                 case 0:
-                                    _b = this;
+                                    _c = this;
                                     return [4 /*yield*/, this.backend.getSourceForThread(this.topicID, message.id)];
                                 case 1:
-                                    _b.selectedMessageThread = _c.sent();
+                                    _c.selectedMessageThread = _d.sent();
                                     return [2 /*return*/];
                             }
                         });
@@ -8693,10 +8834,19 @@
         BantaCommentsComponent.prototype.selectMessageUser = function (message) {
             this._userSelected.next(message);
         };
+        BantaCommentsComponent.prototype.selectUsername = function (user) {
+            this._usernameSelected.next(user);
+        };
+        BantaCommentsComponent.prototype.selectAvatar = function (user) {
+            this._avatarSelected.next(user);
+        };
+        BantaCommentsComponent.prototype.shareMessage = function (message) {
+            this._shared.next(message);
+        };
         BantaCommentsComponent.prototype.sendReply = function () {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0: return [4 /*yield*/, this.selectedMessageThread.send({
                                 message: this.replyMessage,
                                 parentMessageId: this.selectedMessage.id,
@@ -8708,7 +8858,7 @@
                                 updatedAt: Date.now()
                             })];
                         case 1:
-                            _b.sent();
+                            _c.sent();
                             this.replyMessage = '';
                             return [2 /*return*/];
                     }
@@ -8726,14 +8876,15 @@
     BantaCommentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comments',
-                    template: "\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        ></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                ></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]=\"canComment\"\r\n                [signInLabel]=\"signInLabel\"\r\n                [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                (permissionDeniedError)=\"showPermissionDenied()\"\r\n                [user]=\"user\"\r\n                [label]=\"postReplyLabel\"\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]=\"canComment\"\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        ></banta-comment-field>\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>\r\n</div>",
+                    template: "\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        ></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                ></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]=\"canComment\"\r\n                [signInLabel]=\"signInLabel\"\r\n                [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                (permissionDeniedError)=\"showPermissionDenied()\"\r\n                [user]=\"user\"\r\n                [label]=\"postReplyLabel\"\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]=\"canComment\"\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        ></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        (selected)=\"selectMessage($event)\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        (usernameSelected)=\"selectUsername($event)\"\r\n        (avatarSelected)=\"selectAvatar($event)\"\r\n        (shared)=\"shareMessage($event)\"\r\n        ></banta-comment-view>\r\n</div>\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-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both;animation-name:select-comment}.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}.loading{display:block;margin:0 auto;min-height:16em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}"]
                 },] }
     ];
     BantaCommentsComponent.ctorParameters = function () { return [
         { type: BantaService },
         { type: ChatBackendService },
-        { type: core.ElementRef }
+        { type: core.ElementRef },
+        { type: router.ActivatedRoute }
     ]; };
     BantaCommentsComponent.propDecorators = {
         hashtags: [{ type: core.Input }],
@@ -8757,7 +8908,10 @@
         upvoted: [{ type: core.Output }],
         reported: [{ type: core.Output }],
         selected: [{ type: core.Output }],
-        userSelected: [{ type: core.Output }]
+        userSelected: [{ type: core.Output }],
+        usernameSelected: [{ type: core.Output }],
+        avatarSelected: [{ type: core.Output }],
+        shared: [{ type: core.Output }]
     };
 
     var LiveCommentComponent = /** @class */ (function () {
@@ -9118,12 +9272,54 @@
         permissionDeniedError: [{ type: core.Output }]
     };
 
+    var CommentSortComponent = /** @class */ (function () {
+        function CommentSortComponent() {
+            this.commentsOrder = common$1.CommentsOrder;
+            this._sortChange = new rxjs.Subject();
+            this._sort = common$1.CommentsOrder.LIKES;
+        }
+        Object.defineProperty(CommentSortComponent.prototype, "sort", {
+            get: function () {
+                return this._sort;
+            },
+            set: function (value) {
+                var _this = this;
+                if (this._sort !== value) {
+                    this._sort = value;
+                    setTimeout(function () { return _this._sortChange.next(value); });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentSortComponent.prototype, "sortChange", {
+            get: function () {
+                return this._sortChange.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return CommentSortComponent;
+    }());
+    CommentSortComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'banta-comment-sort',
+                    template: "<div class=\"sort-row\">\r\n  <mat-form-field>\r\n    <mat-label>Sort by</mat-label>\r\n    <mat-select [(value)]=\"sort\" >\r\n      <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n      <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n      <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n",
+                    styles: [".sort-row{display:flex;justify-content:end;padding-right:3em}"]
+                },] }
+    ];
+    CommentSortComponent.propDecorators = {
+        sort: [{ type: core.Input }],
+        sortChange: [{ type: core.Output }]
+    };
+
     var COMPONENTS$3 = [
         CommentComponent,
         CommentViewComponent,
         BantaCommentsComponent,
         LiveCommentComponent,
-        CommentFieldComponent
+        CommentFieldComponent,
+        CommentSortComponent
     ];
     var CommentsModule = /** @class */ (function () {
         function CommentsModule() {
@@ -9144,7 +9340,9 @@
                         menu.MatMenuModule,
                         progressSpinner.MatProgressSpinnerModule,
                         BantaCommonModule,
-                        EmojiModule
+                        EmojiModule,
+                        tooltip.MatTooltipModule,
+                        select.MatSelectModule
                     ],
                     exports: COMPONENTS$3
                 },] }