@banta/sdk 4.7.7 → 4.7.8

package/esm2020/lib/comments/comment/comment.component.mjs

@@ -155,10 +155,10 @@ export 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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.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.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: i9.TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: i10.BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i12.BantaMarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: i13.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.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.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.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: i9.TimestampComponent, selector: "banta-timestamp", inputs: ["value"] }, { kind: "component", type: i10.BantaAttachmentsComponent, selector: "banta-attachments", inputs: ["attachments", "editing"], outputs: ["remove", "loaded"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i12.BantaMarkdownToHtmlPipe, name: "markdownToHtml" }, { kind: "pipe", type: i13.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}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { maxLength: [{
                 type: Input
             }], isNew: [{

package/esm2020/lib/common/markdown-to-html.pipe.mjs

@@ -1,6 +1,8 @@
-import { Pipe } from '@angular/core';
+import { Pipe, Inject, Optional } from '@angular/core';
 import * as marked from 'marked';
 import createDOMPurify from 'dompurify';
+import twemoji from 'twemoji';
+import { BANTA_SDK_OPTIONS } from '../sdk-options';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/platform-browser";
 const underline = {
@@ -26,8 +28,9 @@ marked.marked.use({
     extensions: [underline]
 });
 export class BantaMarkdownToHtmlPipe {
-    constructor(sanitizer) {
+    constructor(sanitizer, sdkOptions) {
         this.sanitizer = sanitizer;
+        this.sdkOptions = sdkOptions;
         this.renderer = new marked.Renderer({
             headerPrefix: ''
         });
@@ -37,6 +40,9 @@ export class BantaMarkdownToHtmlPipe {
             return html.replace(/^<a /, '<a target="_blank" rel="noopener noreferrer nofollow" ');
         };
     }
+    get emojiUrl() {
+        return this.sdkOptions?.emojiUrl ?? 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
+    }
     transform(value) {
         if (!value)
             return '';
@@ -57,20 +63,27 @@ export class BantaMarkdownToHtmlPipe {
                 node.setAttribute('xlink:show', 'new');
             }
         });
-        return this.sanitizer.bypassSecurityTrustHtml(purifier.sanitize(marked.marked.parse(value, {
+        value = marked.marked.parse(value, {
             renderer: this.renderer
-        }), {
+        });
+        value = twemoji.parse(value, { base: this.emojiUrl });
+        return this.sanitizer.bypassSecurityTrustHtml(purifier.sanitize(value, {
             FORBID_TAGS: ['h1', 'h2', 'h3', 'h4'],
             KEEP_CONTENT: true
         }));
     }
 }
-BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
 BantaMarkdownToHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, name: "markdownToHtml" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'markdownToHtml'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFya2Rvd24tdG8taHRtbC5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2RrL3NyYy9saWIvY29tbW9uL21hcmtkb3duLXRvLWh0bWwucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQztBQUNwRCxPQUFPLEtBQUssTUFBTSxNQUFNLFFBQVEsQ0FBQztBQUNqQyxPQUFPLGVBQWUsTUFBTSxXQUFXLENBQUM7OztBQUd4QyxNQUFNLFNBQVMsR0FBRztJQUNkLElBQUksRUFBRSxXQUFXO0lBQ2pCLEtBQUssRUFBRSxRQUFRO0lBQ2YsS0FBSyxDQUFDLEdBQUcsSUFBSSxPQUFPLEdBQUcsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUMvQyxTQUFTLENBQUMsR0FBRyxFQUFFLE1BQU07UUFDakIsTUFBTSxJQUFJLEdBQUcsZ0JBQWdCLENBQUMsQ0FBQywrQkFBK0I7UUFDOUQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM3QixJQUFJLEtBQUssRUFBRTtZQUNQLE9BQU87Z0JBQ0gsSUFBSSxFQUFFLFdBQVc7Z0JBQ2pCLEdBQUcsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDO2dCQUNiLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsRUFBRSwrQkFBK0I7YUFDbEYsQ0FBQztTQUNMO0lBQ0wsQ0FBQztJQUNELFFBQVEsQ0FBQyxLQUFLO1FBQ1YsT0FBTyxNQUFNLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQzNELENBQUM7Q0FDSixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUM7SUFDZCxVQUFVLEVBQUUsQ0FBQyxTQUFTLENBQUM7Q0FDMUIsQ0FBQyxDQUFDO0FBS0gsTUFBTSxPQUFPLHVCQUF1QjtJQUNoQyxZQUNZLFNBQXVCO1FBQXZCLGNBQVMsR0FBVCxTQUFTLENBQWM7UUFFL0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLE1BQU0sQ0FBQyxRQUFRLENBQUM7WUFDaEMsWUFBWSxFQUFFLEVBQUU7U0FDbkIsQ0FBQyxDQUFDO1FBQ0gsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUM7UUFDeEMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxFQUFFO1lBQ3ZDLE1BQU0sSUFBSSxHQUFHLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxDQUFDO1lBQ2pFLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsd0RBQXdELENBQUMsQ0FBQztRQUMxRixDQUFDLENBQUM7SUFDTixDQUFDO0lBR0QsU0FBUyxDQUFDLEtBQWE7UUFDbkIsSUFBSSxDQUFDLEtBQUs7WUFDTixPQUFPLEVBQUUsQ0FBQztRQUVkLElBQUksUUFBUSxHQUFHLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUV2Qyx1SEFBdUg7UUFDdkgsaURBQWlEO1FBQ2pELFFBQVEsQ0FBQyxPQUFPLENBQUMseUJBQXlCLEVBQUUsVUFBUyxJQUF1QztZQUN4RixrREFBa0Q7WUFDbEQsSUFBSSxRQUFRLElBQUksSUFBSSxFQUFFO2dCQUNsQixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsRUFBQyxRQUFRLENBQUMsQ0FBQztnQkFDckMsNkRBQTZEO2dCQUM3RCxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSw4QkFBOEIsQ0FBQyxDQUFDO2FBQzVEO1lBQ0QsOENBQThDO1lBQzlDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQzttQkFDekIsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQzt1QkFDNUIsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFO2dCQUNuQyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksRUFBRSxLQUFLLENBQUMsQ0FBQzthQUMxQztRQUNMLENBQUMsQ0FBQyxDQUFDO1FBRUgsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLHVCQUF1QixDQUN6QyxRQUFRLENBQUMsUUFBUSxDQUNiLE1BQU0sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRTtZQUN2QixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7U0FDMUIsQ0FBQyxFQUNGO1lBQ0ksV0FBVyxFQUFFLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDO1lBQ3JDLFlBQVksRUFBRSxJQUFJO1NBQ3JCLENBQ0osQ0FDSixDQUFDO0lBQ04sQ0FBQzs7cUhBakRRLHVCQUF1QjttSEFBdkIsdUJBQXVCOzRGQUF2Qix1QkFBdUI7a0JBSG5DLElBQUk7bUJBQUM7b0JBQ0YsSUFBSSxFQUFFLGdCQUFnQjtpQkFDekIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCAqIGFzIG1hcmtlZCBmcm9tICdtYXJrZWQnO1xyXG5pbXBvcnQgY3JlYXRlRE9NUHVyaWZ5IGZyb20gJ2RvbXB1cmlmeSc7XHJcbmltcG9ydCB7IERvbVNhbml0aXplciB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xyXG5cclxuY29uc3QgdW5kZXJsaW5lID0ge1xyXG4gICAgbmFtZTogJ3VuZGVybGluZScsXHJcbiAgICBsZXZlbDogJ2lubGluZScsIC8vIElzIHRoaXMgYSBibG9jay1sZXZlbCBvciBpbmxpbmUtbGV2ZWwgdG9rZW5pemVyP1xyXG4gICAgc3RhcnQoc3JjKSB7IHJldHVybiBzcmMubWF0Y2goL1xcK1xcKy8pPy5pbmRleDsgfSwgLy8gSGludCB0byBNYXJrZWQuanMgdG8gc3RvcCBhbmQgY2hlY2sgZm9yIGEgbWF0Y2hcclxuICAgIHRva2VuaXplcihzcmMsIHRva2Vucykge1xyXG4gICAgICAgIGNvbnN0IHJ1bGUgPSAvXlxcK1xcKyguKj8pXFwrXFwrLzsgLy8gUmVnZXggZm9yIHRoZSBjb21wbGV0ZSB0b2tlblxyXG4gICAgICAgIGNvbnN0IG1hdGNoID0gcnVsZS5leGVjKHNyYyk7XHJcbiAgICAgICAgaWYgKG1hdGNoKSB7XHJcbiAgICAgICAgICAgIHJldHVybiB7IC8vIFRva2VuIHRvIGdlbmVyYXRlXHJcbiAgICAgICAgICAgICAgICB0eXBlOiAndW5kZXJsaW5lJywgLy8gU2hvdWxkIG1hdGNoIFwibmFtZVwiIGFib3ZlXHJcbiAgICAgICAgICAgICAgICByYXc6IG1hdGNoWzBdLCAvLyBUZXh0IHRvIGNvbnN1bWUgZnJvbSB0aGUgc291cmNlXHJcbiAgICAgICAgICAgICAgICB0ZXh0OiB0aGlzLmxleGVyLmlubGluZVRva2VucyhtYXRjaFsxXS50cmltKCkpLCAvLyBBZGRpdGlvbmFsIGN1c3RvbSBwcm9wZXJ0aWVzXHJcbiAgICAgICAgICAgIH07XHJcbiAgICAgICAgfVxyXG4gICAgfSxcclxuICAgIHJlbmRlcmVyKHRva2VuKSB7XHJcbiAgICAgICAgcmV0dXJuIGA8dT4ke3RoaXMucGFyc2VyLnBhcnNlSW5saW5lKHRva2VuLnRleHQpfTwvdT5gO1xyXG4gICAgfVxyXG59O1xyXG5cclxubWFya2VkLm1hcmtlZC51c2Uoe1xyXG4gICAgZXh0ZW5zaW9uczogW3VuZGVybGluZV1cclxufSk7XHJcblxyXG5AUGlwZSh7XHJcbiAgICBuYW1lOiAnbWFya2Rvd25Ub0h0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCYW50YU1hcmtkb3duVG9IdG1sUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgcHJpdmF0ZSBzYW5pdGl6ZXI6IERvbVNhbml0aXplclxyXG4gICAgKSB7XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlciA9IG5ldyBtYXJrZWQuUmVuZGVyZXIoe1xyXG4gICAgICAgICAgICBoZWFkZXJQcmVmaXg6ICcnXHJcbiAgICAgICAgfSk7XHJcbiAgICAgICAgY29uc3QgbGlua1JlbmRlcmVyID0gdGhpcy5yZW5kZXJlci5saW5rO1xyXG4gICAgICAgIHRoaXMucmVuZGVyZXIubGluayA9IChocmVmLCB0aXRsZSwgdGV4dCkgPT4ge1xyXG4gICAgICAgICAgICBjb25zdCBodG1sID0gbGlua1JlbmRlcmVyLmNhbGwodGhpcy5yZW5kZXJlciwgaHJlZiwgdGl0bGUsIHRleHQpO1xyXG4gICAgICAgICAgICByZXR1cm4gaHRtbC5yZXBsYWNlKC9ePGEgLywgJzxhIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXIgbm9mb2xsb3dcIiAnKTtcclxuICAgICAgICB9O1xyXG4gICAgfVxyXG5cclxuICAgIHJlbmRlcmVyOiBtYXJrZWQuUmVuZGVyZXI7XHJcbiAgICB0cmFuc2Zvcm0odmFsdWU6IHN0cmluZykge1xyXG4gICAgICAgIGlmICghdmFsdWUpXHJcbiAgICAgICAgICAgIHJldHVybiAnJztcclxuXHJcbiAgICAgICAgbGV0IHB1cmlmaWVyID0gY3JlYXRlRE9NUHVyaWZ5KHdpbmRvdyk7XHJcbiAgICAgICAgXHJcbiAgICAgICAgLy8gaHR0cHM6Ly9naXRodWIuY29tL2N1cmU1My9ET01QdXJpZnkvYmxvYi9lMWMxOWNmNjQwN2Q3ODJiNjY2Y2IxZDAyYTZhZjE5MWY5Y2JjMDllL2RlbW9zL2hvb2tzLXRhcmdldC1ibGFuay1kZW1vLmh0bWxcclxuICAgICAgICAvLyBBZGQgYSBob29rIHRvIG1ha2UgYWxsIGxpbmtzIG9wZW4gYSBuZXcgd2luZG93XHJcbiAgICAgICAgcHVyaWZpZXIuYWRkSG9vaygnYWZ0ZXJTYW5pdGl6ZUF0dHJpYnV0ZXMnLCBmdW5jdGlvbihub2RlOiBIVE1MRWxlbWVudCAmIHsgdGFyZ2V0Pzogc3RyaW5nIH0pIHtcclxuICAgICAgICAgICAgLy8gc2V0IGFsbCBlbGVtZW50cyBvd25pbmcgdGFyZ2V0IHRvIHRhcmdldD1fYmxhbmtcclxuICAgICAgICAgICAgaWYgKCd0YXJnZXQnIGluIG5vZGUpIHtcclxuICAgICAgICAgICAgICAgIG5vZGUuc2V0QXR0cmlidXRlKCd0YXJnZXQnLCdfYmxhbmsnKTtcclxuICAgICAgICAgICAgICAgIC8vIHByZXZlbnQgaHR0cHM6Ly93d3cub3dhc3Aub3JnL2luZGV4LnBocC9SZXZlcnNlX1RhYm5hYmJpbmdcclxuICAgICAgICAgICAgICAgIG5vZGUuc2V0QXR0cmlidXRlKCdyZWwnLCAnbm9vcGVuZXIgbm9yZWZlcnJlciBub2ZvbGxvdycpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIC8vIHNldCBub24tSFRNTC9NYXRoTUwgbGlua3MgdG8geGxpbms6c2hvdz1uZXdcclxuICAgICAgICAgICAgaWYgKCFub2RlLmhhc0F0dHJpYnV0ZSgndGFyZ2V0JylcclxuICAgICAgICAgICAgICAgICYmIChub2RlLmhhc0F0dHJpYnV0ZSgneGxpbms6aHJlZicpXHJcbiAgICAgICAgICAgICAgICAgICAgfHwgbm9kZS5oYXNBdHRyaWJ1dGUoJ2hyZWYnKSkpIHtcclxuICAgICAgICAgICAgICAgIG5vZGUuc2V0QXR0cmlidXRlKCd4bGluazpzaG93JywgJ25ldycpO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgfSk7XHJcblxyXG4gICAgICAgIHJldHVybiB0aGlzLnNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0SHRtbChcclxuICAgICAgICAgICAgcHVyaWZpZXIuc2FuaXRpemUoXHJcbiAgICAgICAgICAgICAgICBtYXJrZWQubWFya2VkLnBhcnNlKHZhbHVlLCB7XHJcbiAgICAgICAgICAgICAgICAgICAgcmVuZGVyZXI6IHRoaXMucmVuZGVyZXJcclxuICAgICAgICAgICAgICAgIH0pLFxyXG4gICAgICAgICAgICAgICAge1xyXG4gICAgICAgICAgICAgICAgICAgIEZPUkJJRF9UQUdTOiBbJ2gxJywgJ2gyJywgJ2gzJywgJ2g0J10sXHJcbiAgICAgICAgICAgICAgICAgICAgS0VFUF9DT05URU5UOiB0cnVlXHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIClcclxuICAgICAgICApO1xyXG4gICAgfVxyXG59Il19
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [BANTA_SDK_OPTIONS]
+                }, {
+                    type: Optional
+                }] }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFya2Rvd24tdG8taHRtbC5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc2RrL3NyYy9saWIvY29tbW9uL21hcmtkb3duLXRvLWh0bWwucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RFLE9BQU8sS0FBSyxNQUFNLE1BQU0sUUFBUSxDQUFDO0FBQ2pDLE9BQU8sZUFBZSxNQUFNLFdBQVcsQ0FBQztBQUV4QyxPQUFPLE9BQU8sTUFBTSxTQUFTLENBQUM7QUFDOUIsT0FBTyxFQUFFLGlCQUFpQixFQUFjLE1BQU0sZ0JBQWdCLENBQUM7OztBQUUvRCxNQUFNLFNBQVMsR0FBRztJQUNkLElBQUksRUFBRSxXQUFXO0lBQ2pCLEtBQUssRUFBRSxRQUFRO0lBQ2YsS0FBSyxDQUFDLEdBQUcsSUFBSSxPQUFPLEdBQUcsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUMvQyxTQUFTLENBQUMsR0FBRyxFQUFFLE1BQU07UUFDakIsTUFBTSxJQUFJLEdBQUcsZ0JBQWdCLENBQUMsQ0FBQywrQkFBK0I7UUFDOUQsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUM3QixJQUFJLEtBQUssRUFBRTtZQUNQLE9BQU87Z0JBQ0gsSUFBSSxFQUFFLFdBQVc7Z0JBQ2pCLEdBQUcsRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDO2dCQUNiLElBQUksRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsRUFBRSwrQkFBK0I7YUFDbEYsQ0FBQztTQUNMO0lBQ0wsQ0FBQztJQUNELFFBQVEsQ0FBQyxLQUFLO1FBQ1YsT0FBTyxNQUFNLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQzNELENBQUM7Q0FDSixDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUM7SUFDZCxVQUFVLEVBQUUsQ0FBQyxTQUFTLENBQUM7Q0FDMUIsQ0FBQyxDQUFDO0FBS0gsTUFBTSxPQUFPLHVCQUF1QjtJQUNoQyxZQUNZLFNBQXVCLEVBR3ZCLFVBQXNCO1FBSHRCLGNBQVMsR0FBVCxTQUFTLENBQWM7UUFHdkIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUU5QixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksTUFBTSxDQUFDLFFBQVEsQ0FBQztZQUNoQyxZQUFZLEVBQUUsRUFBRTtTQUNuQixDQUFDLENBQUM7UUFDSCxNQUFNLFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztRQUN4QyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLEVBQUU7WUFDdkMsTUFBTSxJQUFJLEdBQUcsWUFBWSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUM7WUFDakUsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSx3REFBd0QsQ0FBQyxDQUFDO1FBQzFGLENBQUMsQ0FBQztJQUNOLENBQUM7SUFFSixJQUFZLFFBQVE7UUFDbkIsT0FBTyxJQUFJLENBQUMsVUFBVSxFQUFFLFFBQVEsSUFBSSw0REFBNEQsQ0FBQztJQUNsRyxDQUFDO0lBR0UsU0FBUyxDQUFDLEtBQWE7UUFDbkIsSUFBSSxDQUFDLEtBQUs7WUFDTixPQUFPLEVBQUUsQ0FBQztRQUVkLElBQUksUUFBUSxHQUFHLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUV2Qyx1SEFBdUg7UUFDdkgsaURBQWlEO1FBQ2pELFFBQVEsQ0FBQyxPQUFPLENBQUMseUJBQXlCLEVBQUUsVUFBUyxJQUF1QztZQUN4RixrREFBa0Q7WUFDbEQsSUFBSSxRQUFRLElBQUksSUFBSSxFQUFFO2dCQUNsQixJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsRUFBQyxRQUFRLENBQUMsQ0FBQztnQkFDckMsNkRBQTZEO2dCQUM3RCxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSw4QkFBOEIsQ0FBQyxDQUFDO2FBQzVEO1lBQ0QsOENBQThDO1lBQzlDLElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQzttQkFDekIsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksQ0FBQzt1QkFDNUIsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUFFO2dCQUNuQyxJQUFJLENBQUMsWUFBWSxDQUFDLFlBQVksRUFBRSxLQUFLLENBQUMsQ0FBQzthQUMxQztRQUNMLENBQUMsQ0FBQyxDQUFDO1FBRUgsS0FBSyxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssRUFBRTtZQUMvQixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7U0FDMUIsQ0FBQyxDQUFDO1FBRUgsS0FBSyxHQUFHLE9BQU8sQ0FBQyxLQUFLLENBQUMsS0FBSyxFQUFFLEVBQUUsSUFBSSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBRXRELE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyx1QkFBdUIsQ0FDekMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQ25CO1lBQ0ksV0FBVyxFQUFFLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDO1lBQ3JDLFlBQVksRUFBRSxJQUFJO1NBQ3JCLENBQ0osQ0FDSixDQUFDO0lBQ04sQ0FBQzs7cUhBM0RRLHVCQUF1Qiw4Q0FJcEIsaUJBQWlCO21IQUpwQix1QkFBdUI7NEZBQXZCLHVCQUF1QjtrQkFIbkMsSUFBSTttQkFBQztvQkFDRixJQUFJLEVBQUUsZ0JBQWdCO2lCQUN6Qjs7MEJBS1EsTUFBTTsyQkFBQyxpQkFBaUI7OzBCQUFHLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtLCBJbmplY3QsIE9wdGlvbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCAqIGFzIG1hcmtlZCBmcm9tICdtYXJrZWQnO1xyXG5pbXBvcnQgY3JlYXRlRE9NUHVyaWZ5IGZyb20gJ2RvbXB1cmlmeSc7XHJcbmltcG9ydCB7IERvbVNhbml0aXplciB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xyXG5pbXBvcnQgdHdlbW9qaSBmcm9tICd0d2Vtb2ppJztcclxuaW1wb3J0IHsgQkFOVEFfU0RLX09QVElPTlMsIFNka09wdGlvbnMgfSBmcm9tICcuLi9zZGstb3B0aW9ucyc7XHJcblxyXG5jb25zdCB1bmRlcmxpbmUgPSB7XHJcbiAgICBuYW1lOiAndW5kZXJsaW5lJyxcclxuICAgIGxldmVsOiAnaW5saW5lJywgLy8gSXMgdGhpcyBhIGJsb2NrLWxldmVsIG9yIGlubGluZS1sZXZlbCB0b2tlbml6ZXI/XHJcbiAgICBzdGFydChzcmMpIHsgcmV0dXJuIHNyYy5tYXRjaCgvXFwrXFwrLyk/LmluZGV4OyB9LCAvLyBIaW50IHRvIE1hcmtlZC5qcyB0byBzdG9wIGFuZCBjaGVjayBmb3IgYSBtYXRjaFxyXG4gICAgdG9rZW5pemVyKHNyYywgdG9rZW5zKSB7XHJcbiAgICAgICAgY29uc3QgcnVsZSA9IC9eXFwrXFwrKC4qPylcXCtcXCsvOyAvLyBSZWdleCBmb3IgdGhlIGNvbXBsZXRlIHRva2VuXHJcbiAgICAgICAgY29uc3QgbWF0Y2ggPSBydWxlLmV4ZWMoc3JjKTtcclxuICAgICAgICBpZiAobWF0Y2gpIHtcclxuICAgICAgICAgICAgcmV0dXJuIHsgLy8gVG9rZW4gdG8gZ2VuZXJhdGVcclxuICAgICAgICAgICAgICAgIHR5cGU6ICd1bmRlcmxpbmUnLCAvLyBTaG91bGQgbWF0Y2ggXCJuYW1lXCIgYWJvdmVcclxuICAgICAgICAgICAgICAgIHJhdzogbWF0Y2hbMF0sIC8vIFRleHQgdG8gY29uc3VtZSBmcm9tIHRoZSBzb3VyY2VcclxuICAgICAgICAgICAgICAgIHRleHQ6IHRoaXMubGV4ZXIuaW5saW5lVG9rZW5zKG1hdGNoWzFdLnRyaW0oKSksIC8vIEFkZGl0aW9uYWwgY3VzdG9tIHByb3BlcnRpZXNcclxuICAgICAgICAgICAgfTtcclxuICAgICAgICB9XHJcbiAgICB9LFxyXG4gICAgcmVuZGVyZXIodG9rZW4pIHtcclxuICAgICAgICByZXR1cm4gYDx1PiR7dGhpcy5wYXJzZXIucGFyc2VJbmxpbmUodG9rZW4udGV4dCl9PC91PmA7XHJcbiAgICB9XHJcbn07XHJcblxyXG5tYXJrZWQubWFya2VkLnVzZSh7XHJcbiAgICBleHRlbnNpb25zOiBbdW5kZXJsaW5lXVxyXG59KTtcclxuXHJcbkBQaXBlKHtcclxuICAgIG5hbWU6ICdtYXJrZG93blRvSHRtbCdcclxufSlcclxuZXhwb3J0IGNsYXNzIEJhbnRhTWFya2Rvd25Ub0h0bWxQaXBlIGltcGxlbWVudHMgUGlwZVRyYW5zZm9ybSB7XHJcbiAgICBjb25zdHJ1Y3RvcihcclxuICAgICAgICBwcml2YXRlIHNhbml0aXplcjogRG9tU2FuaXRpemVyLFxyXG5cclxuICAgICAgICBASW5qZWN0KEJBTlRBX1NES19PUFRJT05TKSBAT3B0aW9uYWwoKVxyXG4gICAgICAgIHByaXZhdGUgc2RrT3B0aW9uczogU2RrT3B0aW9uc1xyXG4gICAgKSB7XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlciA9IG5ldyBtYXJrZWQuUmVuZGVyZXIoe1xyXG4gICAgICAgICAgICBoZWFkZXJQcmVmaXg6ICcnXHJcbiAgICAgICAgfSk7XHJcbiAgICAgICAgY29uc3QgbGlua1JlbmRlcmVyID0gdGhpcy5yZW5kZXJlci5saW5rO1xyXG4gICAgICAgIHRoaXMucmVuZGVyZXIubGluayA9IChocmVmLCB0aXRsZSwgdGV4dCkgPT4ge1xyXG4gICAgICAgICAgICBjb25zdCBodG1sID0gbGlua1JlbmRlcmVyLmNhbGwodGhpcy5yZW5kZXJlciwgaHJlZiwgdGl0bGUsIHRleHQpO1xyXG4gICAgICAgICAgICByZXR1cm4gaHRtbC5yZXBsYWNlKC9ePGEgLywgJzxhIHRhcmdldD1cIl9ibGFua1wiIHJlbD1cIm5vb3BlbmVyIG5vcmVmZXJyZXIgbm9mb2xsb3dcIiAnKTtcclxuICAgICAgICB9O1xyXG4gICAgfVxyXG5cclxuXHRwcml2YXRlIGdldCBlbW9qaVVybCgpIHtcclxuXHRcdHJldHVybiB0aGlzLnNka09wdGlvbnM/LmVtb2ppVXJsID8/ICdodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvZ2gvdHdpdHRlci90d2Vtb2ppQDE0LjAuMi9hc3NldHMvJztcclxuXHR9XHJcblxyXG4gICAgcmVuZGVyZXI6IG1hcmtlZC5SZW5kZXJlcjtcclxuICAgIHRyYW5zZm9ybSh2YWx1ZTogc3RyaW5nKSB7XHJcbiAgICAgICAgaWYgKCF2YWx1ZSlcclxuICAgICAgICAgICAgcmV0dXJuICcnO1xyXG5cclxuICAgICAgICBsZXQgcHVyaWZpZXIgPSBjcmVhdGVET01QdXJpZnkod2luZG93KTtcclxuICAgICAgICBcclxuICAgICAgICAvLyBodHRwczovL2dpdGh1Yi5jb20vY3VyZTUzL0RPTVB1cmlmeS9ibG9iL2UxYzE5Y2Y2NDA3ZDc4MmI2NjZjYjFkMDJhNmFmMTkxZjljYmMwOWUvZGVtb3MvaG9va3MtdGFyZ2V0LWJsYW5rLWRlbW8uaHRtbFxyXG4gICAgICAgIC8vIEFkZCBhIGhvb2sgdG8gbWFrZSBhbGwgbGlua3Mgb3BlbiBhIG5ldyB3aW5kb3dcclxuICAgICAgICBwdXJpZmllci5hZGRIb29rKCdhZnRlclNhbml0aXplQXR0cmlidXRlcycsIGZ1bmN0aW9uKG5vZGU6IEhUTUxFbGVtZW50ICYgeyB0YXJnZXQ/OiBzdHJpbmcgfSkge1xyXG4gICAgICAgICAgICAvLyBzZXQgYWxsIGVsZW1lbnRzIG93bmluZyB0YXJnZXQgdG8gdGFyZ2V0PV9ibGFua1xyXG4gICAgICAgICAgICBpZiAoJ3RhcmdldCcgaW4gbm9kZSkge1xyXG4gICAgICAgICAgICAgICAgbm9kZS5zZXRBdHRyaWJ1dGUoJ3RhcmdldCcsJ19ibGFuaycpO1xyXG4gICAgICAgICAgICAgICAgLy8gcHJldmVudCBodHRwczovL3d3dy5vd2FzcC5vcmcvaW5kZXgucGhwL1JldmVyc2VfVGFibmFiYmluZ1xyXG4gICAgICAgICAgICAgICAgbm9kZS5zZXRBdHRyaWJ1dGUoJ3JlbCcsICdub29wZW5lciBub3JlZmVycmVyIG5vZm9sbG93Jyk7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgLy8gc2V0IG5vbi1IVE1ML01hdGhNTCBsaW5rcyB0byB4bGluazpzaG93PW5ld1xyXG4gICAgICAgICAgICBpZiAoIW5vZGUuaGFzQXR0cmlidXRlKCd0YXJnZXQnKVxyXG4gICAgICAgICAgICAgICAgJiYgKG5vZGUuaGFzQXR0cmlidXRlKCd4bGluazpocmVmJylcclxuICAgICAgICAgICAgICAgICAgICB8fCBub2RlLmhhc0F0dHJpYnV0ZSgnaHJlZicpKSkge1xyXG4gICAgICAgICAgICAgICAgbm9kZS5zZXRBdHRyaWJ1dGUoJ3hsaW5rOnNob3cnLCAnbmV3Jyk7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICB9KTtcclxuXHJcbiAgICAgICAgdmFsdWUgPSBtYXJrZWQubWFya2VkLnBhcnNlKHZhbHVlLCB7XHJcbiAgICAgICAgICAgIHJlbmRlcmVyOiB0aGlzLnJlbmRlcmVyXHJcbiAgICAgICAgfSk7XHJcblxyXG4gICAgICAgIHZhbHVlID0gdHdlbW9qaS5wYXJzZSh2YWx1ZSwgeyBiYXNlOiB0aGlzLmVtb2ppVXJsIH0pO1xyXG5cclxuICAgICAgICByZXR1cm4gdGhpcy5zYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdEh0bWwoXHJcbiAgICAgICAgICAgIHB1cmlmaWVyLnNhbml0aXplKHZhbHVlLFxyXG4gICAgICAgICAgICAgICAge1xyXG4gICAgICAgICAgICAgICAgICAgIEZPUkJJRF9UQUdTOiBbJ2gxJywgJ2gyJywgJ2gzJywgJ2g0J10sXHJcbiAgICAgICAgICAgICAgICAgICAgS0VFUF9DT05URU5UOiB0cnVlXHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIClcclxuICAgICAgICApO1xyXG4gICAgfVxyXG59Il19

package/fesm2015/banta-sdk.mjs

@@ -1,13 +1,14 @@
 import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish, take } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, Pipe, Output, HostBinding, NgModule, Inject, Optional, ViewChildren, Directive, TemplateRef, ContentChild, Injectable } from '@angular/core';
+import { Component, Input, ViewChild, Pipe, Inject, Optional, Output, HostBinding, NgModule, ViewChildren, Directive, TemplateRef, ContentChild, Injectable } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as marked from 'marked';
 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';
@@ -193,6 +194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['container']
             }] } });
 
