@banta/sdk 4.3.2 → 4.3.3

package/fesm2015/banta-sdk.js

@@ -6,6 +6,8 @@ import { sanitize } from 'dompurify';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
+import { Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -6830,100 +6832,63 @@ EmojiSelectorPanelComponent.propDecorators = {
 
 /// <reference types="@types/resize-observer-browser" />
 class EmojiSelectorButtonComponent {
-    constructor(elementRef) {
+    constructor(elementRef, overlay) {
         this.elementRef = elementRef;
+        this.overlay = overlay;
         this._selected = new Subject();
         this.showEmojiPanel = false;
     }
     get selected() {
         return this._selected;
     }
-    ngOnDestroy() {
-        this.removeListener();
-        this.panelElement.nativeElement.remove();
+    get isOpen() {
+        return this.overlayRef;
     }
-    get widthConstrained() { return this.width < 700; }
-    ngAfterViewInit() {
+    /**
+     * Insert the given emoji.
+     * @param str
+     */
+    insert(str) {
+        this._selected.next(str);
     }
-    putPanelAtRoot() {
-        // 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.
-        let root = document.fullscreenElement || document.body.querySelector('[ng-version]') || document.body;
-        root.appendChild(this.panelElement.nativeElement);
-    }
-    removeListener() {
-        document.removeEventListener('click', this.clickListener);
-        window.removeEventListener('resize', this.resizeListener);
-    }
-    place() {
-        // Not currently used as it can't be easily done handling all 
-        // scrolling corner cases.
-        this.putPanelAtRoot();
-        let pos = this.buttonElement.nativeElement.getBoundingClientRect();
-        let size = this.panelElement.nativeElement.getBoundingClientRect();
-        let left = window.scrollX + pos.left + pos.width - size.width;
-        if (left < 0)
-            left = (window.scrollX + window.innerWidth) / 2 - size.width / 2;
-        let scrollY = window.scrollY;
-        if (document.fullscreenElement) {
+    close() {
+        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`
-        });
     }
     show() {
-        if (this.showEmojiPanel) {
-            this.showEmojiPanel = false;
-            return;
+        if (this.isOpen) {
+            this.close();
         }
-        this.showEmojiPanel = true;
-        //this.place();
-        setTimeout(() => {
-            let onResize = () => {
-                if (!this.showEmojiPanel)
-                    return;
-                this.width = window.innerWidth;
-                this.height = window.innerHeight;
-                let edgeOffset = 0;
-                let commentField = this.elementRef.nativeElement.closest(`banta-comment-field`);
-                if (commentField) {
-                    let size = commentField.getBoundingClientRect();
-                    this.width = size.width;
-                    edgeOffset = window.innerWidth - size.right;
-                }
-                let buttonRect = this.buttonElement.nativeElement.getBoundingClientRect();
-                let 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 = (ev) => {
-                let parent = ev.target;
-                let 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
+            })
         });
-    }
-    insert(str) {
-        this._selected.next(str);
+        this.overlayRef.backdropClick().subscribe(() => {
+            this.close();
+        });
+        this.overlayRef.keydownEvents().subscribe(event => {
+            if (event.key === 'Escape') {
+                this.close();
+            }
+        });
+        this.overlayRef.attach(this.selectorPanelTemplate);
     }
 }
 EmojiSelectorButtonComponent.decorators = [
@@ -6933,11 +6898,12 @@ EmojiSelectorButtonComponent.decorators = [
         <button #button type="button" mat-icon-button (click)="show()">
             <mat-icon>emoji_emotions</mat-icon>
         </button>
-        <emoji-selector-panel 
-            #panel
-            (selected)="insert($event)"
-            [class.visible]="showEmojiPanel"
-            ></emoji-selector-panel>
+        <ng-template cdkPortal #selectorPanelTemplate="cdkPortal">
+            <emoji-selector-panel 
+                #panel
+                (selected)="insert($event)"
+                ></emoji-selector-panel>
+        </ng-template>
     `,
                 styles: [`
         :host {
@@ -6945,20 +6911,6 @@ EmojiSelectorButtonComponent.decorators = [
             position: relative;
         }
 
-        emoji-selector-panel {
-            position: absolute;
-            top: 2.5em;
-            right: 0;
-            opacity: 0;
-            pointer-events: none;
-            z-index: 10;
-        }
-
-        emoji-selector-panel.visible {
-            pointer-events: initial;
-            opacity: 1;
-        }
-
         button {
             color: #666
         }
@@ -6966,13 +6918,12 @@ EmojiSelectorButtonComponent.decorators = [
             },] }
 ];
 EmojiSelectorButtonComponent.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: Overlay }
 ];
 EmojiSelectorButtonComponent.propDecorators = {
-    selected: [{ type: Output }],
-    panelElement: [{ type: ViewChild, args: ['panel', { read: ElementRef },] }],
-    buttonElement: [{ type: ViewChild, args: ['button', { read: ElementRef },] }],
-    widthConstrained: [{ type: HostBinding, args: ['class.width-constrained',] }]
+    selectorPanelTemplate: [{ type: ViewChild, args: ['selectorPanelTemplate',] }],
+    selected: [{ type: Output }]
 };
 
 const COMPONENTS$1 = [
@@ -6990,7 +6941,9 @@ EmojiModule.decorators = [
                     MatIconModule,
                     MatButtonModule,
                     MatFormFieldModule,
-                    MatInputModule
+                    MatInputModule,
+                    OverlayModule,
+                    PortalModule
                 ],
                 exports: COMPONENTS$1
             },] }
@@ -7848,12 +7801,16 @@ class CommentComponent {
         }
         return `url(${url})`;
     }
+    get replyCount() {
+        var _a;
+        return ((_a = this.message.submessages) === null || _a === void 0 ? void 0 : _a.length) || this.message.submessageCount || 0;
+    }
 }
 CommentComponent.decorators = [
     { type: 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 = {
@@ -9154,7 +9111,9 @@ CommentsModule.decorators = [
                     BantaCommonModule,
                     EmojiModule,
                     MatTooltipModule,
-                    MatSelectModule
+                    MatSelectModule,
+                    OverlayModule,
+                    PortalModule
                 ],
                 exports: COMPONENTS$3
             },] }
@@ -9420,7 +9379,9 @@ BantaSdkModule.decorators = [
                     MatFormFieldModule,
                     MatInputModule,
                     MatProgressSpinnerModule,
-                    MatSnackBarModule
+                    MatSnackBarModule,
+                    OverlayModule,
+                    PortalModule
                 ],
                 declarations: [
                     BantaComponent,