@banta/sdk 4.3.2 → 4.3.3

package/bundles/banta-sdk.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('marked'), require('dompurify'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/material/dialog'), require('@banta/common'), require('@angular/router'), require('@angular/material/snack-bar'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/cdk/text-field'), require('@angular/material/tooltip'), require('@angular/material/select')) :
-    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', 'marked', 'dompurify', '@angular/platform-browser', '@angular/common', '@angular/material/icon', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/material/dialog', '@banta/common', '@angular/router', '@angular/material/snack-bar', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/cdk/text-field', '@angular/material/tooltip', '@angular/material/select'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.marked, global.DOMPurify, global.ng.platformBrowser, global.ng.common, global.ng.material.icon, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.material.dialog, global.common$1, global.ng.router, global.ng.material.snackBar, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip, global.ng.material.select));
-}(this, (function (exports, rxjs, operators, core, marked, DOMPurify, platformBrowser, common, icon, button, formField, input, forms, dialog, common$1, router, snackBar, menu, progressSpinner, textField, tooltip, select) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('marked'), require('dompurify'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/material/icon'), require('@angular/cdk/overlay'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@banta/common'), require('@angular/router'), require('@angular/material/snack-bar'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/cdk/text-field'), require('@angular/material/tooltip'), require('@angular/material/select')) :
+    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', 'marked', 'dompurify', '@angular/platform-browser', '@angular/common', '@angular/material/icon', '@angular/cdk/overlay', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/cdk/portal', '@angular/material/dialog', '@banta/common', '@angular/router', '@angular/material/snack-bar', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/cdk/text-field', '@angular/material/tooltip', '@angular/material/select'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.marked, global.DOMPurify, global.ng.platformBrowser, global.ng.common, global.ng.material.icon, global.ng.cdk.overlay, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.cdk.portal, global.ng.material.dialog, global.common$1, global.ng.router, global.ng.material.snackBar, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip, global.ng.material.select));
+}(this, (function (exports, rxjs, operators, core, marked, DOMPurify, platformBrowser, common, icon, overlay, button, formField, input, forms, portal, dialog, common$1, router, snackBar, menu, progressSpinner, textField, tooltip, select) { 'use strict';
 
     function lazyConnection(options) {
         var obs = new rxjs.Observable(function (observer) {
@@ -7166,8 +7166,9 @@
 
     /// <reference types="@types/resize-observer-browser" />
     var EmojiSelectorButtonComponent = /** @class */ (function () {
-        function EmojiSelectorButtonComponent(elementRef) {
+        function EmojiSelectorButtonComponent(elementRef, overlay) {
             this.elementRef = elementRef;
+            this.overlay = overlay;
             this._selected = new rxjs.Subject();
             this.showEmojiPanel = false;
         }
@@ -7178,115 +7179,76 @@
             enumerable: false,
             configurable: true
         });
-        EmojiSelectorButtonComponent.prototype.ngOnDestroy = function () {
-            this.removeListener();
-            this.panelElement.nativeElement.remove();
-        };
-        Object.defineProperty(EmojiSelectorButtonComponent.prototype, "widthConstrained", {
-            get: function () { return this.width < 700; },
+        Object.defineProperty(EmojiSelectorButtonComponent.prototype, "isOpen", {
+            get: function () {
+                return this.overlayRef;
+            },
             enumerable: false,
             configurable: true
         });
-        EmojiSelectorButtonComponent.prototype.ngAfterViewInit = function () {
-        };
-        EmojiSelectorButtonComponent.prototype.putPanelAtRoot = function () {
-            // If we are in full-screen, placing the panel outside of the full-screen element will result in it 
-            // always being behind said full-screen element, so we need to ensure we never place it further up the 
-            // stack.
-            var root = document.fullscreenElement || document.body.querySelector('[ng-version]') || document.body;
-            root.appendChild(this.panelElement.nativeElement);
-        };
-        EmojiSelectorButtonComponent.prototype.removeListener = function () {
-            document.removeEventListener('click', this.clickListener);
-            window.removeEventListener('resize', this.resizeListener);
-        };
-        EmojiSelectorButtonComponent.prototype.place = function () {
-            // Not currently used as it can't be easily done handling all 
-            // scrolling corner cases.
-            this.putPanelAtRoot();
-            var pos = this.buttonElement.nativeElement.getBoundingClientRect();
-            var size = this.panelElement.nativeElement.getBoundingClientRect();
-            var left = window.scrollX + pos.left + pos.width - size.width;
-            if (left < 0)
-                left = (window.scrollX + window.innerWidth) / 2 - size.width / 2;
-            var scrollY = window.scrollY;
-            if (document.fullscreenElement) {
+        /**
+         * Insert the given emoji.
+         * @param str
+         */
+        EmojiSelectorButtonComponent.prototype.insert = function (str) {
+            this._selected.next(str);
+        };
+        EmojiSelectorButtonComponent.prototype.close = function () {
+            if (this.overlayRef) {
+                this.overlayRef.dispose();
+                this.overlayRef = null;
+                return;
             }
-            Object.assign(this.panelElement.nativeElement.style, {
-                top: window.scrollY + pos.top + pos.height + "px",
-                left: Math.max(0, left) + "px"
-            });
         };
         EmojiSelectorButtonComponent.prototype.show = function () {
             var _this = this;
-            if (this.showEmojiPanel) {
-                this.showEmojiPanel = false;
-                return;
+            if (this.isOpen) {
+                this.close();
             }
-            this.showEmojiPanel = true;
-            //this.place();
-            setTimeout(function () {
-                var onResize = function () {
-                    if (!_this.showEmojiPanel)
-                        return;
-                    _this.width = window.innerWidth;
-                    _this.height = window.innerHeight;
-                    var edgeOffset = 0;
-                    var commentField = _this.elementRef.nativeElement.closest("banta-comment-field");
-                    if (commentField) {
-                        var size = commentField.getBoundingClientRect();
-                        _this.width = size.width;
-                        edgeOffset = window.innerWidth - size.right;
-                    }
-                    var buttonRect = _this.buttonElement.nativeElement.getBoundingClientRect();
-                    var buttonRight = window.innerWidth - buttonRect.right - edgeOffset - 10;
-                    if (_this.width < 700) {
-                        _this.panelElement.nativeElement.style.right = -buttonRight + "px";
-                    }
-                    else {
-                        _this.panelElement.nativeElement.style.right = '';
-                    }
-                    _this.panelElement.nativeElement.style.maxWidth = _this.width - 15 + "px";
-                };
-                _this.resizeListener = onResize;
-                onResize();
-                _this.clickListener = function (ev) {
-                    var parent = ev.target;
-                    var isInDialog = false;
-                    while (parent) {
-                        if (parent.matches('emoji-selector-panel'))
-                            isInDialog = true;
-                        parent = parent.parentElement;
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay.position()
+                    .flexibleConnectedTo(this.elementRef)
+                    .withPositions([
+                    {
+                        originX: 'end',
+                        originY: 'bottom',
+                        overlayX: 'end',
+                        overlayY: 'top'
                     }
-                    if (isInDialog)
-                        return;
-                    _this.showEmojiPanel = false;
-                    _this.removeListener();
-                };
-                document.addEventListener('click', _this.clickListener);
-                window.addEventListener('resize', _this.resizeListener);
+                ])
+                    .withFlexibleDimensions(true),
+                hasBackdrop: true,
+                disposeOnNavigation: true,
+                scrollStrategy: this.overlay.scrollStrategies.reposition({
+                    autoClose: true
+                })
             });
-        };
-        EmojiSelectorButtonComponent.prototype.insert = function (str) {
-            this._selected.next(str);
+            this.overlayRef.backdropClick().subscribe(function () {
+                _this.close();
+            });
+            this.overlayRef.keydownEvents().subscribe(function (event) {
+                if (event.key === 'Escape') {
+                    _this.close();
+                }
+            });
+            this.overlayRef.attach(this.selectorPanelTemplate);
         };
         return EmojiSelectorButtonComponent;
     }());
     EmojiSelectorButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'emoji-selector-button',
-                    template: "\n        <button #button type=\"button\" mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <emoji-selector-panel \n            #panel\n            (selected)=\"insert($event)\"\n            [class.visible]=\"showEmojiPanel\"\n            ></emoji-selector-panel>\n    ",
-                    styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        emoji-selector-panel {\n            position: absolute;\n            top: 2.5em;\n            right: 0;\n            opacity: 0;\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        emoji-selector-panel.visible {\n            pointer-events: initial;\n            opacity: 1;\n        }\n\n        button {\n            color: #666\n        }\n    "]
+                    template: "\n        <button #button type=\"button\" mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <ng-template cdkPortal #selectorPanelTemplate=\"cdkPortal\">\n            <emoji-selector-panel \n                #panel\n                (selected)=\"insert($event)\"\n                ></emoji-selector-panel>\n        </ng-template>\n    ",
+                    styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        button {\n            color: #666\n        }\n    "]
                 },] }
     ];
     EmojiSelectorButtonComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: core.ElementRef },
+        { type: overlay.Overlay }
     ]; };
     EmojiSelectorButtonComponent.propDecorators = {
-        selected: [{ type: core.Output }],
-        panelElement: [{ type: core.ViewChild, args: ['panel', { read: core.ElementRef },] }],
-        buttonElement: [{ type: core.ViewChild, args: ['button', { read: core.ElementRef },] }],
-        widthConstrained: [{ type: core.HostBinding, args: ['class.width-constrained',] }]
+        selectorPanelTemplate: [{ type: core.ViewChild, args: ['selectorPanelTemplate',] }],
+        selected: [{ type: core.Output }]
     };
 
     var COMPONENTS$1 = [
@@ -7307,7 +7269,9 @@
                         icon.MatIconModule,
                         button.MatButtonModule,
                         formField.MatFormFieldModule,
-                        input.MatInputModule
+                        input.MatInputModule,
+                        overlay.OverlayModule,
+                        portal.PortalModule
                     ],
                     exports: COMPONENTS$1
                 },] }
@@ -8397,13 +8361,21 @@
             }
             return "url(" + url + ")";
         };
+        Object.defineProperty(CommentComponent.prototype, "replyCount", {
+            get: function () {
+                var _a;
+                return ((_a = this.message.submessages) === null || _a === void 0 ? void 0 : _a.length) || this.message.submessageCount || 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return CommentComponent;
     }());
     CommentComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment',
-                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">Report</button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">Edit</button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">Delete</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a\r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectAvatar(message.user)\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n        <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n        <span class=\"spacer\"></span>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | markdownToHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"message.attachments?.length > 0\">\r\n            <banta-lightbox #lightbox></banta-lightbox>\r\n            <div class=\"attachments-row\" [class.single]=\"message.attachments?.length === 1\" *ngIf=\"message.attachments && message.attachments?.length > 0\">\r\n                <a \r\n                    href=\"javascript:;\" \r\n                    (click)=\"showLightbox(attachment)\"\r\n                    *ngFor=\"let attachment of message.attachments\" \r\n                    >\r\n                    <img [src]=\"attachment.url\" alt=\"\">\r\n                </a>\r\n            </div>\r\n        </ng-container>\r\n\r\n        <ul class=\"message-facts small\">\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\"></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        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">Edited</li>\r\n        </ul>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || message.submessageCount || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Replies\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <div class=\"count-indicator\">\r\n                {{message.likes}}\r\n            </div>\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-icon-button \r\n                [disabled]=\"!permissions?.canLike\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \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            </button>\r\n        </div>\r\n\r\n        <div class=\"counted-action\">\r\n            <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n                <mat-icon [inline]=\"true\" >share</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
-                    styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;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}:host .actions banta-timestamp{color:#666;font-size:10pt;flex-shrink:0}.user{position:relative;margin:1em 0 0;display:flex;align-items:center}.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:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;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 .count-indicator,.counted-action.active button{color:#00a5ff}.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}.user-tag,: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;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.small{display:none}ul.message-facts.small li{margin-top:.5em}ul.message-facts.small li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width:400px){.avatar{height:32px;width:32px}.actions ul.message-facts{display:none}ul.message-facts.small{display:initial}: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) .actions ul.message-facts{display:none}:host-context(.banta-mobile) ul.message-facts.small{display:initial}: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}"]
+                    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</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a\r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectAvatar(message.user)\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n        <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 class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | markdownToHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"message.attachments?.length > 0\">\r\n            <banta-lightbox #lightbox></banta-lightbox>\r\n            <div class=\"attachments-row\" [class.single]=\"message.attachments?.length === 1\" *ngIf=\"message.attachments && message.attachments?.length > 0\">\r\n                <a \r\n                    href=\"javascript:;\" \r\n                    (click)=\"showLightbox(attachment)\"\r\n                    *ngFor=\"let attachment of message.attachments\" \r\n                    >\r\n                    <img [src]=\"attachment.url\" alt=\"\">\r\n                </a>\r\n            </div>\r\n        </ng-container>\r\n\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\"></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                [disabled]=\"!permissions?.canLike\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \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: ["@-webkit-keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;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,banta-timestamp{color:#666;flex-shrink:0}banta-timestamp{font-size:10pt;margin-left:1em}.user{position:relative;margin:1em 0 0;display:flex;align-items:center}.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:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;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 .count-indicator,.counted-action.active button{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}.user-tag,: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;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;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}"]
                 },] }
     ];
     CommentComponent.propDecorators = {
@@ -10119,7 +10091,9 @@
                         BantaCommonModule,
                         EmojiModule,
                         tooltip.MatTooltipModule,
-                        select.MatSelectModule
+                        select.MatSelectModule,
+                        overlay.OverlayModule,
+                        portal.PortalModule
                     ],
                     exports: COMPONENTS$3
                 },] }
@@ -10533,7 +10507,9 @@
                         formField.MatFormFieldModule,
                         input.MatInputModule,
                         progressSpinner.MatProgressSpinnerModule,
-                        snackBar.MatSnackBarModule
+                        snackBar.MatSnackBarModule,
+                        overlay.OverlayModule,
+                        portal.PortalModule
                     ],
                     declarations: [
                         BantaComponent,