+const BANTA_SDK_OPTIONS = 'BANTA_SDK_OPTIONS';
+
 const underline = {
     name: 'underline',
     level: 'inline',
@@ -216,8 +219,9 @@ marked.marked.use({
     extensions: [underline]
 });
 class BantaMarkdownToHtmlPipe {
-    constructor(sanitizer) {
+    constructor(sanitizer, sdkOptions) {
         this.sanitizer = sanitizer;
+        this.sdkOptions = sdkOptions;
         this.renderer = new marked.Renderer({
             headerPrefix: ''
         });
@@ -227,6 +231,10 @@ class BantaMarkdownToHtmlPipe {
             return html.replace(/^<a /, '<a target="_blank" rel="noopener noreferrer nofollow" ');
         };
     }
+    get emojiUrl() {
+        var _a, _b;
+        return (_b = (_a = this.sdkOptions) === null || _a === void 0 ? void 0 : _a.emojiUrl) !== null && _b !== void 0 ? _b : 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
+    }
     transform(value) {
         if (!value)
             return '';
@@ -247,22 +255,31 @@ class BantaMarkdownToHtmlPipe {
                 node.setAttribute('xlink:show', 'new');
             }
         });
-        return this.sanitizer.bypassSecurityTrustHtml(purifier.sanitize(marked.marked.parse(value, {
+        value = marked.marked.parse(value, {
             renderer: this.renderer
-        }), {
+        });
+        value = twemoji$1.parse(value, { base: this.emojiUrl });
+        return this.sanitizer.bypassSecurityTrustHtml(purifier.sanitize(value, {
             FORBID_TAGS: ['h1', 'h2', 'h3', 'h4'],
             KEEP_CONTENT: true
         }));
     }
 }
-BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
 BantaMarkdownToHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, name: "markdownToHtml" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'markdownToHtml'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
+        }], ctorParameters: function () {
+        return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [BANTA_SDK_OPTIONS]
+                    }, {
+                        type: Optional
+                    }] }];
+    } });
 
 class BantaTrustResourceUrlPipe {
     constructor(sanitizer) {
@@ -537,8 +554,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-const BANTA_SDK_OPTIONS = 'BANTA_SDK_OPTIONS';
-
 const EMOJIS = {
     "grinning": {
         "keywords": ["face", "smile", "happy", "joy", ":D", "grin"],
@@ -7459,10 +7474,10 @@ 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}\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$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" }] });
 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}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { maxLength: [{
                 type: Input
             }], isNew: [{