@banta/sdk 4.7.16 → 4.8.0

package/fesm2015/banta-sdk.mjs

@@ -4,7 +4,7 @@ import * as i0 from '@angular/core';
 import { Component, Input, ViewChild, Pipe, Inject, Optional, Output, HostBinding, NgModule, ViewChildren, Directive, TemplateRef, ContentChild, Injectable as Injectable$1 } from '@angular/core';
 import { __decorate, __awaiter } from 'tslib';
 import * as i1$2 from '@banta/common';
-import { Injectable, CommentsOrder, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
+import { Injectable, FilterMode, CommentsOrder, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/icon';
@@ -14,11 +14,11 @@ import createDOMPurify from 'dompurify';
 import twemoji$1 from 'twemoji';
 import * as i1 from '@angular/platform-browser';
 import * as i3 from '@angular/cdk/bidi';
-import * as i4 from '@angular/material/progress-spinner';
+import * as i8 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i6$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -26,22 +26,22 @@ import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i4$2 from '@angular/cdk/portal';
+import * as i4$1 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
-import * as i2$4 from '@angular/material/dialog';
+import * as i2$3 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i7$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i11 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$3 from '@angular/router';
-import * as i3$3 from '@angular/material/snack-bar';
+import * as i2$2 from '@angular/router';
+import * as i3$2 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i3$1 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i2$2 from '@angular/material/select';
+import * as i2$4 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/core';
+import * as i3$3 from '@angular/material/core';
 import { v4 } from 'uuid';
 
 function lazyConnection(options) {
@@ -510,7 +510,7 @@ class BantaAttachmentComponent {
     }
 }
 BantaAttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaAttachmentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BantaAttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaAttachmentComponent, selector: "banta-attachment", inputs: { attachment: "attachment", loading: "loading", editing: "editing", loadingMessage: "loadingMessage", error: "error", errorMessage: "errorMessage" }, outputs: { removed: "removed", activated: "activated", loaded: "loaded" }, host: { properties: { "class.loading": "this.isLoading" } }, ngImport: i0, template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading && attachment\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card-attachment\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div class=\"summary\">\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment && attachment.url\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a [href]=\"attachment.url\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>", styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width: 700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: BantaTrustResourceUrlPipe, name: "trustResourceUrl" }] });
+BantaAttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaAttachmentComponent, selector: "banta-attachment", inputs: { attachment: "attachment", loading: "loading", editing: "editing", loadingMessage: "loadingMessage", error: "error", errorMessage: "errorMessage" }, outputs: { removed: "removed", activated: "activated", loaded: "loaded" }, host: { properties: { "class.loading": "this.isLoading" } }, ngImport: i0, template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading && attachment\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card-attachment\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div class=\"summary\">\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment && attachment.url\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a [href]=\"attachment.url\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>", styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width: 700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: BantaTrustResourceUrlPipe, name: "trustResourceUrl" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaAttachmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'banta-attachment', template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading && attachment\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card-attachment\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div class=\"summary\">\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment && attachment.url\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a [href]=\"attachment.url\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>", styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width: 700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}\n"] }]
@@ -7242,7 +7242,7 @@ class EmojiSelectorPanelComponent {
     }
 }
 EmojiSelectorPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, deps: [{ token: i1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EmojiSelectorPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EmojiSelectorPanelComponent, selector: "emoji-selector-panel", outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.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-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
+EmojiSelectorPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EmojiSelectorPanelComponent, selector: "emoji-selector-panel", outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.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-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emoji-selector-panel', template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"] }]
@@ -7333,7 +7333,7 @@ EmojiSelectorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 (selected)="insert($event)"
                 ></emoji-selector-panel>
         </ng-template>
-    `, isInline: true, styles: [":host{display:block;position:relative}button{color:#666}\n"], dependencies: [{ kind: "component", type: i2$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: EmojiSelectorPanelComponent, selector: "emoji-selector-panel", outputs: ["selected"] }] });
+    `, isInline: true, styles: [":host{display:block;position:relative}button{color:#666}\n"], dependencies: [{ kind: "component", type: i2$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$1.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: EmojiSelectorPanelComponent, selector: "emoji-selector-panel", outputs: ["selected"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emoji-selector-button', template: `
@@ -7580,7 +7580,7 @@ class CommentComponent {
     }
 }
 CommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentComponent, selector: "banta-comment", inputs: { maxLength: "maxLength", message: "message", customMenuItems: "customMenuItems", showReplyAction: "showReplyAction", permissions: "permissions", mine: "mine", editing: "editing", genericAvatarUrl: "genericAvatarUrl" }, outputs: { loaded: "loaded", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", reported: "reported", liked: "liked", unliked: "unliked", selected: "selected", edited: "edited", deleted: "deleted", editStarted: "editStarted", editEnded: "editEnded", shared: "shared" }, host: { properties: { "class.new": "this.isNew", "class.highlighted": "this.isHighlighted", "class.visible": "this.visible", "attr.data-comment-id": "this.commentId" } }, ngImport: i0, template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"share()\">\r\n        <mat-icon>share</mat-icon>\r\n        Share\r\n    </button>\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">\r\n        <mat-icon>warning</mat-icon>\r\n        Report\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">\r\n        <mat-icon>edit</mat-icon>\r\n        Edit\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">\r\n        <mat-icon>delete</mat-icon>\r\n        Delete\r\n    </button>\r\n\r\n    <button *ngFor=\"let menuItem of customMenuItems\" mat-menu-item (click)=\"menuItem.action(message)\">\r\n        <mat-icon>{{menuItem.icon}}</mat-icon>\r\n        {{menuItem.label}}\r\n    </button>\r\n\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <div class=\"user-1\">\r\n            <a\r\n                href=\"javascript:;\"\r\n                class=\"avatar\"\r\n                (click)=\"selectAvatar(message.user)\"\r\n                [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n            <div class=\"user-identity\">\r\n                <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n                <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-2\">\r\n            <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n            <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n            <span class=\"spacer\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | mentionLinker: message.mentionLinks | markdownToHtml\"></span>\r\n        <banta-attachments \r\n            [attachments]=\"message.attachments\"\r\n            (loaded)=\"markAttachmentsLoaded()\"\r\n            ></banta-attachments>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">(Edited)</li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n        <div>\r\n            <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n                <mat-label>Edit Message</mat-label>\r\n                <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n            </mat-form-field>\r\n        </div>\r\n        <button mat-raised-button (click)=\"saveEdit()\">Save</button> &nbsp;\r\n        <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n    </div>\r\n\r\n\r\n    <div class=\"actions\">\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n                <span class=\"count-indicator\">\r\n                    {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n                    {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <button \r\n                *ngIf=\"message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"true\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                >\r\n                <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n            </button>\r\n            <button \r\n                *ngIf=\"!message.transientState?.liking\"\r\n                mat-button \r\n                [matTooltip]=\"permissions?.canLike ? upvoting ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\" \r\n                matTooltipPosition=\"below\" \r\n                (click)=\"message.userState?.liked ? unlike() : like()\" \r\n                >\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n                <span class=\"count-indicator\" *ngIf=\"message.likes > 0\">\r\n                    {{message.likes}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: ["@keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;animation-name:comment-appear;animation-duration:.25s;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button{color:#666;flex-shrink:0}banta-timestamp{color:#666;font-size:10pt;flex-shrink:0;margin-left:1em;text-align:right}.user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.user .user-1,.user .user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.user .user-2{margin:1em 0}.user .user-identity{display:flex;flex-direction:column;min-width:0}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:center;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active button,.counted-action.active .count-indicator{color:#00a5ff}.counted-action button .count-indicator{margin-left:.5em}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;color:#fff;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em}ul.message-facts li{margin-top:.5em}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width: 400px){.avatar{height:32px;width:32px}:host .actions{margin-left:0;margin-top:.5em}:host .message-content .content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .message-content .content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}::ng-deep .banta-message-content img.emoji{height:1.5em;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: BantaMarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: BantaMentionLinkerPipe, name: "mentionLinker" }] });
+CommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentComponent, selector: "banta-comment", inputs: { maxLength: "maxLength", message: "message", customMenuItems: "customMenuItems", showReplyAction: "showReplyAction", permissions: "permissions", mine: "mine", editing: "editing", genericAvatarUrl: "genericAvatarUrl" }, outputs: { loaded: "loaded", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", reported: "reported", liked: "liked", unliked: "unliked", selected: "selected", edited: "edited", deleted: "deleted", editStarted: "editStarted", editEnded: "editEnded", shared: "shared" }, host: { properties: { "class.new": "this.isNew", "class.highlighted": "this.isHighlighted", "class.visible": "this.visible", "attr.data-comment-id": "this.commentId" } }, ngImport: i0, template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"share()\">\r\n        <mat-icon>share</mat-icon>\r\n        Share\r\n    </button>\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">\r\n        <mat-icon>warning</mat-icon>\r\n        Report\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">\r\n        <mat-icon>edit</mat-icon>\r\n        Edit\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">\r\n        <mat-icon>delete</mat-icon>\r\n        Delete\r\n    </button>\r\n\r\n    <button *ngFor=\"let menuItem of customMenuItems\" mat-menu-item (click)=\"menuItem.action(message)\">\r\n        <mat-icon>{{menuItem.icon}}</mat-icon>\r\n        {{menuItem.label}}\r\n    </button>\r\n\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <div class=\"user-1\">\r\n            <a\r\n                href=\"javascript:;\"\r\n                class=\"avatar\"\r\n                (click)=\"selectAvatar(message.user)\"\r\n                [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n            <div class=\"user-identity\">\r\n                <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n                <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-2\">\r\n            <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n            <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n            <span class=\"spacer\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | mentionLinker: message.mentionLinks | markdownToHtml\"></span>\r\n        <banta-attachments \r\n            [attachments]=\"message.attachments\"\r\n            (loaded)=\"markAttachmentsLoaded()\"\r\n            ></banta-attachments>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">(Edited)</li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n        <div>\r\n            <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n                <mat-label>Edit Message</mat-label>\r\n                <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n            </mat-form-field>\r\n        </div>\r\n        <button mat-raised-button (click)=\"saveEdit()\">Save</button> &nbsp;\r\n        <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n    </div>\r\n\r\n\r\n    <div class=\"actions\">\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n                <span class=\"count-indicator\">\r\n                    {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n                    {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <button \r\n                *ngIf=\"message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"true\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                >\r\n                <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n            </button>\r\n            <button \r\n                *ngIf=\"!message.transientState?.liking\"\r\n                mat-button \r\n                [matTooltip]=\"permissions?.canLike ? upvoting ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\" \r\n                matTooltipPosition=\"below\" \r\n                (click)=\"message.userState?.liked ? unlike() : like()\" \r\n                >\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n                <span class=\"count-indicator\" *ngIf=\"message.likes > 0\">\r\n                    {{message.likes}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: ["@keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;animation-name:comment-appear;animation-duration:.25s;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button{color:#666;flex-shrink:0}banta-timestamp{color:#666;font-size:10pt;flex-shrink:0;margin-left:1em;text-align:right}.user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.user .user-1,.user .user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.user .user-2{margin:1em 0}.user .user-identity{display:flex;flex-direction:column;min-width:0}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:center;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active button,.counted-action.active .count-indicator{color:#00a5ff}.counted-action button .count-indicator{margin-left:.5em}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;color:#fff;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em}ul.message-facts li{margin-top:.5em}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width: 400px){.avatar{height:32px;width:32px}:host .actions{margin-left:0;margin-top:.5em}:host .message-content .content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .message-content .content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}::ng-deep .banta-message-content img.emoji{height:1.5em;vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: BantaMarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: BantaMentionLinkerPipe, name: "mentionLinker" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'banta-comment', template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"share()\">\r\n        <mat-icon>share</mat-icon>\r\n        Share\r\n    </button>\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">\r\n        <mat-icon>warning</mat-icon>\r\n        Report\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">\r\n        <mat-icon>edit</mat-icon>\r\n        Edit\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">\r\n        <mat-icon>delete</mat-icon>\r\n        Delete\r\n    </button>\r\n\r\n    <button *ngFor=\"let menuItem of customMenuItems\" mat-menu-item (click)=\"menuItem.action(message)\">\r\n        <mat-icon>{{menuItem.icon}}</mat-icon>\r\n        {{menuItem.label}}\r\n    </button>\r\n\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <div class=\"user-1\">\r\n            <a\r\n                href=\"javascript:;\"\r\n                class=\"avatar\"\r\n                (click)=\"selectAvatar(message.user)\"\r\n                [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n            <div class=\"user-identity\">\r\n                <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n                <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-2\">\r\n            <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n            <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n            <span class=\"spacer\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | mentionLinker: message.mentionLinks | markdownToHtml\"></span>\r\n        <banta-attachments \r\n            [attachments]=\"message.attachments\"\r\n            (loaded)=\"markAttachmentsLoaded()\"\r\n            ></banta-attachments>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">(Edited)</li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n        <div>\r\n            <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n                <mat-label>Edit Message</mat-label>\r\n                <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n            </mat-form-field>\r\n        </div>\r\n        <button mat-raised-button (click)=\"saveEdit()\">Save</button> &nbsp;\r\n        <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n    </div>\r\n\r\n\r\n    <div class=\"actions\">\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n                <span class=\"count-indicator\">\r\n                    {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n                    {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <button \r\n                *ngIf=\"message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"true\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                >\r\n                <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n            </button>\r\n            <button \r\n                *ngIf=\"!message.transientState?.liking\"\r\n                mat-button \r\n                [matTooltip]=\"permissions?.canLike ? upvoting ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\" \r\n                matTooltipPosition=\"below\" \r\n                (click)=\"message.userState?.liked ? unlike() : like()\" \r\n                >\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n                <span class=\"count-indicator\" *ngIf=\"message.likes > 0\">\r\n                    {{message.likes}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: ["@keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;animation-name:comment-appear;animation-duration:.25s;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button{color:#666;flex-shrink:0}banta-timestamp{color:#666;font-size:10pt;flex-shrink:0;margin-left:1em;text-align:right}.user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.user .user-1,.user .user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.user .user-2{margin:1em 0}.user .user-identity{display:flex;flex-direction:column;min-width:0}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:center;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active button,.counted-action.active .count-indicator{color:#00a5ff}.counted-action button .count-indicator{margin-left:.5em}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;color:#fff;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em}ul.message-facts li{margin-top:.5em}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width: 400px){.avatar{height:32px;width:32px}:host .actions{margin-left:0;margin-top:.5em}:host .message-content .content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .message-content .content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}::ng-deep .banta-message-content img.emoji{height:1.5em;vertical-align:middle}\n"] }]
@@ -7641,8 +7641,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             }] } });
 
 class CommentViewComponent {
-    constructor(backend) {
+    constructor(backend, elementRef) {
         this.backend = backend;
+        this.elementRef = elementRef;
         this._sourceSubs = new Subscription();
         this._selected = new Subject();
         this._liked = new Subject();
@@ -7656,6 +7657,8 @@ class CommentViewComponent {
         this._messageEdited = new Subject();
         this.showEmptyState = true;
         this.allowReplies = true;
+        this.enableHoldOnClick = false;
+        this.enableHoldOnScroll = true;
         this.customMenuItems = [];
         this.menuMessage = null;
         this.messages = [];
@@ -7664,12 +7667,14 @@ class CommentViewComponent {
         this.maxMessages = 2000;
         this.maxVisibleMessages = 200;
         this.newestLast = false;
+        this.holdNewMessages = false;
         this.isViewingMore = false;
         this.isLoadingMore = false;
         this.hasMore = false;
         this.newMessages = [];
         this.olderMessages = [];
         this.sortOrderChanged = new Subject();
+        this.filterModeChanged = new Subject();
     }
     get comments() {
         return Array.from(this.commentsQuery);
@@ -7709,6 +7714,53 @@ class CommentViewComponent {
             this.isViewingMore = true;
         });
     }
+    get shouldShowNewMessageIndicator() {
+        return this.isViewingMore
+            || this.customSortEnabled
+            || this.source.filterMode !== FilterMode.ALL
+            || this.newMessages.length > 0;
+    }
+    get shouldHoldNewMessages() {
+        if (this.holdNewMessages || this.isViewingMore) {
+            console.log(`holding due to settings`);
+            return true;
+        }
+        if (this.enableHoldOnScroll) {
+            let keyMessage;
+            if (this.newestLast)
+                keyMessage = this.messages[this.messages.length - 1];
+            else
+                keyMessage = this.messages[0];
+            if (keyMessage) {
+                const messageElement = this.getElementForComment(keyMessage.id);
+                if (messageElement) {
+                    if (!this.isElementVisible(messageElement)) {
+                        console.log(`key element is not visible`);
+                        return true;
+                    }
+                    else {
+                        console.log(`key element is visible`);
+                    }
+                }
+                else {
+                    console.log(`could not find key element`);
+                }
+            }
+            else {
+                console.log(`could not find key message`);
+            }
+            return false;
+        }
+        return false;
+    }
+    isElementVisible(element) {
+        const elementRect = element.getBoundingClientRect();
+        return !!elementRect
+            && elementRect.bottom >= 0
+            && elementRect.right >= 0
+            && elementRect.left <= document.documentElement.clientWidth
+            && elementRect.top <= document.documentElement.clientHeight;
+    }
     /**
      * Get the CommentComponent instantiated for the given ChatMessage,
      * if it exists in the current view. Note that messages which are not
@@ -7807,11 +7859,14 @@ class CommentViewComponent {
     messageIdentity(index, chatMessage) {
         return chatMessage.id;
     }
-    showNew() {
+    showNew(event) {
         return __awaiter(this, void 0, void 0, function* () {
             let naturalOrder = CommentsOrder.NEWEST;
-            if (this.source && this.source.sortOrder !== naturalOrder) {
-                this.sortOrderChanged.next(naturalOrder);
+            if (this.source && (this.source.sortOrder !== naturalOrder || this.source.filterMode !== FilterMode.ALL)) {
+                if (this.source.sortOrder !== naturalOrder)
+                    this.sortOrderChanged.next(naturalOrder);
+                if (this.source.filterMode !== FilterMode.ALL)
+                    this.filterModeChanged.next(FilterMode.ALL);
                 return;
             }
             this.isViewingMore = false;
@@ -7823,6 +7878,14 @@ class CommentViewComponent {
             this.olderMessages = overflow.concat(this.olderMessages);
             this.olderMessages.splice(this.maxMessages - this.maxVisibleMessages, this.olderMessages.length);
             this.hasMore = this.olderMessages.length > 0;
+            if (this.messages.length > 0) {
+                if (this.newestLast) {
+                    this.scrollToComment(this.messages[this.messages.length - 1].id);
+                }
+                else {
+                    this.scrollToComment(this.messages[0].id);
+                }
+            }
         });
     }
     showMore() {
@@ -7869,7 +7932,7 @@ class CommentViewComponent {
         let destination = this.messages;
         let bucket = this.olderMessages;
         let newestLast = this.newestLast;
-        if (this.isViewingMore) {
+        if (this.shouldHoldNewMessages) {
             destination = this.newMessages;
             bucket = null;
         }
@@ -7931,8 +7994,6 @@ class CommentViewComponent {
     }
     messageReceived(message) {
         this.addMessage(message);
-        if (this.isScrolledToLatest())
-            setTimeout(() => this.scrollToLatest());
     }
     isScrolledToLatest() {
         if (!this.messageContainer)
@@ -7949,10 +8010,32 @@ class CommentViewComponent {
         this.scrollToLatest();
     }
     scrollToLatest() {
-        if (!this.messageContainer)
+        if (!this.messageContainer) {
             return;
+        }
         const el = this.messageContainer.nativeElement;
-        el.scrollTop = el.scrollHeight;
+        el.scrollIntoView({ block: 'start' });
+        //el.scrollTop = el.scrollHeight;
+    }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    scrollToComment(commentId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (typeof window === 'undefined')
+                return;
+            yield this.waitForAllCommentsToLoad();
+            const comment = this.getElementForComment(commentId);
+            if (comment) {
+                comment.scrollIntoView({
+                    inline: 'center',
+                    block: 'center'
+                });
+            }
+        });
+    }
+    getElementForComment(commentId) {
+        return this.element.querySelector(`[data-comment-id="${commentId}"]`);
     }
     mentionsMe(message) {
         if (!this.currentUser)
@@ -7962,15 +8045,19 @@ class CommentViewComponent {
         return false;
     }
 }
-CommentViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentViewComponent, deps: [{ token: ChatBackendBase }], target: i0.ɵɵFactoryTarget.Component });
-CommentViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentViewComponent, selector: "banta-comment-view", inputs: { showEmptyState: "showEmptyState", allowReplies: "allowReplies", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", source: "source", genericAvatarUrl: "genericAvatarUrl", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", newestLast: "newestLast" }, outputs: { selected: "selected", messageEdited: "messageEdited", userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", sortOrderChanged: "sortOrderChanged" }, 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=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && (isViewingMore || customSortEnabled)\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\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            (click)=\"isViewingMore = 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            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && (isViewingMore || customSortEnabled)\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_download</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before]):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}.message-container{flex-grow:1;overflow-x:hidden;color:#111;background:white;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#111111}.empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.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:#222}a.nav.visible{opacity:1;pointer-events:initial}.loading-more{padding:2em;text-align:center;margin:0 auto;width:-moz-fit-content;width:fit-content}@media (max-width: 400px){.message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["maxLength", "message", "customMenuItems", "showReplyAction", "permissions", "mine", "editing", "genericAvatarUrl"], outputs: ["loaded", "userSelected", "usernameSelected", "avatarSelected", "reported", "liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared"] }] });
+CommentViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentViewComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+CommentViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentViewComponent, selector: "banta-comment-view", inputs: { showEmptyState: "showEmptyState", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", source: "source", genericAvatarUrl: "genericAvatarUrl", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", newestLast: "newestLast", holdNewMessages: "holdNewMessages" }, outputs: { selected: "selected", messageEdited: "messageEdited", userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", 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=\"message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <div class=\"top-sticky\">\r\n        <a *ngIf=\"!newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_upload</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\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            (click)=\"enableHoldOnClick ? (holdNewMessages = true) : undefined\"\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            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"nav-point bottom-sticky\">\r\n        <a *ngIf=\"newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_download</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before]):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}.message-container{flex-grow:1;color:#111;background:white;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#111111}.empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.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:#222}a.nav.visible{opacity:1;pointer-events:initial}.top-sticky{position:sticky;top:.5em;z-index:10}.bottom-sticky{position:sticky;bottom:3em;z-index:10}.loading-more{padding:2em;text-align:center;margin:0 auto;width:-moz-fit-content;width:fit-content}@media (max-width: 400px){.message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["maxLength", "message", "customMenuItems", "showReplyAction", "permissions", "mine", "editing", "genericAvatarUrl"], outputs: ["loaded", "userSelected", "usernameSelected", "avatarSelected", "reported", "liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'banta-comment-view', template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && (isViewingMore || customSortEnabled)\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\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            (click)=\"isViewingMore = 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            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && (isViewingMore || customSortEnabled)\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_download</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before]):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}.message-container{flex-grow:1;overflow-x:hidden;color:#111;background:white;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#111111}.empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.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:#222}a.nav.visible{opacity:1;pointer-events:initial}.loading-more{padding:2em;text-align:center;margin:0 auto;width:-moz-fit-content;width:fit-content}@media (max-width: 400px){.message-container{padding:0 0 3em}}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChatBackendBase }]; }, propDecorators: { showEmptyState: [{
+            args: [{ selector: 'banta-comment-view', template: "<div class=\"message-container\" #messageContainer>\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <div class=\"top-sticky\">\r\n        <a *ngIf=\"!newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_upload</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\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            (click)=\"enableHoldOnClick ? (holdNewMessages = true) : undefined\"\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            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <div class=\"nav-point bottom-sticky\">\r\n        <a *ngIf=\"newestLast\" mat-button class=\"nav\" [class.visible]=\"shouldShowNewMessageIndicator\" href=\"javascript:;\" (click)=\"showNew($event)\">\r\n            <mat-icon>file_download</mat-icon>\r\n            <ng-container *ngIf=\"newMessages.length >= 1\">\r\n                New ({{newMessages.length}})\r\n            </ng-container>\r\n            <ng-container *ngIf=\"newMessages.length == 0\">\r\n                Newest\r\n            </ng-container>\r\n        </a>\r\n    </div>\r\n    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before]):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}.message-container{flex-grow:1;color:#111;background:white;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#111111}.empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.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:#222}a.nav.visible{opacity:1;pointer-events:initial}.top-sticky{position:sticky;top:.5em;z-index:10}.bottom-sticky{position:sticky;bottom:3em;z-index:10}.loading-more{padding:2em;text-align:center;margin:0 auto;width:-moz-fit-content;width:fit-content}@media (max-width: 400px){.message-container{padding:0 0 3em}}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChatBackendBase }, { type: i0.ElementRef }]; }, propDecorators: { showEmptyState: [{
                 type: Input
             }], allowReplies: [{
                 type: Input
+            }], enableHoldOnClick: [{
+                type: Input
+            }], enableHoldOnScroll: [{
+                type: Input
             }], customMenuItems: [{
                 type: Input
             }], commentsQuery: [{
@@ -8016,8 +8103,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], newestLast: [{
                 type: Input
+            }], holdNewMessages: [{
+                type: Input
             }], sortOrderChanged: [{
                 type: Output
+            }], filterModeChanged: [{
+                type: Output
             }] } });
 
 class BantaReplySendOptionsDirective {
@@ -8207,6 +8298,7 @@ class CommentFieldComponent {
         this.allowAttachments = false;
         this.signInSelected = new Subject();
         this.editAvatarSelected = new Subject();
+        this.focusChange = new Subject();
         this.sending = false;
         this.expandError = false;
         this._text = '';
@@ -8472,7 +8564,11 @@ class CommentFieldComponent {
         this.completionFunc = completionFunc;
         this.showAutoComplete(this.completionFunc(this.completionPrefix));
     }
+    onFocus() {
+        this.focusChange.next(true);
+    }
     onBlur() {
+        this.focusChange.next(false);
         setTimeout(() => this.dismissAutoComplete(), 250);
     }
     insertEmoji(text) {
@@ -8541,10 +8637,10 @@ class CommentFieldComponent {
     }
 }
 CommentFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentFieldComponent, deps: [{ token: ChatBackendBase }], target: i0.ɵɵFactoryTarget.Component });
-CommentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentFieldComponent, selector: "banta-comment-field", inputs: { source: "source", user: "user", canComment: "canComment", signInState: "signInState", allowAttachments: "allowAttachments", transientMessage: "transientMessage", sendLabel: "sendLabel", signingInLabel: "signingInLabel", sendingLabel: "sendingLabel", label: "label", permissionDeniedLabel: "permissionDeniedLabel", signInLabel: "signInLabel", maxLength: "maxLength", placeholder: "placeholder", shouldInterceptMessageSend: "shouldInterceptMessageSend", hashtags: "hashtags", participants: "participants", genericAvatarUrl: "genericAvatarUrl", submit: "submit" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", textChanged: "textChanged", permissionDeniedError: "permissionDeniedError" }, host: { properties: { "class.can-comment": "this.canComment" } }, viewQueries: [{ propertyName: "autocompleteEl", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autocompleteContainerEl", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "textareaEl", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        attachmentScraper\r\n                        [(attachments)]=\"chatMessageAttachments\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"\r\n                        autocomplete=\"off\"\r\n                        ></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <ng-container *ngIf=\"indicatorState === 'transient'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{transientMessage}}\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'sending'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{sendingLabel}}...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'error'\">\r\n                        <div class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                            {{sendError.message}}\r\n                        </div>\r\n                    </ng-container>\r\n\r\n\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <banta-attachments \r\n                [attachments]=\"chatMessageAttachments\"\r\n                [editing]=\"true\"\r\n                (remove)=\"removeAttachment($event)\"\r\n                ></banta-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"buttonState === 'send'\">\r\n                    <mat-icon>chevron_right</mat-icon>\r\n                    <span class=\"label\">{{sendLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'sending'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <span class=\"label\">{{sendingLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'signing-in'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    {{signingInLabel}}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'permission-denied'\">\r\n                    {{permissionDeniedLabel}}\r\n                </ng-container>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>", styles: ["@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;animation-name:comment-field-appear;animation-duration:.8s;animation-delay:.4s;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:black;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:center;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .transient-message{display:flex;flex-direction:row;align-items:center;gap:.5em}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:2s max-width ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:black;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:initial}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row,.card-attachment{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}@media (max-width: 500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host:not(.can-comment) mat-form-field.message-field{display:none}:host:not(.can-comment) .text-container{display:none}:host.can-comment button.send .label{display:none}button.send{min-width:auto;margin-top:1.5em}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) :host:not(.can-comment) mat-form-field.message-field{display:none}:host-context(.banta-mobile) :host:not(.can-comment) .text-container{display:none}:host-context(.banta-mobile) :host.can-comment button.send .label{display:none}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "component", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: ["overlayX", "overlayY", "originX", "originY"], outputs: ["selected"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AttachmentButtonComponent, selector: "banta-attachment-button", outputs: ["addedAttachment", "attachmentError"] }, { kind: "directive", type: AttachmentScraperDirective, selector: "[attachmentScraper]", inputs: ["attachments"], outputs: ["attachmentsChange"] }] });
+CommentFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentFieldComponent, selector: "banta-comment-field", inputs: { source: "source", user: "user", canComment: "canComment", signInState: "signInState", allowAttachments: "allowAttachments", transientMessage: "transientMessage", sendLabel: "sendLabel", signingInLabel: "signingInLabel", sendingLabel: "sendingLabel", label: "label", permissionDeniedLabel: "permissionDeniedLabel", signInLabel: "signInLabel", maxLength: "maxLength", placeholder: "placeholder", shouldInterceptMessageSend: "shouldInterceptMessageSend", hashtags: "hashtags", participants: "participants", genericAvatarUrl: "genericAvatarUrl", submit: "submit" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", focusChange: "focusChange", textChanged: "textChanged", permissionDeniedError: "permissionDeniedError" }, host: { properties: { "class.can-comment": "this.canComment" } }, viewQueries: [{ propertyName: "autocompleteEl", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "autocompleteContainerEl", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "textareaEl", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        attachmentScraper\r\n                        [(attachments)]=\"chatMessageAttachments\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (focus)=\"onFocus()\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"\r\n                        autocomplete=\"off\"\r\n                        ></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <ng-container *ngIf=\"indicatorState === 'transient'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{transientMessage}}\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'sending'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{sendingLabel}}...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'error'\">\r\n                        <div class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                            {{sendError.message}}\r\n                        </div>\r\n                    </ng-container>\r\n\r\n\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <banta-attachments \r\n                [attachments]=\"chatMessageAttachments\"\r\n                [editing]=\"true\"\r\n                (remove)=\"removeAttachment($event)\"\r\n                ></banta-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"buttonState === 'send'\">\r\n                    <mat-icon>chevron_right</mat-icon>\r\n                    <span class=\"label\">{{sendLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'sending'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <span class=\"label\">{{sendingLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'signing-in'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    {{signingInLabel}}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'permission-denied'\">\r\n                    {{permissionDeniedLabel}}\r\n                </ng-container>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>", styles: ["@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;animation-name:comment-field-appear;animation-duration:.8s;animation-delay:.4s;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:black;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:center;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .transient-message{display:flex;flex-direction:row;align-items:center;gap:.5em}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:2s max-width ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:black;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:initial}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row,.card-attachment{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}@media (max-width: 500px){:host{margin:0}.avatar-container{display:none;width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host:not(.can-comment) mat-form-field.message-field{display:none}:host:not(.can-comment) .text-container{display:none}:host.can-comment button.send .label{display:none}button.send{min-width:auto;margin-top:1.5em}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{display:none;width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) :host:not(.can-comment) mat-form-field.message-field{display:none}:host-context(.banta-mobile) :host:not(.can-comment) .text-container{display:none}:host-context(.banta-mobile) :host.can-comment button.send .label{display:none}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "component", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: ["overlayX", "overlayY", "originX", "originY"], outputs: ["selected"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AttachmentButtonComponent, selector: "banta-attachment-button", outputs: ["addedAttachment", "attachmentError"] }, { kind: "directive", type: AttachmentScraperDirective, selector: "[attachmentScraper]", inputs: ["attachments"], outputs: ["attachmentsChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'banta-comment-field', template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        attachmentScraper\r\n                        [(attachments)]=\"chatMessageAttachments\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"\r\n                        autocomplete=\"off\"\r\n                        ></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <ng-container *ngIf=\"indicatorState === 'transient'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{transientMessage}}\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'sending'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{sendingLabel}}...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'error'\">\r\n                        <div class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                            {{sendError.message}}\r\n                        </div>\r\n                    </ng-container>\r\n\r\n\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <banta-attachments \r\n                [attachments]=\"chatMessageAttachments\"\r\n                [editing]=\"true\"\r\n                (remove)=\"removeAttachment($event)\"\r\n                ></banta-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"buttonState === 'send'\">\r\n                    <mat-icon>chevron_right</mat-icon>\r\n                    <span class=\"label\">{{sendLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'sending'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <span class=\"label\">{{sendingLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'signing-in'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    {{signingInLabel}}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'permission-denied'\">\r\n                    {{permissionDeniedLabel}}\r\n                </ng-container>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>", styles: ["@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;animation-name:comment-field-appear;animation-duration:.8s;animation-delay:.4s;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:black;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:center;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .transient-message{display:flex;flex-direction:row;align-items:center;gap:.5em}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:2s max-width ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:black;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:initial}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row,.card-attachment{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}@media (max-width: 500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host:not(.can-comment) mat-form-field.message-field{display:none}:host:not(.can-comment) .text-container{display:none}:host.can-comment button.send .label{display:none}button.send{min-width:auto;margin-top:1.5em}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) :host:not(.can-comment) mat-form-field.message-field{display:none}:host-context(.banta-mobile) :host:not(.can-comment) .text-container{display:none}:host-context(.banta-mobile) :host.can-comment button.send .label{display:none}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}\n"] }]
+            args: [{ selector: 'banta-comment-field', template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field class=\"message-field\" appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        attachmentScraper\r\n                        [(attachments)]=\"chatMessageAttachments\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (focus)=\"onFocus()\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"\r\n                        autocomplete=\"off\"\r\n                        ></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <ng-container *ngIf=\"indicatorState === 'transient'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" [matTooltip]=\"transientMessage\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{transientMessage}}\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'sending'\">\r\n                        <div class=\"transient-message\" [class.expanded]=\"true\" (click)=\"alertError()\">\r\n                            <mat-spinner [inline]=\"true\" [diameter]=\"15\"></mat-spinner>\r\n                            {{sendingLabel}}...\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"indicatorState === 'error'\">\r\n                        <div class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                            <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                            {{sendError.message}}\r\n                        </div>\r\n                    </ng-container>\r\n\r\n\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <banta-attachments \r\n                [attachments]=\"chatMessageAttachments\"\r\n                [editing]=\"true\"\r\n                (remove)=\"removeAttachment($event)\"\r\n                ></banta-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"buttonState === 'send'\">\r\n                    <mat-icon>chevron_right</mat-icon>\r\n                    <span class=\"label\">{{sendLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'sending'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <span class=\"label\">{{sendingLabel}}</span>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'signing-in'\">\r\n                    <mat-spinner class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    {{signingInLabel}}\r\n                </ng-container>\r\n                <ng-container *ngIf=\"buttonState === 'permission-denied'\">\r\n                    {{permissionDeniedLabel}}\r\n                </ng-container>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>", styles: ["@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;animation-name:comment-field-appear;animation-duration:.8s;animation-delay:.4s;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:black;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:center;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .transient-message{display:flex;flex-direction:row;align-items:center;gap:.5em}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:2s max-width ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:black;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:initial}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-moz-fit-content;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row,.card-attachment{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}@media (max-width: 500px){:host{margin:0}.avatar-container{display:none;width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host:not(.can-comment) mat-form-field.message-field{display:none}:host:not(.can-comment) .text-container{display:none}:host.can-comment button.send .label{display:none}button.send{min-width:auto;margin-top:1.5em}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{display:none;width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) :host:not(.can-comment) mat-form-field.message-field{display:none}:host-context(.banta-mobile) :host:not(.can-comment) .text-container{display:none}:host-context(.banta-mobile) :host.can-comment button.send .label{display:none}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}\n"] }]
         }], ctorParameters: function () { return [{ type: ChatBackendBase }]; }, propDecorators: { source: [{
                 type: Input
             }], user: [{
@@ -8562,6 +8658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }], editAvatarSelected: [{
                 type: Output
+            }], focusChange: [{
+                type: Output
             }], transientMessage: [{
                 type: Input
             }], sendLabel: [{
@@ -8605,36 +8703,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }] } });
 
-class CommentSortComponent {
-    constructor() {
-        this.commentsOrder = CommentsOrder;
-        this._sortChange = new Subject();
-        this._sort = CommentsOrder.LIKES;
-    }
-    get sort() {
-        return this._sort;
-    }
-    set sort(value) {
-        if (this._sort !== value) {
-            this._sort = value;
-            setTimeout(() => this._sortChange.next(value));
-        }
-    }
-    get sortChange() {
-        return this._sortChange.asObservable();
-    }
-}
-CommentSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CommentSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentSortComponent, selector: "banta-comment-sort", inputs: { sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n  <mat-label>Sort by</mat-label>\r\n  <mat-select [(value)]=\"sort\" >\r\n    <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n  </mat-select>\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentSortComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'banta-comment-sort', template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n  <mat-label>Sort by</mat-label>\r\n  <mat-select [(value)]=\"sort\" >\r\n    <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n  </mat-select>\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
-        }], propDecorators: { sort: [{
-                type: Input
-            }], sortChange: [{
-                type: Output
-            }] } });
-
 /**
  * Comments component
  */
@@ -8685,7 +8753,6 @@ class BantaCommentsComponent {
          */
         this._sourceIsOwned = false;
         this._subs = new Subscription();
-        this._sortOrder = CommentsOrder.NEWEST;
         this.selectedMessageVisible = false;
         // Inputs
         this.signInLabel = 'Sign In';
@@ -8705,6 +8772,8 @@ class BantaCommentsComponent {
             { hashtag: 'timeout', description: 'Cause a slow timeout error' },
             { hashtag: 'slow', description: 'Be slow when this message is posted' },
         ];
+        this._sortOrder = CommentsOrder.NEWEST;
+        this._filterMode = FilterMode.ALL;
         this.loadingSharedComment = false;
         this.sharedCommentMissing = false;
         this.sendMessage = (message) => __awaiter(this, void 0, void 0, function* () {
@@ -8714,9 +8783,10 @@ class BantaCommentsComponent {
                 if (!intercept) {
                     yield this.source.send(message);
                 }
-                if (this.source.sortOrder !== CommentsOrder.NEWEST) {
+                if (this.source.sortOrder !== CommentsOrder.NEWEST)
                     this.sortOrder = CommentsOrder.NEWEST;
-                }
+                if (this.source.filterMode !== FilterMode.ALL)
+                    this.filterMode = FilterMode.ALL;
                 return true;
             }
             catch (e) {
@@ -8828,7 +8898,7 @@ class BantaCommentsComponent {
                 return;
             setTimeout(() => __awaiter(this, void 0, void 0, function* () {
                 console.log(`[banta-comments] Subscribing to topic source '${topicID}'`);
-                this.source = yield this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder });
+                this.source = yield this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder, filterMode: this.filterMode });
                 this._sourceIsOwned = true;
             }));
         });
@@ -8975,15 +9045,56 @@ class BantaCommentsComponent {
     get usernameSelected() { return this._usernameSelected.asObservable(); }
     get avatarSelected() { return this._avatarSelected.asObservable(); }
     get shared() { return this._shared.asObservable(); }
+    reloadSource() {
+        clearTimeout(this._reloadSourceTimeout);
+        this._reloadSourceTimeout = setTimeout(() => {
+            this.setSourceFromTopicID(this.topicID);
+        });
+    }
     get sortOrder() { return this._sortOrder; }
     set sortOrder(value) {
         if (this._sortOrder !== value) {
             this._sortOrder = value;
-            setTimeout(() => {
-                this.setSourceFromTopicID(this.topicID);
-            });
+            this.reloadSource();
         }
     }
+    get filterMode() { return this._filterMode; }
+    set filterMode(value) {
+        if (this._filterMode !== value) {
+            this._filterMode = value;
+            this.reloadSource();
+        }
+    }
+    get filterModes() {
+        return [
+            FilterMode.ALL,
+            FilterMode.MINE,
+            FilterMode.MY_LIKES,
+            FilterMode.THREADS
+        ];
+    }
+    get filterModeLabels() {
+        return {
+            [FilterMode.ALL]: 'All',
+            [FilterMode.MINE]: 'Mine',
+            [FilterMode.MY_LIKES]: 'Involving Me',
+            [FilterMode.THREADS]: 'My Likes'
+        };
+    }
+    get sortOrders() {
+        return [
+            CommentsOrder.NEWEST,
+            CommentsOrder.OLDEST,
+            CommentsOrder.LIKES
+        ];
+    }
+    get sortOrderLabels() {
+        return {
+            [CommentsOrder.NEWEST]: 'Newest',
+            [CommentsOrder.OLDEST]: 'Oldest',
+            [CommentsOrder.LIKES]: 'Likes'
+        };
+    }
     // UI Interactions
     scrollToComment(commentId) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -9273,12 +9384,12 @@ class BantaCommentsComponent {
         });
     }
 }
-BantaCommentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaCommentsComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }, { token: i2$3.ActivatedRoute }, { token: i3$3.MatSnackBar }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-BantaCommentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaCommentsComponent, selector: "banta-comments", inputs: { customMenuItems: "customMenuItems", maxCommentLength: "maxCommentLength", loadingMessages: "loadingMessages", useInlineReplies: "useInlineReplies", signInLabel: "signInLabel", sendLabel: "sendLabel", signingInLabel: "signingInLabel", replyLabel: "replyLabel", sendingLabel: "sendingLabel", permissionDeniedLabel: "permissionDeniedLabel", postCommentLabel: "postCommentLabel", postReplyLabel: "postReplyLabel", allowAttachments: "allowAttachments", fixedHeight: "fixedHeight", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", genericAvatarUrl: "genericAvatarUrl", shouldInterceptMessageSend: "shouldInterceptMessageSend", participants: "participants", source: "source", hashtags: "hashtags", topicID: "topicID" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", permissionDeniedError: "permissionDeniedError", upvoted: "upvoted", reported: "reported", selected: "selected", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared" }, 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            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"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                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [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            [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            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading 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            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"toggleSelectedMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [signingInLabel]=\"signingInLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [signInState]=\"source?.signInState\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <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:-moz-fit-content;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:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:black;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}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["maxLength", "message", "customMenuItems", "showReplyAction", "permissions", "mine", "editing", "genericAvatarUrl"], outputs: ["loaded", "userSelected", "usernameSelected", "avatarSelected", "reported", "liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["showEmptyState", "allowReplies", "customMenuItems", "fixedHeight", "selectedMessage", "source", "genericAvatarUrl", "maxMessages", "maxVisibleMessages", "newestLast"], outputs: ["selected", "messageEdited", "userSelected", "reported", "liked", "unliked", "usernameSelected", "avatarSelected", "shared", "deleted", "sortOrderChanged"] }, { 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", "submit"], outputs: ["signInSelected", "editAvatarSelected", "textChanged", "permissionDeniedError"] }, { kind: "component", type: CommentSortComponent, selector: "banta-comment-sort", inputs: ["sort"], outputs: ["sortChange"] }] });
+BantaCommentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 });
+BantaCommentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaCommentsComponent, selector: "banta-comments", inputs: { customMenuItems: "customMenuItems", maxCommentLength: "maxCommentLength", loadingMessages: "loadingMessages", useInlineReplies: "useInlineReplies", signInLabel: "signInLabel", sendLabel: "sendLabel", signingInLabel: "signingInLabel", replyLabel: "replyLabel", sendingLabel: "sendingLabel", permissionDeniedLabel: "permissionDeniedLabel", postCommentLabel: "postCommentLabel", postReplyLabel: "postReplyLabel", allowAttachments: "allowAttachments", fixedHeight: "fixedHeight", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", genericAvatarUrl: "genericAvatarUrl", shouldInterceptMessageSend: "shouldInterceptMessageSend", participants: "participants", source: "source", hashtags: "hashtags", topicID: "topicID" }, outputs: { signInSelected: "signInSelected", editAvatarSelected: "editAvatarSelected", permissionDeniedError: "permissionDeniedError", upvoted: "upvoted", reported: "reported", selected: "selected", userSelected: "userSelected", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared" }, 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            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"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                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [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            [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            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <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            (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                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [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                                (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                                (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:-moz-fit-content;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:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:black;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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["maxLength", "message", "customMenuItems", "showReplyAction", "permissions", "mine", "editing", "genericAvatarUrl"], outputs: ["loaded", "userSelected", "usernameSelected", "avatarSelected", "reported", "liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["showEmptyState", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "source", "genericAvatarUrl", "maxMessages", "maxVisibleMessages", "newestLast", "holdNewMessages"], outputs: ["selected", "messageEdited", "userSelected", "reported", "liked", "unliked", "usernameSelected", "avatarSelected", "shared", "deleted", "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", "submit"], outputs: ["signInSelected", "editAvatarSelected", "focusChange", "textChanged", "permissionDeniedError"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"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                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [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            [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            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading 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            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"toggleSelectedMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [signingInLabel]=\"signingInLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [signInState]=\"source?.signInState\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n    <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:-moz-fit-content;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:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:black;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}\n"] }]
-        }], ctorParameters: function () { return [{ type: ChatBackendBase }, { type: i0.ElementRef }, { type: i2$3.ActivatedRoute }, { type: i3$3.MatSnackBar }, { type: i0.NgZone }]; }, propDecorators: { isMobileSized: [{
+            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            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"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                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [signingInLabel]=\"signingInLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [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            [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            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <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            (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                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [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                                (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                                (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:-moz-fit-content;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:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width: 500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:black;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChatBackendBase }, { type: i0.ElementRef }, { type: i2$2.ActivatedRoute }, { type: i3$2.MatSnackBar }, { type: i0.NgZone }]; }, propDecorators: { isMobileSized: [{
                 type: HostBinding,
                 args: ['class.banta-mobile']
             }], sendReplyOptionsTemplate: [{
@@ -9719,7 +9830,7 @@ class BantaChatComponent {
     }
 }
 BantaChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaChatComponent, deps: [{ token: ChatBackendBase }], target: i0.ɵɵFactoryTarget.Component });
-BantaChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaChatComponent, selector: "banta-chat", inputs: { shouldInterceptMessageSend: "shouldInterceptMessageSend", source: "source", topicID: "topicID", signInLabel: "signInLabel", sendLabel: "sendLabel", permissionDeniedLabel: "permissionDeniedLabel", messageFieldPlaceholder: "messageFieldPlaceholder", emptyLabel: "emptyLabel" }, outputs: { selected: "selected", reported: "reported", upvoted: "upvoted", userSelected: "userSelected", permissionDeniedError: "permissionDeniedError", signInSelected: "signInSelected", received: "received" }, viewQueries: [{ propertyName: "chatView", first: true, predicate: ["chatView"], descendants: true }, { propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<banta-chat-view \r\n    #chatView\r\n    [source]=\"source\"\r\n    [emptyLabel]=\"emptyLabel\"\r\n    (upvoted)=\"upvote($event)\"\r\n    (reported)=\"report($event)\"\r\n    (selected)=\"select($event)\"\r\n    (received)=\"onReceived($event)\"\r\n    (userSelected)=\"selectUser($event)\"\r\n    ></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    \r\n    <div class=\"entry-container\">\r\n        <input\r\n            #input\r\n            type=\"text\"\r\n            name=\"message\" \r\n            autocomplete=\"off\"\r\n            enterkeyhint=\"send\"\r\n            [placeholder]=\"messageFieldPlaceholder\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessage.message\" />\r\n            \r\n        <emoji-selector-button\r\n            (selected)=\"insertEmoji($event)\"\r\n            overlayY=\"bottom\"\r\n            overlayX=\"end\"\r\n            originY=\"top\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n\r\n        <ng-container *ngIf=\"!user\">\r\n            <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button *ngIf=\"canChat\" [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n            <button *ngIf=\"!canChat\" type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>", styles: [":host{display:flex;flex-direction:column;border-radius:5px;padding:10px;flex-grow:1;font-size:10pt;min-height:1px}.entry-container{display:flex;flex-direction:row;flex-grow:1;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:hover,.entry-container input:-webkit-autofill:focus{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0px 1000px #211e07 inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:initial}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:black;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:white;color:#000;border:1px solid #ccc;width:100%;height:2.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:black;color:#fff;border:1px solid #333}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: ["overlayX", "overlayY", "originX", "originY"], outputs: ["selected"] }, { kind: "component", type: ChatViewComponent, selector: "banta-chat-view", inputs: ["source", "maxMessages", "emptyLabel"], outputs: ["selected", "userSelected", "reported", "upvoted", "received"] }] });
+BantaChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaChatComponent, selector: "banta-chat", inputs: { shouldInterceptMessageSend: "shouldInterceptMessageSend", source: "source", topicID: "topicID", signInLabel: "signInLabel", sendLabel: "sendLabel", permissionDeniedLabel: "permissionDeniedLabel", messageFieldPlaceholder: "messageFieldPlaceholder", emptyLabel: "emptyLabel" }, outputs: { selected: "selected", reported: "reported", upvoted: "upvoted", userSelected: "userSelected", permissionDeniedError: "permissionDeniedError", signInSelected: "signInSelected", received: "received" }, viewQueries: [{ propertyName: "chatView", first: true, predicate: ["chatView"], descendants: true }, { propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<banta-chat-view \r\n    #chatView\r\n    [source]=\"source\"\r\n    [emptyLabel]=\"emptyLabel\"\r\n    (upvoted)=\"upvote($event)\"\r\n    (reported)=\"report($event)\"\r\n    (selected)=\"select($event)\"\r\n    (received)=\"onReceived($event)\"\r\n    (userSelected)=\"selectUser($event)\"\r\n    ></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    \r\n    <div class=\"entry-container\">\r\n        <input\r\n            #input\r\n            type=\"text\"\r\n            name=\"message\" \r\n            autocomplete=\"off\"\r\n            enterkeyhint=\"send\"\r\n            [placeholder]=\"messageFieldPlaceholder\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessage.message\" />\r\n            \r\n        <emoji-selector-button\r\n            (selected)=\"insertEmoji($event)\"\r\n            overlayY=\"bottom\"\r\n            overlayX=\"end\"\r\n            originY=\"top\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n\r\n        <ng-container *ngIf=\"!user\">\r\n            <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button *ngIf=\"canChat\" [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n            <button *ngIf=\"!canChat\" type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>", styles: [":host{display:flex;flex-direction:column;border-radius:5px;padding:10px;flex-grow:1;font-size:10pt;min-height:1px}.entry-container{display:flex;flex-direction:row;flex-grow:1;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:hover,.entry-container input:-webkit-autofill:focus{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0px 1000px #211e07 inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:initial}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:black;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:white;color:#000;border:1px solid #ccc;width:100%;height:2.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:black;color:#fff;border:1px solid #333}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: ["overlayX", "overlayY", "originX", "originY"], outputs: ["selected"] }, { kind: "component", type: ChatViewComponent, selector: "banta-chat-view", inputs: ["source", "maxMessages", "emptyLabel"], outputs: ["selected", "userSelected", "reported", "upvoted", "received"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaChatComponent, decorators: [{
             type: Component,
             args: [{ selector: 'banta-chat', template: "<banta-chat-view \r\n    #chatView\r\n    [source]=\"source\"\r\n    [emptyLabel]=\"emptyLabel\"\r\n    (upvoted)=\"upvote($event)\"\r\n    (reported)=\"report($event)\"\r\n    (selected)=\"select($event)\"\r\n    (received)=\"onReceived($event)\"\r\n    (userSelected)=\"selectUser($event)\"\r\n    ></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    \r\n    <div class=\"entry-container\">\r\n        <input\r\n            #input\r\n            type=\"text\"\r\n            name=\"message\" \r\n            autocomplete=\"off\"\r\n            enterkeyhint=\"send\"\r\n            [placeholder]=\"messageFieldPlaceholder\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessage.message\" />\r\n            \r\n        <emoji-selector-button\r\n            (selected)=\"insertEmoji($event)\"\r\n            overlayY=\"bottom\"\r\n            overlayX=\"end\"\r\n            originY=\"top\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n\r\n        <ng-container *ngIf=\"!user\">\r\n            <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button *ngIf=\"canChat\" [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n            <button *ngIf=\"!canChat\" type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>", styles: [":host{display:flex;flex-direction:column;border-radius:5px;padding:10px;flex-grow:1;font-size:10pt;min-height:1px}.entry-container{display:flex;flex-direction:row;flex-grow:1;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:hover,.entry-container input:-webkit-autofill:focus{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0px 1000px #211e07 inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:initial}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:black;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:white;color:#000;border:1px solid #ccc;width:100%;height:2.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:black;color:#fff;border:1px solid #333}\n"] }]
@@ -10173,12 +10284,12 @@ class BantaComponent {
         this.showAux(`Report message from @${message.user.username}`, 'report');
     }
 }
-BantaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaComponent, deps: [{ token: ChatBackendBase }, { token: i2$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-BantaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaComponent, selector: "banta", inputs: { topicID: "topicID", chatLabel: "chatLabel", commentsLabel: "commentsLabel" }, 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}} (@{{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                @{{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                    @{{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                    @{{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                            @{{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 @{{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                            @{{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                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"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            (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:-moz-fit-content;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:black;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:black;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:rgba(0,0,0,.5)}.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:0;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:black}.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$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: ["maxLength", "message", "customMenuItems", "showReplyAction", "permissions", "mine", "editing", "genericAvatarUrl"], outputs: ["loaded", "userSelected", "usernameSelected", "avatarSelected", "reported", "liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["showEmptyState", "allowReplies", "customMenuItems", "fixedHeight", "selectedMessage", "source", "genericAvatarUrl", "maxMessages", "maxVisibleMessages", "newestLast"], outputs: ["selected", "messageEdited", "userSelected", "reported", "liked", "unliked", "usernameSelected", "avatarSelected", "shared", "deleted", "sortOrderChanged"] }, { kind: "component", type: BantaCommentsComponent, selector: "banta-comments", inputs: ["customMenuItems", "maxCommentLength", "loadingMessages", "useInlineReplies", "signInLabel", "sendLabel", "signingInLabel", "replyLabel", "sendingLabel", "permissionDeniedLabel", "postCommentLabel", "postReplyLabel", "allowAttachments", "fixedHeight", "maxMessages", "maxVisibleMessages", "genericAvatarUrl", "shouldInterceptMessageSend", "participants", "source", "hashtags", "topicID"], outputs: ["signInSelected", "editAvatarSelected", "permissionDeniedError", "upvoted", "reported", "selected", "userSelected", "usernameSelected", "avatarSelected", "shared"] }, { kind: "component", type: BantaChatComponent, selector: "banta-chat", inputs: ["shouldInterceptMessageSend", "source", "topicID", "signInLabel", "sendLabel", "permissionDeniedLabel", "messageFieldPlaceholder", "emptyLabel"], outputs: ["selected", "reported", "upvoted", "userSelected", "permissionDeniedError", "signInSelected", "received"] }, { kind: "component", type: i2$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LiveMessageComponent, selector: "banta-live-message", inputs: ["message"], outputs: ["upvoted", "reported", "selected"] }] });
+BantaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaComponent, deps: [{ token: ChatBackendBase }, { token: i2$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
+BantaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BantaComponent, selector: "banta", inputs: { topicID: "topicID", chatLabel: "chatLabel", commentsLabel: "commentsLabel" }, 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}} (@{{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                @{{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                    @{{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                    @{{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                            @{{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 @{{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                            @{{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                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"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            (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:-moz-fit-content;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:black;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:black;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:rgba(0,0,0,.5)}.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:0;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:black}.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.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: ["maxLength", "message", "customMenuItems", "showReplyAction", "permissions", "mine", "editing", "genericAvatarUrl"], outputs: ["loaded", "userSelected", "usernameSelected", "avatarSelected", "reported", "liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared"] }, { kind: "component", type: CommentViewComponent, selector: "banta-comment-view", inputs: ["showEmptyState", "allowReplies", "enableHoldOnClick", "enableHoldOnScroll", "customMenuItems", "fixedHeight", "selectedMessage", "source", "genericAvatarUrl", "maxMessages", "maxVisibleMessages", "newestLast", "holdNewMessages"], outputs: ["selected", "messageEdited", "userSelected", "reported", "liked", "unliked", "usernameSelected", "avatarSelected", "shared", "deleted", "sortOrderChanged", "filterModeChanged"] }, { kind: "component", type: BantaCommentsComponent, selector: "banta-comments", inputs: ["customMenuItems", "maxCommentLength", "loadingMessages", "useInlineReplies", "signInLabel", "sendLabel", "signingInLabel", "replyLabel", "sendingLabel", "permissionDeniedLabel", "postCommentLabel", "postReplyLabel", "allowAttachments", "fixedHeight", "maxMessages", "maxVisibleMessages", "genericAvatarUrl", "shouldInterceptMessageSend", "participants", "source", "hashtags", "topicID"], outputs: ["signInSelected", "editAvatarSelected", "permissionDeniedError", "upvoted", "reported", "selected", "userSelected", "usernameSelected", "avatarSelected", "shared"] }, { kind: "component", type: BantaChatComponent, selector: "banta-chat", inputs: ["shouldInterceptMessageSend", "source", "topicID", "signInLabel", "sendLabel", "permissionDeniedLabel", "messageFieldPlaceholder", "emptyLabel"], outputs: ["selected", "reported", "upvoted", "userSelected", "permissionDeniedError", "signInSelected", "received"] }, { kind: "component", type: i2$1.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-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: LiveMessageComponent, selector: "banta-live-message", inputs: ["message"], outputs: ["upvoted", "reported", "selected"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaComponent, decorators: [{
             type: Component,
             args: [{ selector: `banta`, template: "\r\n<mat-menu #userMenu=\"matMenu\">\r\n    <ng-container *ngIf=\"currentUser\">\r\n        <button [disabled]=\"true\" mat-menu-item>{{currentUser.displayName}} (@{{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                @{{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                    @{{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                    @{{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                            @{{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 @{{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                            @{{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                (upvoted)=\"upvoteMessage(pointOpen)\"\r\n                (userSelected)=\"showProfile(pointOpen.user)\"\r\n                (reported)=\"reportMessage(pointOpen)\"\r\n                [showReplyAction]=\"false\"\r\n                [message]=\"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            (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:-moz-fit-content;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:black;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:black;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:rgba(0,0,0,.5)}.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:0;min-width:initial;max-width:100%}.points,.firehose,.aux{position:absolute;inset:2em 0 0;z-index:0;background:black}.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"] }]
-        }], ctorParameters: function () { return [{ type: ChatBackendBase }, { type: i2$4.MatDialog }]; }, propDecorators: { firehose: [{
+        }], ctorParameters: function () { return [{ type: ChatBackendBase }, { type: i2$3.MatDialog }]; }, propDecorators: { firehose: [{
                 type: ViewChild,
                 args: ['firehose', { static: true }]
             }], topicID: [{
@@ -10243,6 +10354,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+class CommentSortComponent {
+    constructor() {
+        this.commentsOrder = CommentsOrder;
+        this._sortChange = new Subject();
+        this._sort = CommentsOrder.LIKES;
+    }
+    get sort() {
+        return this._sort;
+    }
+    set sort(value) {
+        if (this._sort !== value) {
+            this._sort = value;
+            setTimeout(() => this._sortChange.next(value));
+        }
+    }
+    get sortChange() {
+        return this._sortChange.asObservable();
+    }
+}
+CommentSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentSortComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CommentSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: CommentSortComponent, selector: "banta-comment-sort", inputs: { sort: "sort" }, outputs: { sortChange: "sortChange" }, ngImport: i0, template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n  <mat-label>Sort</mat-label>\r\n  <mat-select [(value)]=\"sort\" >\r\n    <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n  </mat-select>\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i2$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i3$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: CommentSortComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'banta-comment-sort', template: "<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n  <mat-label>Sort</mat-label>\r\n  <mat-select [(value)]=\"sort\" >\r\n    <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n    <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n  </mat-select>\r\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { sort: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }] } });
+
 const COMPONENTS = [
     CommentComponent,
     CommentViewComponent,
@@ -10329,12 +10470,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 
 class ChatSource extends SocketRPC {
-    constructor(backend, identifier, parentIdentifier, sortOrder) {
+    constructor(backend, identifier, parentIdentifier, options) {
         super();
         this.backend = backend;
         this.identifier = identifier;
         this.parentIdentifier = parentIdentifier;
-        this.sortOrder = sortOrder;
         this.subscription = new Subscription();
         this._state = 'connecting';
         this._connectionStateChanged = new Subject();
@@ -10350,8 +10490,17 @@ class ChatSource extends SocketRPC {
         this._messageSent = new Subject();
         this._messageObserved = new Subject();
         this.messages = [];
+        this.options = options !== null && options !== void 0 ? options : {};
         this.ready = new Promise(resolve => this.markReady = resolve);
     }
+    get sortOrder() {
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.sortOrder;
+    }
+    get filterMode() {
+        var _a;
+        return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filterMode;
+    }
     get state() {
         return this._state;
     }
@@ -10438,7 +10587,7 @@ class ChatSource extends SocketRPC {
     subscribeToTopic() {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                yield this.immediatePeer.subscribe(this.identifier, this.parentIdentifier, this.sortOrder);
+                yield this.immediatePeer.subscribe(this.identifier, this.parentIdentifier, this.options.sortOrder, this.options.filterMode);
                 this.subscribeAttempt = 0;
                 this._errorState = undefined;
                 this.state = this.wasRestored ? 'restored' : 'connected';
@@ -10606,13 +10755,13 @@ class ChatBackend extends ChatBackendBase {
     }
     getSourceForTopic(topicId, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield new ChatSource(this, topicId, undefined, (options === null || options === void 0 ? void 0 : options.sortOrder) || CommentsOrder.NEWEST)
+            return yield new ChatSource(this, topicId, undefined, Object.assign({ sortOrder: CommentsOrder.NEWEST, filterMode: FilterMode.ALL }, options))
                 .bind(yield this.connectToService());
         });
     }
     getSourceForThread(topicId, messageId, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield new ChatSource(this, topicId, messageId, (options === null || options === void 0 ? void 0 : options.sortOrder) || CommentsOrder.NEWEST)
+            return yield new ChatSource(this, topicId, messageId, Object.assign({ sortOrder: CommentsOrder.NEWEST, filterMode: FilterMode.ALL }, options))
                 .bind(yield this.connectToService());
         });
     }