@banta/sdk 6.0.0 → 6.0.2

package/fesm2022/banta-sdk.mjs

@@ -1,7 +1,7 @@
 import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish, take } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, InjectionToken, inject, Pipe, Output, HostBinding, NgModule, ViewChildren, Directive, TemplateRef, ContentChild, PLATFORM_ID, Injectable as Injectable$1 } from '@angular/core';
+import { Component, Input, ViewChild, InjectionToken, inject, Pipe, Output, HostBinding, NgModule, Directive, TemplateRef, ContentChild, ViewChildren, PLATFORM_ID, Injectable as Injectable$1 } from '@angular/core';
 import { __decorate } from 'tslib';
 import * as i1$3 from '@banta/common';
 import { Injectable, FilterMode, CommentsOrder, SocketRPC, RpcEvent, DurableSocket, buildQuery } from '@banta/common';
@@ -7639,6 +7639,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 args: ['class.pinned']
             }] } });
 
+class BantaInlineRepliesDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaInlineRepliesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: BantaInlineRepliesDirective, selector: "[bantaInlineReplies]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaInlineRepliesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `[bantaInlineReplies]`
+                }]
+        }] });
+
 const DEFAULT_MAX_MESSAGES = 2000;
 const DEFAULT_MAX_VISIBLE_MESSAGES = 200;
 class CommentViewComponent {
@@ -7683,6 +7694,7 @@ class CommentViewComponent {
         this.newestLast = false;
         this.holdNewMessages = false;
         this.showEmptyState = true;
+        this.emptyStateMessage = 'Be the first to comment!';
         this.allowReplies = true;
         this.enableHoldOnClick = false;
         this.enableHoldOnScroll = true;
@@ -7911,12 +7923,12 @@ class CommentViewComponent {
     debugMessages() {
         if (!this.showDebug)
             return;
-        // console.log([ 
-        //     ...this.previousMessages.map(x => x.message), 
+        // console.log([
+        //     ...this.previousMessages.map(x => x.message),
         //     '[[',
         //     ...this.messages.map(x => x.message),
         //     ']]',
-        //     ...this.nextMessages.map(x => x.message) 
+        //     ...this.nextMessages.map(x => x.message)
         // ].map(x => /\d+/.test(x) ? this.zeroPad(x, 2) : x).join(" "));
     }
     zeroPad(number, count = 2) {
@@ -7966,7 +7978,7 @@ class CommentViewComponent {
                 this._filterModeChanged.next(FilterMode.ALL);
             return;
         }
-        // On this path, we are already on Newest, but there is newer content available (such as when new content is 
+        // On this path, we are already on Newest, but there is newer content available (such as when new content is
         // being buffered due to user engagement on a comment)
         this.isViewingMore = false;
         // Move all newerMessages into messages, respecting the newestLast direction (normal or replies mode)
@@ -8169,8 +8181,8 @@ class CommentViewComponent {
         if (this.messages.length > this.maxVisibleMessages) {
             let overflow = [];
             // Move overflowing messages into newMessages.
-            // Regardless of the order (newestLast), newMessages represents the direction that is being loaded, 
-            // since it's definition depends on that order. 
+            // Regardless of the order (newestLast), newMessages represents the direction that is being loaded,
+            // since it's definition depends on that order.
             if (this.newestLast) {
                 overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
                 this.newMessages = overflow.concat(this.newMessages);
@@ -8329,11 +8341,11 @@ class CommentViewComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CommentViewComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CommentViewComponent, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", collapsePins: "collapsePins", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", pinned: "pinned", unpinned: "unpinned", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    @if (!collapsePins) {\r\n        @for (message of pinnedMessages; track message.id) {\r\n            @if (!message.hidden) {\r\n                <banta-comment\r\n                    class=\"abbreviated\"\r\n                    \r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    [message]=\"message\"\r\n                    [mine]=\"currentUser?.id === message.user?.id\"\r\n                    [permissions]=\"source?.permissions\"\r\n                    [showReplyAction]=\"allowReplies\"\r\n                    [editing]=\"message.transientState.editing\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (click)=\"messageClicked = true\"\r\n                    (editStarted)=\"startEditing(message)\"\r\n                    (deleted)=\"deleteMessage(message)\"\r\n                    (editEnded)=\"message.transientState.editing = false\"\r\n                    (edited)=\"saveEdit(message, $event)\"\r\n                    (userSelected)=\"selectMessageUser(message)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (liked)=\"likeMessage(message)\"\r\n                    (pinned)=\"pinMessage(message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(message)\"\r\n                    (unliked)=\"unlikeMessage(message)\"\r\n                    (reported)=\"reportMessage(message)\"\r\n                    (selected)=\"selectMessage(message)\"\r\n                    (shared)=\"sharedMessage($event)\"\r\n                    />\r\n                <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                    <ng-content select=\".inline-replies\"></ng-content>\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        @if (!newestLast) {\r\n            <button \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_upload</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_less</mat-icon>\r\n        {{ previousLabel }}\r\n    </button>\r\n\r\n    @for (message of messages; track message.id) {\r\n        @if (!message.hidden) {\r\n            <banta-comment\r\n                class=\"abbreviated\"\r\n                \r\n                [customMenuItems]=\"customMenuItems\"\r\n                [message]=\"message\"\r\n                [mine]=\"currentUser?.id === message.user?.id\"\r\n                [permissions]=\"source?.permissions\"\r\n                [showReplyAction]=\"allowReplies\"\r\n                [editing]=\"message.transientState.editing\"\r\n                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                [readonly]=\"source?.readonly\"\r\n                (click)=\"messageClicked = true\"\r\n                (editStarted)=\"startEditing(message)\"\r\n                (deleted)=\"deleteMessage(message)\"\r\n                (editEnded)=\"message.transientState.editing = false\"\r\n                (edited)=\"saveEdit(message, $event)\"\r\n                (userSelected)=\"selectMessageUser(message)\"\r\n                (avatarSelected)=\"selectAvatar($event)\"\r\n                (usernameSelected)=\"selectUsername($event)\"\r\n                (liked)=\"likeMessage(message)\"\r\n                (pinned)=\"pinMessage(message, $event.options)\"\r\n                (unpinned)=\"unpinMessage(message)\"\r\n                (unliked)=\"unlikeMessage(message)\"\r\n                (reported)=\"reportMessage(message)\"\r\n                (selected)=\"selectMessage(message)\"\r\n                (shared)=\"sharedMessage($event)\"\r\n                />\r\n            <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                <ng-content select=\".inline-replies\"></ng-content>\r\n            </div>\r\n        }\r\n    } @empty {\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    }\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_more</mat-icon>\r\n        {{ nextLabel }}\r\n    </button>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        @if (newestLast) {\r\n            <button \r\n                [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n                matBadgePosition=\"after\" matBadgeSize=\"large\" \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_download</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    @if (showDebug) {\r\n        <div style=\"color: #666\">\r\n            ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n            dir={{newestLast ? '-1' : '1'}}\r\n            v={{maxVisibleMessages}}, M={{maxMessages}}\r\n        </div>\r\n    }\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CommentViewComponent, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", collapsePins: "collapsePins", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", emptyStateMessage: "emptyStateMessage", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", pinned: "pinned", unpinned: "unpinned", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, queries: [{ propertyName: "inlineRepliesTemplate", first: true, predicate: BantaInlineRepliesDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    @if (!collapsePins) {\r\n        @for (message of pinnedMessages; track message.id) {\r\n            @if (!message.hidden) {\r\n                <banta-comment\r\n                    class=\"abbreviated\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    [message]=\"message\"\r\n                    [mine]=\"currentUser?.id === message.user?.id\"\r\n                    [permissions]=\"source?.permissions\"\r\n                    [showReplyAction]=\"allowReplies\"\r\n                    [editing]=\"message.transientState.editing\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (click)=\"messageClicked = true\"\r\n                    (editStarted)=\"startEditing(message)\"\r\n                    (deleted)=\"deleteMessage(message)\"\r\n                    (editEnded)=\"message.transientState.editing = false\"\r\n                    (edited)=\"saveEdit(message, $event)\"\r\n                    (userSelected)=\"selectMessageUser(message)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (liked)=\"likeMessage(message)\"\r\n                    (pinned)=\"pinMessage(message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(message)\"\r\n                    (unliked)=\"unlikeMessage(message)\"\r\n                    (reported)=\"reportMessage(message)\"\r\n                    (selected)=\"selectMessage(message)\"\r\n                    (shared)=\"sharedMessage($event)\"\r\n                    />\r\n                <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                    <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        @if (!newestLast) {\r\n            <button\r\n                mat-button\r\n                class=\"banta-nav\"\r\n                [class.visible]=\"shouldShowNewMessageIndicator\"\r\n                href=\"javascript:;\"\r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_upload</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_less</mat-icon>\r\n        {{ previousLabel }}\r\n    </button>\r\n\r\n    @for (message of messages; track message.id) {\r\n        @if (!message.hidden) {\r\n            <banta-comment\r\n                class=\"abbreviated\"\r\n                [customMenuItems]=\"customMenuItems\"\r\n                [message]=\"message\"\r\n                [mine]=\"currentUser?.id === message.user?.id\"\r\n                [permissions]=\"source?.permissions\"\r\n                [showReplyAction]=\"allowReplies\"\r\n                [editing]=\"message.transientState.editing\"\r\n                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                [readonly]=\"source?.readonly\"\r\n                (click)=\"messageClicked = true\"\r\n                (editStarted)=\"startEditing(message)\"\r\n                (deleted)=\"deleteMessage(message)\"\r\n                (editEnded)=\"message.transientState.editing = false\"\r\n                (edited)=\"saveEdit(message, $event)\"\r\n                (userSelected)=\"selectMessageUser(message)\"\r\n                (avatarSelected)=\"selectAvatar($event)\"\r\n                (usernameSelected)=\"selectUsername($event)\"\r\n                (liked)=\"likeMessage(message)\"\r\n                (pinned)=\"pinMessage(message, $event.options)\"\r\n                (unpinned)=\"unpinMessage(message)\"\r\n                (unliked)=\"unlikeMessage(message)\"\r\n                (reported)=\"reportMessage(message)\"\r\n                (selected)=\"selectMessage(message)\"\r\n                (shared)=\"sharedMessage($event)\"\r\n                />\r\n            <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n            </div>\r\n        }\r\n    } @empty {\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            {{ emptyStateMessage }}\r\n        </div>\r\n    }\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_more</mat-icon>\r\n        {{ nextLabel }}\r\n    </button>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        @if (newestLast) {\r\n            <button\r\n                [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n                matBadgePosition=\"after\" matBadgeSize=\"large\"\r\n                mat-button\r\n                class=\"banta-nav\"\r\n                [class.visible]=\"shouldShowNewMessageIndicator\"\r\n                href=\"javascript:;\"\r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_download</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    @if (showDebug) {\r\n        <div style=\"color: #666\">\r\n            ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n            dir={{newestLast ? '-1' : '1'}}\r\n            v={{maxVisibleMessages}}, M={{maxMessages}}\r\n        </div>\r\n    }\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}::ng-deep .banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CommentViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'banta-comment-view', template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    @if (!collapsePins) {\r\n        @for (message of pinnedMessages; track message.id) {\r\n            @if (!message.hidden) {\r\n                <banta-comment\r\n                    class=\"abbreviated\"\r\n                    \r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    [message]=\"message\"\r\n                    [mine]=\"currentUser?.id === message.user?.id\"\r\n                    [permissions]=\"source?.permissions\"\r\n                    [showReplyAction]=\"allowReplies\"\r\n                    [editing]=\"message.transientState.editing\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (click)=\"messageClicked = true\"\r\n                    (editStarted)=\"startEditing(message)\"\r\n                    (deleted)=\"deleteMessage(message)\"\r\n                    (editEnded)=\"message.transientState.editing = false\"\r\n                    (edited)=\"saveEdit(message, $event)\"\r\n                    (userSelected)=\"selectMessageUser(message)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (liked)=\"likeMessage(message)\"\r\n                    (pinned)=\"pinMessage(message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(message)\"\r\n                    (unliked)=\"unlikeMessage(message)\"\r\n                    (reported)=\"reportMessage(message)\"\r\n                    (selected)=\"selectMessage(message)\"\r\n                    (shared)=\"sharedMessage($event)\"\r\n                    />\r\n                <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                    <ng-content select=\".inline-replies\"></ng-content>\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        @if (!newestLast) {\r\n            <button \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_upload</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_less</mat-icon>\r\n        {{ previousLabel }}\r\n    </button>\r\n\r\n    @for (message of messages; track message.id) {\r\n        @if (!message.hidden) {\r\n            <banta-comment\r\n                class=\"abbreviated\"\r\n                \r\n                [customMenuItems]=\"customMenuItems\"\r\n                [message]=\"message\"\r\n                [mine]=\"currentUser?.id === message.user?.id\"\r\n                [permissions]=\"source?.permissions\"\r\n                [showReplyAction]=\"allowReplies\"\r\n                [editing]=\"message.transientState.editing\"\r\n                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                [readonly]=\"source?.readonly\"\r\n                (click)=\"messageClicked = true\"\r\n                (editStarted)=\"startEditing(message)\"\r\n                (deleted)=\"deleteMessage(message)\"\r\n                (editEnded)=\"message.transientState.editing = false\"\r\n                (edited)=\"saveEdit(message, $event)\"\r\n                (userSelected)=\"selectMessageUser(message)\"\r\n                (avatarSelected)=\"selectAvatar($event)\"\r\n                (usernameSelected)=\"selectUsername($event)\"\r\n                (liked)=\"likeMessage(message)\"\r\n                (pinned)=\"pinMessage(message, $event.options)\"\r\n                (unpinned)=\"unpinMessage(message)\"\r\n                (unliked)=\"unlikeMessage(message)\"\r\n                (reported)=\"reportMessage(message)\"\r\n                (selected)=\"selectMessage(message)\"\r\n                (shared)=\"sharedMessage($event)\"\r\n                />\r\n            <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                <ng-content select=\".inline-replies\"></ng-content>\r\n            </div>\r\n        }\r\n    } @empty {\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    }\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_more</mat-icon>\r\n        {{ nextLabel }}\r\n    </button>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        @if (newestLast) {\r\n            <button \r\n                [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n                matBadgePosition=\"after\" matBadgeSize=\"large\" \r\n                mat-button \r\n                class=\"banta-nav\" \r\n                [class.visible]=\"shouldShowNewMessageIndicator\" \r\n                href=\"javascript:;\" \r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_download</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    @if (showDebug) {\r\n        <div style=\"color: #666\">\r\n            ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n            dir={{newestLast ? '-1' : '1'}}\r\n            v={{maxVisibleMessages}}, M={{maxMessages}}\r\n        </div>\r\n    }\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"] }]
+            args: [{ selector: 'banta-comment-view', template: "<div class=\"banta-message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    @if (!collapsePins) {\r\n        @for (message of pinnedMessages; track message.id) {\r\n            @if (!message.hidden) {\r\n                <banta-comment\r\n                    class=\"abbreviated\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    [message]=\"message\"\r\n                    [mine]=\"currentUser?.id === message.user?.id\"\r\n                    [permissions]=\"source?.permissions\"\r\n                    [showReplyAction]=\"allowReplies\"\r\n                    [editing]=\"message.transientState.editing\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (click)=\"messageClicked = true\"\r\n                    (editStarted)=\"startEditing(message)\"\r\n                    (deleted)=\"deleteMessage(message)\"\r\n                    (editEnded)=\"message.transientState.editing = false\"\r\n                    (edited)=\"saveEdit(message, $event)\"\r\n                    (userSelected)=\"selectMessageUser(message)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (liked)=\"likeMessage(message)\"\r\n                    (pinned)=\"pinMessage(message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(message)\"\r\n                    (unliked)=\"unlikeMessage(message)\"\r\n                    (reported)=\"reportMessage(message)\"\r\n                    (selected)=\"selectMessage(message)\"\r\n                    (shared)=\"sharedMessage($event)\"\r\n                    />\r\n                <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                    <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n\r\n    <div class=\"banta-top-sticky\">\r\n        @if (!newestLast) {\r\n            <button\r\n                mat-button\r\n                class=\"banta-nav\"\r\n                [class.visible]=\"shouldShowNewMessageIndicator\"\r\n                href=\"javascript:;\"\r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_upload</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_less</mat-icon>\r\n        {{ previousLabel }}\r\n    </button>\r\n\r\n    @for (message of messages; track message.id) {\r\n        @if (!message.hidden) {\r\n            <banta-comment\r\n                class=\"abbreviated\"\r\n                [customMenuItems]=\"customMenuItems\"\r\n                [message]=\"message\"\r\n                [mine]=\"currentUser?.id === message.user?.id\"\r\n                [permissions]=\"source?.permissions\"\r\n                [showReplyAction]=\"allowReplies\"\r\n                [editing]=\"message.transientState.editing\"\r\n                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                [readonly]=\"source?.readonly\"\r\n                (click)=\"messageClicked = true\"\r\n                (editStarted)=\"startEditing(message)\"\r\n                (deleted)=\"deleteMessage(message)\"\r\n                (editEnded)=\"message.transientState.editing = false\"\r\n                (edited)=\"saveEdit(message, $event)\"\r\n                (userSelected)=\"selectMessageUser(message)\"\r\n                (avatarSelected)=\"selectAvatar($event)\"\r\n                (usernameSelected)=\"selectUsername($event)\"\r\n                (liked)=\"likeMessage(message)\"\r\n                (pinned)=\"pinMessage(message, $event.options)\"\r\n                (unpinned)=\"unpinMessage(message)\"\r\n                (unliked)=\"unlikeMessage(message)\"\r\n                (reported)=\"reportMessage(message)\"\r\n                (selected)=\"selectMessage(message)\"\r\n                (shared)=\"sharedMessage($event)\"\r\n                />\r\n            <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n                <ng-container *ngTemplateOutlet=\"inlineRepliesTemplate\" />\r\n            </div>\r\n        }\r\n    } @empty {\r\n        <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n            {{ emptyStateMessage }}\r\n        </div>\r\n    }\r\n\r\n    <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n        <mat-icon>expand_more</mat-icon>\r\n        {{ nextLabel }}\r\n    </button>\r\n\r\n    <div class=\"banta-nav-point banta-bottom-sticky\">\r\n        @if (newestLast) {\r\n            <button\r\n                [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n                matBadgePosition=\"after\" matBadgeSize=\"large\"\r\n                mat-button\r\n                class=\"banta-nav\"\r\n                [class.visible]=\"shouldShowNewMessageIndicator\"\r\n                href=\"javascript:;\"\r\n                (click)=\"showNewest($event)\"\r\n                >\r\n                <mat-icon>file_download</mat-icon>\r\n                Newest\r\n                @if (heldMessages.length > 0) {\r\n                    <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n                }\r\n            </button>\r\n        }\r\n    </div>\r\n\r\n    <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    @if (showDebug) {\r\n        <div style=\"color: #666\">\r\n            ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n            dir={{newestLast ? '-1' : '1'}}\r\n            v={{maxVisibleMessages}}, M={{maxMessages}}\r\n        </div>\r\n    }\r\n\r\n    <ng-content select=\":not([data-before]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n", styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}::ng-deep .banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"] }]
         }], ctorParameters: () => [{ type: ChatBackendBase }, { type: i0.ElementRef }], propDecorators: { source: [{
                 type: Input
             }], maxMessages: [{
@@ -8348,6 +8360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Input
             }], showEmptyState: [{
                 type: Input
+            }], emptyStateMessage: [{
+                type: Input
             }], allowReplies: [{
                 type: Input
             }], enableHoldOnClick: [{
@@ -8365,6 +8379,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
                 type: Input
             }], genericAvatarUrl: [{
                 type: Input
+            }], inlineRepliesTemplate: [{
+                type: ContentChild,
+                args: [BantaInlineRepliesDirective, { read: TemplateRef }]
             }], userSelected: [{
                 type: Output
             }], reported: [{
@@ -8996,7 +9013,7 @@ class BantaCommentsComponent {
             `Just a second...`,
             `It's definitely worth the wait!`,
             `This has never happened before.`,
-            `We'll keep trying, but it's not looking great. 
+            `We'll keep trying, but it's not looking great.
             Commenting & chat services may be down or degraded. Try reloading the page.
             If you keep experiencing issues or reloading the page works for you, please let us know by contacting support.
         `
@@ -9120,7 +9137,7 @@ class BantaCommentsComponent {
         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 
+                // 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;
@@ -9445,7 +9462,7 @@ class BantaCommentsComponent {
             return;
         }
         message.transientState ??= {};
-        // If there is a parent message, we should instead focus that and let the 
+        // If there is a parent message, we should instead focus that and let the
         // scrollToComment and highlight do the work.
         if (message.parentMessageId) {
             let parentMessage = await this.source.get(message.parentMessageId);
@@ -9482,7 +9499,7 @@ class BantaCommentsComponent {
     handlePermissionDenied(errorMessage) {
         // This is what other components call when handling permission errors
         if (errorMessage.startsWith(`app-handle|`)) {
-            // If this is an error during authorizeAction on the backend, pass control to the user-provided 
+            // 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;
@@ -9587,6 +9604,7 @@ class BantaCommentsComponent {
             this.selectedMessageThread = null;
         }
         this._selected.next(message);
+        this.selectedMessage = message;
         console.log(`[Banta] Opening thread for ${this.topicID}/${message.id}...`);
         let selectedMessageThread = await this.backend.getSourceForThread(this.topicID, message.id, {
             metadata: this.metadata
@@ -9598,7 +9616,6 @@ class BantaCommentsComponent {
         console.log(`[Banta] Thread opened for ${this.topicID}/${message.id}.`);
         setTimeout(() => this.selectedMessageVisible = true);
         setTimeout(async () => {
-            this.selectedMessage = message;
             this.selectedMessageThread = selectedMessageThread;
         }, 250);
         return selectedMessageThread;
@@ -9670,11 +9687,11 @@ class BantaCommentsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaCommentsComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }, { token: i2$2.ActivatedRoute }, { token: i3$2.MatSnackBar }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: BantaCommentsComponent, selector: "banta-comments", inputs: { customMenuItems: "customMenuItems", url: "url", maxCommentLength: "maxCommentLength", loadingMessages: "loadingMessages", useInlineReplies: "useInlineReplies", signInLabel: "signInLabel", sendLabel: "sendLabel", signingInLabel: "signingInLabel", replyLabel: "replyLabel", sendingLabel: "sendingLabel", permissionDeniedLabel: "permissionDeniedLabel", postCommentLabel: "postCommentLabel", postReplyLabel: "postReplyLabel", allowAttachments: "allowAttachments", allowServerInfoRequest: "allowServerInfoRequest", fixedHeight: "fixedHeight", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", genericAvatarUrl: "genericAvatarUrl", shouldInterceptMessageSend: "shouldInterceptMessageSend", participants: "participants", source: "source", hashtags: "hashtags", topicID: "topicID", sortOrder: "sortOrder", filterMode: "filterMode", initialMessageCount: "initialMessageCount", metadata: "metadata" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", permissionDeniedError: "permissionDeniedError", upvoted: "upvoted", reported: "reported", selected: "selected", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", reconnectRequested: "reconnectRequested" }, host: { properties: { "class.banta-mobile": "this.isMobileSized" } }, queries: [{ propertyName: "sendReplyOptionsTemplate", first: true, predicate: BantaReplySendOptionsDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "commentView", first: true, predicate: ["commentView"], descendants: true }, { propertyName: "threadViewQuery", predicate: CommentViewComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>{{loadingTitle}}</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\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            (pinned)=\"pinMessage(source, selectedMessage, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, selectedMessage)\"\r\n            (selected)=\"toggleSelectedMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [url]=\"url\"\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInState]=\"source?.signInState\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [url]=\"url\"\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signingInLabel]=\"signingInLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [signInState]=\"source?.signInState\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\r\n            [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n            (serverInfoRequested)=\"showServerInfo()\"\r\n            (reconnectRequested)=\"reconnect()\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        @if (serverInfoVisible) {\r\n            <div class=\"server-info\">\r\n                <div class=\"server-info-header\">\r\n                    Server Info\r\n                    <div class=\"spacer\"></div>\r\n                    <button mat-icon-button matTooltip=\"Reload\" (click)=\"showServerInfo()\">\r\n                        <mat-icon>refresh</mat-icon>\r\n                    </button>\r\n                    <button mat-icon-button matTooltip=\"Hide\" (click)=\"serverInfoVisible = false\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n                @if (serverInfoLoading) {\r\n                    <mat-spinner />\r\n                } @else {\r\n                    <pre>{{ serverInfo | json }}</pre>\r\n                }\r\n            </div>\r\n        }\r\n        <mat-menu #filterMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let filter of filterModes\" (click)=\"filterMode = filter\">\r\n                {{filterModeLabels[filter]}}\r\n            </button>\r\n        </mat-menu>\r\n        <mat-menu #sortMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let sort of sortOrders\" (click)=\"sortOrder = sort\">\r\n                {{sortOrderLabels[sort]}}\r\n            </button>\r\n        </mat-menu>\r\n\r\n        <div class=\"settings\">\r\n            <button mat-button [matMenuTriggerFor]=\"filterMenu\">\r\n                <mat-icon>filter_list</mat-icon>\r\n                {{filterModeLabels[filterMode]}}\r\n            </button>\r\n            <button mat-button [matMenuTriggerFor]=\"sortMenu\">\r\n                <mat-icon>sort</mat-icon>\r\n                {{sortOrderLabels[sortOrder]}}\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading the comment you linked to...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <div class=\"loading-comment\" *ngIf=\"!loadingSharedComment && lastSharedCommentID\">\r\n            <ng-container *ngIf=\"sharedCommentMissing\">\r\n\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n\r\n                <h1>\r\n                    <mat-icon>error</mat-icon>\r\n                    Uh oh!\r\n                </h1>\r\n\r\n                <p>The comment you linked to can't be found! It may have been removed.</p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!sharedCommentMissing\">\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n                <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n                    <mat-icon>move_down</mat-icon> Jump to shared comment\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            [holdNewMessages]=\"selectedMessageVisible\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (filterModeChanged)=\"filterMode = $event\"\r\n            (selected)=\"toggleSelectedMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (pinned)=\"pinMessage(source, $event.message, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [enableHoldOnClick]=\"false\"\r\n                                [holdNewMessages]=\"replyFieldFocused\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                                (unpinned)=\"unpinMessage(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                                [url]=\"url\"\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [signingInLabel]=\"signingInLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [signInState]=\"source?.signInState\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                [readonly]=\"source?.readonly\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                (focusChange)=\"replyFieldFocused = $event\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"reconnecting\" *ngIf=\"connectionState === 'lost'\">\r\n        <strong>Connection to Live Comments lost.</strong> Reconnecting...\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:.4s opacity ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:.25s ease-in-out opacity}.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:.25s ease-in-out opacity;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}.reconnecting{position:sticky;bottom:1em;background:#380a39;color:#926893;padding:1em;z-index:10;border-radius:4px;text-align:center}.settings{display:flex}.server-info{border:1px solid #0089ff;padding:0 .5em;border-radius:4px;margin:.5em 0}.server-info .server-info-header{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["source", "maxMessages", "maxVisibleMessages", "collapsePins", "newestLast", "holdNewMessages", "showEmptyState", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "genericAvatarUrl"], outputs: ["userSelected", "reported", "liked", "unliked", "pinned", "unpinned", "usernameSelected", "avatarSelected", "shared", "deleted", "selected", "messageEdited", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: CommentFieldComponent, selector: "banta-comment-field", inputs: ["source", "user", "canComment", "signInState", "allowAttachments", "transientMessage", "sendLabel", "signingInLabel", "sendingLabel", "label", "permissionDeniedLabel", "signInLabel", "maxLength", "placeholder", "shouldInterceptMessageSend", "hashtags", "participants", "genericAvatarUrl", "url", "submit", "readonly", "allowServerInfoRequest"], outputs: ["signInSelected", "editAvatarSelected", "focusChange", "textChanged", "serverInfoRequested", "reconnectRequested", "permissionDeniedError"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: BantaCommentsComponent, selector: "banta-comments", inputs: { customMenuItems: "customMenuItems", url: "url", maxCommentLength: "maxCommentLength", loadingMessages: "loadingMessages", useInlineReplies: "useInlineReplies", signInLabel: "signInLabel", sendLabel: "sendLabel", signingInLabel: "signingInLabel", replyLabel: "replyLabel", sendingLabel: "sendingLabel", permissionDeniedLabel: "permissionDeniedLabel", postCommentLabel: "postCommentLabel", postReplyLabel: "postReplyLabel", allowAttachments: "allowAttachments", allowServerInfoRequest: "allowServerInfoRequest", fixedHeight: "fixedHeight", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", genericAvatarUrl: "genericAvatarUrl", shouldInterceptMessageSend: "shouldInterceptMessageSend", participants: "participants", source: "source", hashtags: "hashtags", topicID: "topicID", sortOrder: "sortOrder", filterMode: "filterMode", initialMessageCount: "initialMessageCount", metadata: "metadata" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", permissionDeniedError: "permissionDeniedError", upvoted: "upvoted", reported: "reported", selected: "selected", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", reconnectRequested: "reconnectRequested" }, host: { properties: { "class.banta-mobile": "this.isMobileSized" } }, queries: [{ propertyName: "sendReplyOptionsTemplate", first: true, predicate: BantaReplySendOptionsDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "commentView", first: true, predicate: ["commentView"], descendants: true }, { propertyName: "threadViewQuery", predicate: CommentViewComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>{{loadingTitle}}</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\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            (pinned)=\"pinMessage(source, selectedMessage, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, selectedMessage)\"\r\n            (selected)=\"toggleSelectedMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"true\"\r\n                    emptyStateMessage=\"Be the first to reply!\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [url]=\"url\"\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInState]=\"source?.signInState\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [url]=\"url\"\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signingInLabel]=\"signingInLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [signInState]=\"source?.signInState\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\r\n            [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n            (serverInfoRequested)=\"showServerInfo()\"\r\n            (reconnectRequested)=\"reconnect()\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            >\r\n        </banta-comment-field>\r\n\r\n        @if (serverInfoVisible) {\r\n            <div class=\"server-info\">\r\n                <div class=\"server-info-header\">\r\n                    Server Info\r\n                    <div class=\"spacer\"></div>\r\n                    <button mat-icon-button matTooltip=\"Reload\" (click)=\"showServerInfo()\">\r\n                        <mat-icon>refresh</mat-icon>\r\n                    </button>\r\n                    <button mat-icon-button matTooltip=\"Hide\" (click)=\"serverInfoVisible = false\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n                @if (serverInfoLoading) {\r\n                    <mat-spinner />\r\n                } @else {\r\n                    <pre>{{ serverInfo | json }}</pre>\r\n                }\r\n            </div>\r\n        }\r\n        <mat-menu #filterMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let filter of filterModes\" (click)=\"filterMode = filter\">\r\n                {{filterModeLabels[filter]}}\r\n            </button>\r\n        </mat-menu>\r\n        <mat-menu #sortMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let sort of sortOrders\" (click)=\"sortOrder = sort\">\r\n                {{sortOrderLabels[sort]}}\r\n            </button>\r\n        </mat-menu>\r\n\r\n        <div class=\"settings\">\r\n            <button mat-button [matMenuTriggerFor]=\"filterMenu\">\r\n                <mat-icon>filter_list</mat-icon>\r\n                {{filterModeLabels[filterMode]}}\r\n            </button>\r\n            <button mat-button [matMenuTriggerFor]=\"sortMenu\">\r\n                <mat-icon>sort</mat-icon>\r\n                {{sortOrderLabels[sortOrder]}}\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading the comment you linked to...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <div class=\"loading-comment\" *ngIf=\"!loadingSharedComment && lastSharedCommentID\">\r\n            <ng-container *ngIf=\"sharedCommentMissing\">\r\n\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n\r\n                <h1>\r\n                    <mat-icon>error</mat-icon>\r\n                    Uh oh!\r\n                </h1>\r\n\r\n                <p>The comment you linked to can't be found! It may have been removed.</p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!sharedCommentMissing\">\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n                <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n                    <mat-icon>move_down</mat-icon> Jump to shared comment\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            [holdNewMessages]=\"selectedMessageVisible\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (filterModeChanged)=\"filterMode = $event\"\r\n            (selected)=\"toggleSelectedMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (pinned)=\"pinMessage(source, $event.message, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\" *bantaInlineReplies>\r\n              <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                  <div class=\"replies\">\r\n\r\n                      <ng-container *ngIf=\"!selectedMessageThread\">\r\n                          <div class=\"loading\">\r\n                              <mat-spinner></mat-spinner>\r\n                          </div>\r\n                      </ng-container>\r\n\r\n                      <ng-container *ngIf=\"selectedMessageThread\">\r\n                          <banta-comment-view\r\n                              [source]=\"selectedMessageThread\"\r\n                              [allowReplies]=\"false\"\r\n                              [fixedHeight]=\"false\"\r\n                              [showEmptyState]=\"true\"\r\n                              emptyStateMessage=\"Be the first to reply!\"\r\n                              [newestLast]=\"true\"\r\n                              [enableHoldOnClick]=\"false\"\r\n                              [holdNewMessages]=\"replyFieldFocused\"\r\n                              [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                              (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                              (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                              (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                              (unpinned)=\"unpinMessage(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                              />\r\n\r\n                          <banta-comment-field\r\n                              [url]=\"url\"\r\n                              [sendLabel]=\"replyLabel\"\r\n                              [sendingLabel]=\"sendingLabel\"\r\n                              [signingInLabel]=\"signingInLabel\"\r\n                              [hashtags]=\"hashtags\"\r\n                              [participants]=\"participants\"\r\n                              (signInSelected)=\"showSignIn()\"\r\n                              [maxLength]=\"maxCommentLength\"\r\n                              [source]=\"selectedMessageThread\"\r\n                              [signInState]=\"source?.signInState\"\r\n                              [canComment]=\"source?.permissions?.canPost\"\r\n                              [signInLabel]=\"signInLabel\"\r\n                              [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                              [readonly]=\"source?.readonly\"\r\n                              [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                              [user]=\"user\"\r\n                              [label]=\"postReplyLabel\"\r\n                              [submit]=\"sendReply\"\r\n                              [allowAttachments]=\"allowAttachments\"\r\n                              [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                              (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                              (editAvatarSelected)=\"showEditAvatar()\"\r\n                              (focusChange)=\"replyFieldFocused = $event\"\r\n                              >\r\n                              <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                          </banta-comment-field>\r\n                      </ng-container>\r\n                  </div>\r\n              </div>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"reconnecting\" *ngIf=\"connectionState === 'lost'\">\r\n        <strong>Connection to Live Comments lost.</strong> Reconnecting...\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:.4s opacity ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:.25s ease-in-out opacity}.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:.25s ease-in-out opacity;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}.reconnecting{position:sticky;bottom:1em;background:#380a39;color:#926893;padding:1em;z-index:10;border-radius:4px;text-align:center}.settings{display:flex}.server-info{border:1px solid #0089ff;padding:0 .5em;border-radius:4px;margin:.5em 0}.server-info .server-info-header{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["source", "maxMessages", "maxVisibleMessages", "collapsePins", "newestLast", "holdNewMessages", "showEmptyState", "emptyStateMessage", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "genericAvatarUrl"], outputs: ["userSelected", "reported", "liked", "unliked", "pinned", "unpinned", "usernameSelected", "avatarSelected", "shared", "deleted", "selected", "messageEdited", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: CommentFieldComponent, selector: "banta-comment-field", inputs: ["source", "user", "canComment", "signInState", "allowAttachments", "transientMessage", "sendLabel", "signingInLabel", "sendingLabel", "label", "permissionDeniedLabel", "signInLabel", "maxLength", "placeholder", "shouldInterceptMessageSend", "hashtags", "participants", "genericAvatarUrl", "url", "submit", "readonly", "allowServerInfoRequest"], outputs: ["signInSelected", "editAvatarSelected", "focusChange", "textChanged", "serverInfoRequested", "reconnectRequested", "permissionDeniedError"] }, { kind: "directive", type: BantaInlineRepliesDirective, selector: "[bantaInlineReplies]" }, { kind: "pipe", type: i1.JsonPipe, name: "json" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaCommentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'banta-comments', template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>{{loadingTitle}}</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\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            (pinned)=\"pinMessage(source, selectedMessage, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, selectedMessage)\"\r\n            (selected)=\"toggleSelectedMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [url]=\"url\"\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInState]=\"source?.signInState\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [url]=\"url\"\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signingInLabel]=\"signingInLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [signInState]=\"source?.signInState\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\r\n            [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n            (serverInfoRequested)=\"showServerInfo()\"\r\n            (reconnectRequested)=\"reconnect()\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        @if (serverInfoVisible) {\r\n            <div class=\"server-info\">\r\n                <div class=\"server-info-header\">\r\n                    Server Info\r\n                    <div class=\"spacer\"></div>\r\n                    <button mat-icon-button matTooltip=\"Reload\" (click)=\"showServerInfo()\">\r\n                        <mat-icon>refresh</mat-icon>\r\n                    </button>\r\n                    <button mat-icon-button matTooltip=\"Hide\" (click)=\"serverInfoVisible = false\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n                @if (serverInfoLoading) {\r\n                    <mat-spinner />\r\n                } @else {\r\n                    <pre>{{ serverInfo | json }}</pre>\r\n                }\r\n            </div>\r\n        }\r\n        <mat-menu #filterMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let filter of filterModes\" (click)=\"filterMode = filter\">\r\n                {{filterModeLabels[filter]}}\r\n            </button>\r\n        </mat-menu>\r\n        <mat-menu #sortMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let sort of sortOrders\" (click)=\"sortOrder = sort\">\r\n                {{sortOrderLabels[sort]}}\r\n            </button>\r\n        </mat-menu>\r\n\r\n        <div class=\"settings\">\r\n            <button mat-button [matMenuTriggerFor]=\"filterMenu\">\r\n                <mat-icon>filter_list</mat-icon>\r\n                {{filterModeLabels[filterMode]}}\r\n            </button>\r\n            <button mat-button [matMenuTriggerFor]=\"sortMenu\">\r\n                <mat-icon>sort</mat-icon>\r\n                {{sortOrderLabels[sortOrder]}}\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading the comment you linked to...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <div class=\"loading-comment\" *ngIf=\"!loadingSharedComment && lastSharedCommentID\">\r\n            <ng-container *ngIf=\"sharedCommentMissing\">\r\n\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n\r\n                <h1>\r\n                    <mat-icon>error</mat-icon>\r\n                    Uh oh!\r\n                </h1>\r\n\r\n                <p>The comment you linked to can't be found! It may have been removed.</p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!sharedCommentMissing\">\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n                <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n                    <mat-icon>move_down</mat-icon> Jump to shared comment\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            [holdNewMessages]=\"selectedMessageVisible\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (filterModeChanged)=\"filterMode = $event\"\r\n            (selected)=\"toggleSelectedMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (pinned)=\"pinMessage(source, $event.message, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [enableHoldOnClick]=\"false\"\r\n                                [holdNewMessages]=\"replyFieldFocused\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                                (unpinned)=\"unpinMessage(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                                [url]=\"url\"\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [signingInLabel]=\"signingInLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [signInState]=\"source?.signInState\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                [readonly]=\"source?.readonly\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                (focusChange)=\"replyFieldFocused = $event\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"reconnecting\" *ngIf=\"connectionState === 'lost'\">\r\n        <strong>Connection to Live Comments lost.</strong> Reconnecting...\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:.4s opacity ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:.25s ease-in-out opacity}.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:.25s ease-in-out opacity;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}.reconnecting{position:sticky;bottom:1em;background:#380a39;color:#926893;padding:1em;z-index:10;border-radius:4px;text-align:center}.settings{display:flex}.server-info{border:1px solid #0089ff;padding:0 .5em;border-radius:4px;margin:.5em 0}.server-info .server-info-header{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'banta-comments', template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>{{loadingTitle}}</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\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            (pinned)=\"pinMessage(source, selectedMessage, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, selectedMessage)\"\r\n            (selected)=\"toggleSelectedMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"true\"\r\n                    emptyStateMessage=\"Be the first to reply!\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                    (unpinned)=\"unpinMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [url]=\"url\"\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    [readonly]=\"source?.readonly\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInState]=\"source?.signInState\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [url]=\"url\"\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signingInLabel]=\"signingInLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [signInState]=\"source?.signInState\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [readonly]=\"source?.readonly\"\r\n            [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n            (serverInfoRequested)=\"showServerInfo()\"\r\n            (reconnectRequested)=\"reconnect()\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            >\r\n        </banta-comment-field>\r\n\r\n        @if (serverInfoVisible) {\r\n            <div class=\"server-info\">\r\n                <div class=\"server-info-header\">\r\n                    Server Info\r\n                    <div class=\"spacer\"></div>\r\n                    <button mat-icon-button matTooltip=\"Reload\" (click)=\"showServerInfo()\">\r\n                        <mat-icon>refresh</mat-icon>\r\n                    </button>\r\n                    <button mat-icon-button matTooltip=\"Hide\" (click)=\"serverInfoVisible = false\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                </div>\r\n                @if (serverInfoLoading) {\r\n                    <mat-spinner />\r\n                } @else {\r\n                    <pre>{{ serverInfo | json }}</pre>\r\n                }\r\n            </div>\r\n        }\r\n        <mat-menu #filterMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let filter of filterModes\" (click)=\"filterMode = filter\">\r\n                {{filterModeLabels[filter]}}\r\n            </button>\r\n        </mat-menu>\r\n        <mat-menu #sortMenu=\"matMenu\">\r\n            <button mat-menu-item *ngFor=\"let sort of sortOrders\" (click)=\"sortOrder = sort\">\r\n                {{sortOrderLabels[sort]}}\r\n            </button>\r\n        </mat-menu>\r\n\r\n        <div class=\"settings\">\r\n            <button mat-button [matMenuTriggerFor]=\"filterMenu\">\r\n                <mat-icon>filter_list</mat-icon>\r\n                {{filterModeLabels[filterMode]}}\r\n            </button>\r\n            <button mat-button [matMenuTriggerFor]=\"sortMenu\">\r\n                <mat-icon>sort</mat-icon>\r\n                {{sortOrderLabels[sortOrder]}}\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading the comment you linked to...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <div class=\"loading-comment\" *ngIf=\"!loadingSharedComment && lastSharedCommentID\">\r\n            <ng-container *ngIf=\"sharedCommentMissing\">\r\n\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n\r\n                <h1>\r\n                    <mat-icon>error</mat-icon>\r\n                    Uh oh!\r\n                </h1>\r\n\r\n                <p>The comment you linked to can't be found! It may have been removed.</p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!sharedCommentMissing\">\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n                <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n                    <mat-icon>move_down</mat-icon> Jump to shared comment\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            [holdNewMessages]=\"selectedMessageVisible\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (filterModeChanged)=\"filterMode = $event\"\r\n            (selected)=\"toggleSelectedMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (pinned)=\"pinMessage(source, $event.message, $event.options)\"\r\n            (unpinned)=\"unpinMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\" *bantaInlineReplies>\r\n              <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                  <div class=\"replies\">\r\n\r\n                      <ng-container *ngIf=\"!selectedMessageThread\">\r\n                          <div class=\"loading\">\r\n                              <mat-spinner></mat-spinner>\r\n                          </div>\r\n                      </ng-container>\r\n\r\n                      <ng-container *ngIf=\"selectedMessageThread\">\r\n                          <banta-comment-view\r\n                              [source]=\"selectedMessageThread\"\r\n                              [allowReplies]=\"false\"\r\n                              [fixedHeight]=\"false\"\r\n                              [showEmptyState]=\"true\"\r\n                              emptyStateMessage=\"Be the first to reply!\"\r\n                              [newestLast]=\"true\"\r\n                              [enableHoldOnClick]=\"false\"\r\n                              [holdNewMessages]=\"replyFieldFocused\"\r\n                              [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                              (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                              (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                              (pinned)=\"pinMessage(selectedMessageThread, $event.message, $event.options)\"\r\n                              (unpinned)=\"unpinMessage(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                              />\r\n\r\n                          <banta-comment-field\r\n                              [url]=\"url\"\r\n                              [sendLabel]=\"replyLabel\"\r\n                              [sendingLabel]=\"sendingLabel\"\r\n                              [signingInLabel]=\"signingInLabel\"\r\n                              [hashtags]=\"hashtags\"\r\n                              [participants]=\"participants\"\r\n                              (signInSelected)=\"showSignIn()\"\r\n                              [maxLength]=\"maxCommentLength\"\r\n                              [source]=\"selectedMessageThread\"\r\n                              [signInState]=\"source?.signInState\"\r\n                              [canComment]=\"source?.permissions?.canPost\"\r\n                              [signInLabel]=\"signInLabel\"\r\n                              [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                              [readonly]=\"source?.readonly\"\r\n                              [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                              [user]=\"user\"\r\n                              [label]=\"postReplyLabel\"\r\n                              [submit]=\"sendReply\"\r\n                              [allowAttachments]=\"allowAttachments\"\r\n                              [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                              (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                              (editAvatarSelected)=\"showEditAvatar()\"\r\n                              (focusChange)=\"replyFieldFocused = $event\"\r\n                              >\r\n                              <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                          </banta-comment-field>\r\n                      </ng-container>\r\n                  </div>\r\n              </div>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"reconnecting\" *ngIf=\"connectionState === 'lost'\">\r\n        <strong>Connection to Live Comments lost.</strong> Reconnecting...\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:column}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:.4s opacity ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:.25s ease-in-out opacity}.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:.25s ease-in-out opacity;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}.reconnecting{position:sticky;bottom:1em;background:#380a39;color:#926893;padding:1em;z-index:10;border-radius:4px;text-align:center}.settings{display:flex}.server-info{border:1px solid #0089ff;padding:0 .5em;border-radius:4px;margin:.5em 0}.server-info .server-info-header{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: ChatBackendBase }, { type: i0.ElementRef }, { type: i2$2.ActivatedRoute }, { type: i3$2.MatSnackBar }, { type: i0.NgZone }], propDecorators: { isMobileSized: [{
                 type: HostBinding,
                 args: ['class.banta-mobile']
@@ -10588,7 +10605,7 @@ class BantaComponent {
         this.showAux(`Report message from @${message.user.username}`, 'report');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaComponent, deps: [{ token: ChatBackendBase }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: BantaComponent, selector: "banta", inputs: { topicID: "topicID", chatLabel: "chatLabel", commentsLabel: "commentsLabel", allowServerInfoRequest: "allowServerInfoRequest" }, outputs: { signInSelected: "signInSelected" }, host: { properties: { "class.point-focus": "this.hasPoint" } }, viewQueries: [{ propertyName: "firehose", first: true, predicate: ["firehose"], descendants: true, static: true }], ngImport: i0, template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n    <ng-container *ngIf=\"currentUser\">\r\n        <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (&#64;{{currentUser.username}})</button>\r\n        <button mat-menu-item (click)=\"signOut()\">Sign Out</button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!currentUser\">\r\n        <button mat-menu-item>Sign In</button>\r\n    </ng-container>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n    <div>\r\n        <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n        <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n    </div>\r\n    <div class=\"spacer\"></div>\r\n    <div>\r\n        <ng-container *ngIf=\"currentUser\">\r\n            <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                &#64;{{currentUser.username}}\r\n            </button>\r\n            <button mat-icon-button (click)=\"showNotifications()\">\r\n                <mat-icon>notification_important</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n        \r\n        <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n            Sign In\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n            <div class=\"spacer\"></div>\r\n\r\n            <ng-container *ngIf=\"currentUser\">\r\n                <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                    &#64;{{currentUser.username}}\r\n                </button>\r\n                <button mat-icon-button (click)=\"showNotifications()\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                </button>\r\n            </ng-container>\r\n            \r\n            <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n                Sign In\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <banta-chat \r\n        #firehose\r\n        [source]=\"firehoseSource\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (userSelected)=\"showProfile($event.user)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n    <header>\r\n        <div>\r\n            <label>{{auxTitle}}</label>\r\n            <div class=\"spacer\"></div>\r\n            <button mat-icon-button (click)=\"auxOpen = false\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div class=\"aux-contents\">\r\n        <ng-container *ngIf=\"auxMode === 'profile'\">\r\n            <ng-container *ngIf=\"profileUser\">\r\n\r\n                <div>\r\n                    <strong style=\"font-size: 125%;\">\r\n                        {{profileUser.displayName}}\r\n                    </strong>\r\n                    &#64;{{profileUser.username}}\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Top Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Recent Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'report'\">\r\n            <p>Are you sure you want to report this message?</p>\r\n\r\n            <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n\r\n            <div style=\"text-align: center;\">\r\n                <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n                &nbsp;\r\n                <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'notifications'\">\r\n\r\n            <div *ngIf=\"!notifications || notifications.length === 0\">\r\n                <em>You do not have any notifications yet</em>\r\n            </div>\r\n            \r\n            <div class=\"notifications\">\r\n                <div class=\"notification\" *ngFor=\"let notif of notifications\">\r\n                    <div>\r\n                        <ng-container *ngIf=\"notif.type === 'upvote'\">\r\n                            &#64;{{notif.message?.user?.username}} upvoted your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'notice'\">\r\n                            <div>\r\n                                {{notif.message}}\r\n                            </div>\r\n                            <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n                                {{notif.actionLabel}}\r\n                            </a>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'mention'\">\r\n                            You were mentioned by &#64;{{notif.message?.user?.username}}\r\n\r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'reply'\">\r\n                            &#64;{{notif.replyMessage?.user?.username}} replied to your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.replyMessage\"\r\n                                (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n                                (reported)=\"reportMessage(notif.replyMessage)\"\r\n                                (selected)=\"goToMessage(notif.replyMessage)\">\r\n                            </banta-live-message>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n    <header>\r\n        <div>\r\n            <label>{{commentsLabel}}</label>\r\n        </div>\r\n    </header>\r\n    <div class=\"point-focus\">\r\n        <div class=\"actions\">\r\n            <button mat-button (click)=\"pointUnfocus()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Back\r\n            </button>\r\n\r\n            <div class=\"spacer\"></div>\r\n            \r\n            <ng-container *ngIf=\"pointOpen\">\r\n                <div class=\"counted-action\">\r\n                    <div class=\"count-indicator\">  \r\n                        {{pointOpen.likes}}\r\n                    </div>\r\n                    <button mat-icon-button>\r\n                        <mat-icon>thumb_up</mat-icon>\r\n                    </button>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"!pointSubChat\">\r\n            Error: No subchat\r\n        </div>\r\n        \r\n        <banta-comment-view\r\n            class=\"subcomments\"\r\n            *ngIf=\"pointSubChat\"\r\n            [newestLast]=\"true\"\r\n            [allowReplies]=\"false\"\r\n            [source]=\"pointSubChat\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            >\r\n            \r\n            <banta-comment\r\n                class=\"focused-comment\"\r\n                data-before\r\n                *ngIf=\"pointOpen\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"pointOpen\"\r\n                [readonly]=\"pointSubChat?.readonly\"\r\n                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                ></banta-comment>\r\n        \r\n            <div class=\"message reply\">\r\n                Reply:\r\n                <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n                    <textarea \r\n                        name=\"message\" \r\n                        (keydown)=\"newPointSubMessageKeyDown($event)\"\r\n                        [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n                \r\n                    <div class=\"actions\">\r\n                        <button [disabled]=\"!newPointSubMessage.message\" \r\n                            mat-raised-button color=\"primary\">Send</button>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"points-section\">\r\n        <banta-comments\r\n            [source]=\"pointSource\"\r\n            [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (selected)=\"goToMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            ></banta-comments>\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:row;padding:.5em;height:40em;position:relative}.counted-action{display:flex;align-items:center}.count-indicator{font-size:9pt;padding:0 3px;border-radius:3px;border:1px solid #333}header{position:relative;margin-bottom:1em}header div{display:flex;align-items:center;height:30px}header button{color:#666}header label{text-transform:uppercase;z-index:1;font-size:12pt;letter-spacing:2px;font-weight:100;color:#333;margin:0 auto 0 0;display:block;width:fit-content;position:relative;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}header:after{content:\"\";border:1px solid;border-color:#ccc;height:0px;width:100%;display:block;position:relative;z-index:0}.points{width:33%;max-width:50em;display:flex;flex-direction:column}:host.point-focus .points{width:66%;max-width:50em}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:initial}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{width:33%;margin-left:.5em;font-size:12pt;flex-shrink:0;max-width:30em;transition:.2s width ease-in,.2s max-width ease-in;position:relative}.points .points-section{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in;z-index:2}.points .point-focus{position:absolute;width:100%;inset:1.75em 0 0;padding:.5em;opacity:0;transition:.2s opacity ease-in;flex-grow:1;display:flex;flex-direction:column}.firehose{flex-grow:1;font-size:10pt;display:flex;flex-direction:column}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}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}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{width:0px;min-width:0px;overflow-x:hidden;transition:.4s width ease-out,.4s min-width ease-out;display:flex;flex-direction:column}.aux.open{width:30em;min-width:18em}.aux .aux-contents{width:30em;min-width:10em;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{display:block;text-align:right;font-size:9pt;color:#999}.message.reply{padding:1em}.tabs{display:none}@media (max-width: 1015px){:host{flex-direction:column}.tabs{display:flex;position:absolute;top:0;left:0;right:0;width:100%;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000080}.points{width:100%;max-width:100%;margin-left:0}header{display:none}:host.point-focus .points{width:100%;max-width:100%}.aux{width:100%;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:#000}.points.focus,.firehose.focus,.aux.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["source", "maxMessages", "maxVisibleMessages", "collapsePins", "newestLast", "holdNewMessages", "showEmptyState", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "genericAvatarUrl"], outputs: ["userSelected", "reported", "liked", "unliked", "pinned", "unpinned", "usernameSelected", "avatarSelected", "shared", "deleted", "selected", "messageEdited", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: BantaCommentsComponent, selector: "banta-comments", inputs: ["customMenuItems", "url", "maxCommentLength", "loadingMessages", "useInlineReplies", "signInLabel", "sendLabel", "signingInLabel", "replyLabel", "sendingLabel", "permissionDeniedLabel", "postCommentLabel", "postReplyLabel", "allowAttachments", "allowServerInfoRequest", "fixedHeight", "maxMessages", "maxVisibleMessages", "genericAvatarUrl", "shouldInterceptMessageSend", "participants", "source", "hashtags", "topicID", "sortOrder", "filterMode", "initialMessageCount", "metadata"], outputs: ["signInSelected", "editAvatarSelected", "permissionDeniedError", "upvoted", "reported", "selected", "userSelected", "usernameSelected", "avatarSelected", "shared", "reconnectRequested"] }, { kind: "component", type: BantaChatComponent, selector: "banta-chat", inputs: ["shouldInterceptMessageSend", "url", "source", "topicID", "metadata", "signInLabel", "sendLabel", "permissionDeniedLabel", "messageFieldPlaceholder", "emptyLabel"], outputs: ["selected", "reported", "upvoted", "userSelected", "permissionDeniedError", "signInSelected", "received"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: LiveMessageComponent, selector: "banta-live-message", inputs: ["message"], outputs: ["upvoted", "reported", "selected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: BantaComponent, selector: "banta", inputs: { topicID: "topicID", chatLabel: "chatLabel", commentsLabel: "commentsLabel", allowServerInfoRequest: "allowServerInfoRequest" }, outputs: { signInSelected: "signInSelected" }, host: { properties: { "class.point-focus": "this.hasPoint" } }, viewQueries: [{ propertyName: "firehose", first: true, predicate: ["firehose"], descendants: true, static: true }], ngImport: i0, template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n    <ng-container *ngIf=\"currentUser\">\r\n        <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (&#64;{{currentUser.username}})</button>\r\n        <button mat-menu-item (click)=\"signOut()\">Sign Out</button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!currentUser\">\r\n        <button mat-menu-item>Sign In</button>\r\n    </ng-container>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"tabs\">\r\n    <div>\r\n        <a mat-button (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</a>\r\n        <a mat-button (click)=\"mobileFocus = 'comments'\">{{commentsLabel}}</a>\r\n    </div>\r\n    <div class=\"spacer\"></div>\r\n    <div>\r\n        <ng-container *ngIf=\"currentUser\">\r\n            <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                &#64;{{currentUser.username}}\r\n            </button>\r\n            <button mat-icon-button (click)=\"showNotifications()\">\r\n                <mat-icon>notification_important</mat-icon>\r\n            </button>\r\n        </ng-container>\r\n        \r\n        <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n            Sign In\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"firehose\" [class.focus]=\"mobileFocus === 'chat'\">\r\n    <header>\r\n        <div>\r\n            <label (click)=\"mobileFocus = 'chat'\">{{chatLabel}}</label>\r\n            <div class=\"spacer\"></div>\r\n\r\n            <ng-container *ngIf=\"currentUser\">\r\n                <button mat-button [matMenuTriggerFor]=\"userMenu\">\r\n                    &#64;{{currentUser.username}}\r\n                </button>\r\n                <button mat-icon-button (click)=\"showNotifications()\">\r\n                    <mat-icon>notification_important</mat-icon>\r\n                </button>\r\n            </ng-container>\r\n            \r\n            <button mat-button *ngIf=\"!currentUser\" (click)=\"showSignIn()\">\r\n                Sign In\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <banta-chat \r\n        #firehose\r\n        [source]=\"firehoseSource\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (userSelected)=\"showProfile($event.user)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-chat>\r\n</div>\r\n\r\n<div class=\"aux\" [class.focus]=\"mobileFocus === 'aux'\" [class.open]=\"auxOpen\">\r\n    <header>\r\n        <div>\r\n            <label>{{auxTitle}}</label>\r\n            <div class=\"spacer\"></div>\r\n            <button mat-icon-button (click)=\"auxOpen = false\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </div>\r\n    </header>\r\n    <div class=\"aux-contents\">\r\n        <ng-container *ngIf=\"auxMode === 'profile'\">\r\n            <ng-container *ngIf=\"profileUser\">\r\n\r\n                <div>\r\n                    <strong style=\"font-size: 125%;\">\r\n                        {{profileUser.displayName}}\r\n                    </strong>\r\n                    &#64;{{profileUser.username}}\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Top Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n\r\n                <br/>\r\n                <strong>Recent Messages</strong>\r\n\r\n                <div>\r\n                    <em>Not yet available</em>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'report'\">\r\n            <p>Are you sure you want to report this message?</p>\r\n\r\n            <banta-live-message [message]=\"reportedMessage\"></banta-live-message>\r\n\r\n            <div style=\"text-align: center;\">\r\n                <button mat-raised-button color=\"primary\" (click)=\"sendReport(reportedMessage)\">Yes, Report</button>\r\n                &nbsp;\r\n                <button mat-raised-button color=\"secondary\" (click)=\"auxOpen = false\">No, Cancel</button>\r\n            </div>\r\n\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"auxMode === 'notifications'\">\r\n\r\n            <div *ngIf=\"!notifications || notifications.length === 0\">\r\n                <em>You do not have any notifications yet</em>\r\n            </div>\r\n            \r\n            <div class=\"notifications\">\r\n                <div class=\"notification\" *ngFor=\"let notif of notifications\">\r\n                    <div>\r\n                        <ng-container *ngIf=\"notif.type === 'upvote'\">\r\n                            &#64;{{notif.message?.user?.username}} upvoted your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'notice'\">\r\n                            <div>\r\n                                {{notif.message}}\r\n                            </div>\r\n                            <a mat-button target=\"_blank\" href=\"{{notif.actionUrl}}\">\r\n                                {{notif.actionLabel}}\r\n                            </a>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'mention'\">\r\n                            You were mentioned by &#64;{{notif.message?.user?.username}}\r\n\r\n                            <banta-live-message\r\n                                [message]=\"notif.message\"\r\n                                (upvoted)=\"upvoteMessage(notif.message)\"\r\n                                (reported)=\"reportMessage(notif.message)\"\r\n                                (selected)=\"goToMessage(notif.message)\">\r\n                            </banta-live-message>\r\n\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"notif.type === 'reply'\">\r\n                            &#64;{{notif.replyMessage?.user?.username}} replied to your post\r\n                            \r\n                            <banta-live-message\r\n                                [message]=\"notif.replyMessage\"\r\n                                (upvoted)=\"upvoteMessage(notif.replyMessage)\"\r\n                                (reported)=\"reportMessage(notif.replyMessage)\"\r\n                                (selected)=\"goToMessage(notif.replyMessage)\">\r\n                            </banta-live-message>\r\n                        </ng-container>\r\n                    </div>\r\n\r\n                    <banta-timestamp [value]=\"notif.sentAt\"></banta-timestamp>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n<div class=\"points\" [class.focus]=\"mobileFocus === 'points'\">\r\n    <header>\r\n        <div>\r\n            <label>{{commentsLabel}}</label>\r\n        </div>\r\n    </header>\r\n    <div class=\"point-focus\">\r\n        <div class=\"actions\">\r\n            <button mat-button (click)=\"pointUnfocus()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Back\r\n            </button>\r\n\r\n            <div class=\"spacer\"></div>\r\n            \r\n            <ng-container *ngIf=\"pointOpen\">\r\n                <div class=\"counted-action\">\r\n                    <div class=\"count-indicator\">  \r\n                        {{pointOpen.likes}}\r\n                    </div>\r\n                    <button mat-icon-button>\r\n                        <mat-icon>thumb_up</mat-icon>\r\n                    </button>\r\n                </div>\r\n\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div *ngIf=\"!pointSubChat\">\r\n            Error: No subchat\r\n        </div>\r\n        \r\n        <banta-comment-view\r\n            class=\"subcomments\"\r\n            *ngIf=\"pointSubChat\"\r\n            [newestLast]=\"true\"\r\n            [allowReplies]=\"false\"\r\n            [source]=\"pointSubChat\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            >\r\n            \r\n            <banta-comment\r\n                class=\"focused-comment\"\r\n                data-before\r\n                *ngIf=\"pointOpen\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"pointOpen\"\r\n                [readonly]=\"pointSubChat?.readonly\"\r\n                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                ></banta-comment>\r\n        \r\n            <div class=\"message reply\">\r\n                Reply:\r\n                <form class=\"new-message\" (submit)=\"sendPointSubMessage()\">\r\n                    <textarea \r\n                        name=\"message\" \r\n                        (keydown)=\"newPointSubMessageKeyDown($event)\"\r\n                        [(ngModel)]=\"newPointSubMessage.message\"></textarea>\r\n                \r\n                    <div class=\"actions\">\r\n                        <button [disabled]=\"!newPointSubMessage.message\" \r\n                            mat-raised-button color=\"primary\">Send</button>\r\n                    </div>\r\n                </form>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <div class=\"points-section\">\r\n        <banta-comments\r\n            [source]=\"pointSource\"\r\n            [allowServerInfoRequest]=\"allowServerInfoRequest\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            (upvoted)=\"upvoteMessage($event)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (selected)=\"goToMessage($event)\"\r\n            (userSelected)=\"showProfile($event.user)\"\r\n            ></banta-comments>\r\n    </div>\r\n</div>", styles: [":host{display:flex;flex-direction:row;padding:.5em;height:40em;position:relative}.counted-action{display:flex;align-items:center}.count-indicator{font-size:9pt;padding:0 3px;border-radius:3px;border:1px solid #333}header{position:relative;margin-bottom:1em}header div{display:flex;align-items:center;height:30px}header button{color:#666}header label{text-transform:uppercase;z-index:1;font-size:12pt;letter-spacing:2px;font-weight:100;color:#333;margin:0 auto 0 0;display:block;width:fit-content;position:relative;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}header:after{content:\"\";border:1px solid;border-color:#ccc;height:0px;width:100%;display:block;position:relative;z-index:0}.points{width:33%;max-width:50em;display:flex;flex-direction:column}:host.point-focus .points{width:66%;max-width:50em}:host.point-focus .points .points-section{opacity:0;pointer-events:none}:host.point-focus .points .point-focus{opacity:1;pointer-events:initial}:host.point-focus .points .point-focus .actions{display:flex}banta-comments{flex-grow:1}.points{width:33%;margin-left:.5em;font-size:12pt;flex-shrink:0;max-width:30em;transition:.2s width ease-in,.2s max-width ease-in;position:relative}.points .points-section{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:.2s opacity ease-in;z-index:2}.points .point-focus{position:absolute;width:100%;inset:1.75em 0 0;padding:.5em;opacity:0;transition:.2s opacity ease-in;flex-grow:1;display:flex;flex-direction:column}.firehose{flex-grow:1;font-size:10pt;display:flex;flex-direction:column}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}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}.subcomments ::ng-deep banta-comment{font-size:10pt}.subcomments ::ng-deep banta-comment.focused-comment{background:#001321;color:#fff;font-size:12pt}.aux{width:0px;min-width:0px;overflow-x:hidden;transition:.4s width ease-out,.4s min-width ease-out;display:flex;flex-direction:column}.aux.open{width:30em;min-width:18em}.aux .aux-contents{width:30em;min-width:10em;max-width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1}.notifications .notification{border-bottom:1px solid #333;padding:1em}.notifications .notification banta-timestamp{display:block;text-align:right;font-size:9pt;color:#999}.message.reply{padding:1em}.tabs{display:none}@media (max-width: 1015px){:host{flex-direction:column}.tabs{display:flex;position:absolute;top:0;left:0;right:0;width:100%;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000080}.points{width:100%;max-width:100%;margin-left:0}header{display:none}:host.point-focus .points{width:100%;max-width:100%}.aux{width:100%;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:#000}.points.focus,.firehose.focus,.aux.focus{z-index:2}}:host-context(.mat-dark-theme) :host{background:#090909;color:#fff}:host-context(.mat-dark-theme) form textarea{background:#ccc;color:#333}:host-context(.mat-dark-theme) header:after{border-color:#222}:host-context(.mat-dark-theme) header label{color:#aaa}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded", "pinned", "unpinned"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["source", "maxMessages", "maxVisibleMessages", "collapsePins", "newestLast", "holdNewMessages", "showEmptyState", "emptyStateMessage", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "genericAvatarUrl"], outputs: ["userSelected", "reported", "liked", "unliked", "pinned", "unpinned", "usernameSelected", "avatarSelected", "shared", "deleted", "selected", "messageEdited", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: BantaCommentsComponent, selector: "banta-comments", inputs: ["customMenuItems", "url", "maxCommentLength", "loadingMessages", "useInlineReplies", "signInLabel", "sendLabel", "signingInLabel", "replyLabel", "sendingLabel", "permissionDeniedLabel", "postCommentLabel", "postReplyLabel", "allowAttachments", "allowServerInfoRequest", "fixedHeight", "maxMessages", "maxVisibleMessages", "genericAvatarUrl", "shouldInterceptMessageSend", "participants", "source", "hashtags", "topicID", "sortOrder", "filterMode", "initialMessageCount", "metadata"], outputs: ["signInSelected", "editAvatarSelected", "permissionDeniedError", "upvoted", "reported", "selected", "userSelected", "usernameSelected", "avatarSelected", "shared", "reconnectRequested"] }, { kind: "component", type: BantaChatComponent, selector: "banta-chat", inputs: ["shouldInterceptMessageSend", "url", "source", "topicID", "metadata", "signInLabel", "sendLabel", "permissionDeniedLabel", "messageFieldPlaceholder", "emptyLabel"], outputs: ["selected", "reported", "upvoted", "userSelected", "permissionDeniedError", "signInSelected", "received"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: LiveMessageComponent, selector: "banta-live-message", inputs: ["message"], outputs: ["upvoted", "reported", "selected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: BantaComponent, decorators: [{
             type: Component,
@@ -10699,6 +10716,7 @@ const COMPONENTS = [
     CommentSortComponent,
     AttachmentButtonComponent,
     BantaReplySendOptionsDirective,
+    BantaInlineRepliesDirective,
     AttachmentScraperDirective
 ];
 class CommentsModule {
@@ -10711,6 +10729,7 @@ class CommentsModule {
             CommentSortComponent,
             AttachmentButtonComponent,
             BantaReplySendOptionsDirective,
+            BantaInlineRepliesDirective,
             AttachmentScraperDirective], imports: [CommonModule,
             TextFieldModule,
             FormsModule,
@@ -10736,6 +10755,7 @@ class CommentsModule {
             CommentSortComponent,
             AttachmentButtonComponent,
             BantaReplySendOptionsDirective,
+            BantaInlineRepliesDirective,
             AttachmentScraperDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CommentsModule, imports: [CommonModule,
             TextFieldModule,
@@ -11560,5 +11580,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentButtonComponent, AttachmentScraperDirective, BANTA_SDK_OPTIONS, BantaAttachmentComponent, BantaAttachmentsComponent, BantaChatComponent, BantaCommentsComponent, BantaCommonModule, BantaComponent, BantaLogoComponent, BantaMarkdownToHtmlPipe, BantaMentionLinkerPipe, BantaReplySendOptionsDirective, BantaSdkModule, BantaTrustResourceUrlPipe, ChatBackend, ChatBackendBase, ChatMessageComponent, ChatModule, ChatSource, ChatViewComponent, CommentComponent, CommentFieldComponent, CommentSortComponent, CommentViewComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, GiphyAttachmentResolver, LightboxComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, TimerPool, TimestampComponent, TweetAttachmentResolver, UrlAttachmentResolver, UrlAttachmentScraper, YouTubeAttachmentResolver, lazyConnection };
+export { AttachmentButtonComponent, AttachmentScraperDirective, BANTA_SDK_OPTIONS, BantaAttachmentComponent, BantaAttachmentsComponent, BantaChatComponent, BantaCommentsComponent, BantaCommonModule, BantaComponent, BantaInlineRepliesDirective, BantaLogoComponent, BantaMarkdownToHtmlPipe, BantaMentionLinkerPipe, BantaReplySendOptionsDirective, BantaSdkModule, BantaTrustResourceUrlPipe, ChatBackend, ChatBackendBase, ChatMessageComponent, ChatModule, ChatSource, ChatViewComponent, CommentComponent, CommentFieldComponent, CommentSortComponent, CommentViewComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, GiphyAttachmentResolver, LightboxComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, TimerPool, TimestampComponent, TweetAttachmentResolver, UrlAttachmentResolver, UrlAttachmentScraper, YouTubeAttachmentResolver, lazyConnection };
 //# sourceMappingURL=banta-sdk.mjs.map