@banta/sdk 4.0.14 → 4.0.17

package/esm2015/lib/emoji/emoji-selector-button.component.js

@@ -1,7 +1,9 @@
-import { Component, ElementRef, Output, ViewChild } from '@angular/core';
+/// <reference types="@types/resize-observer-browser" />
+import { Component, ElementRef, HostBinding, Output, ViewChild } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 export class EmojiSelectorButtonComponent {
-    constructor() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this._selected = new Subject();
         this.showEmojiPanel = false;
     }
@@ -12,8 +14,8 @@ export class EmojiSelectorButtonComponent {
         this.removeListener();
         this.panelElement.nativeElement.remove();
     }
+    get widthConstrained() { return this.width < 700; }
     ngAfterViewInit() {
-        this.putPanelAtRoot();
     }
     putPanelAtRoot() {
         // If we are in full-screen, placing the panel outside of the full-screen element will result in it 
@@ -27,12 +29,17 @@ export class EmojiSelectorButtonComponent {
         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) {
+        }
         Object.assign(this.panelElement.nativeElement.style, {
             top: `${window.scrollY + pos.top + pos.height}px`,
             left: `${Math.max(0, left)}px`
@@ -44,13 +51,32 @@ export class EmojiSelectorButtonComponent {
             return;
         }
         this.showEmojiPanel = true;
-        this.place();
+        //this.place();
         setTimeout(() => {
-            this.resizeListener = () => {
+            let onResize = () => {
                 if (!this.showEmojiPanel)
                     return;
-                this.place();
+                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;
@@ -93,8 +119,8 @@ EmojiSelectorButtonComponent.decorators = [
 
         emoji-selector-panel {
             position: absolute;
-            /* bottom: 2.5em;
-            right: 0; */
+            top: 2.5em;
+            right: 0;
             opacity: 0;
             pointer-events: none;
             z-index: 10;
@@ -108,29 +134,16 @@ EmojiSelectorButtonComponent.decorators = [
         button {
             color: #666
         }
-
-        /* :host.bottom-left emoji-selector-panel {
-            right: auto;
-            left: 0;
-        }
-
-        :host.top-right emoji-selector-panel {
-            top: 2.4em;
-            bottom: auto;
-        }
-
-        :host.top-left emoji-selector-panel {
-            top: 2.4em;
-            bottom: auto;
-            left: 0;
-            right: auto;
-        } */
     `]
             },] }
 ];
+EmojiSelectorButtonComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
 EmojiSelectorButtonComponent.propDecorators = {
     selected: [{ type: Output }],
     panelElement: [{ type: ViewChild, args: ['panel', { read: ElementRef },] }],
-    buttonElement: [{ type: ViewChild, args: ['button', { read: ElementRef },] }]
+    buttonElement: [{ type: ViewChild, args: ['button', { read: ElementRef },] }],
+    widthConstrained: [{ type: HostBinding, args: ['class.width-constrained',] }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1vamktc2VsZWN0b3ItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Nkay9zcmMvbGliL2Vtb2ppL2Vtb2ppLXNlbGVjdG9yLWJ1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6RSxPQUFPLEVBQUUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQXdEM0MsTUFBTSxPQUFPLDRCQUE0QjtJQXREekM7UUF3RFksY0FBUyxHQUFHLElBQUksT0FBTyxFQUFVLENBQUM7UUFHMUMsbUJBQWMsR0FBRyxLQUFLLENBQUM7SUFnRzNCLENBQUM7SUE5RkcsSUFDSSxRQUFRO1FBQ1IsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzFCLENBQUM7SUFRRCxXQUFXO1FBQ1AsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQzdDLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFTyxjQUFjO1FBQ2xCLG9HQUFvRztRQUNwRyx1R0FBdUc7UUFDdkcsU0FBUztRQUVULElBQUksSUFBSSxHQUFHLFFBQVEsQ0FBQyxpQkFBaUIsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLENBQUMsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDO1FBQ3RHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUN0RCxDQUFDO0lBRU8sY0FBYztRQUNsQixRQUFRLENBQUMsbUJBQW1CLENBQUMsT0FBTyxFQUFFLElB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S04sU0FBUyxTQUFDLE9BQU8sRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7NEJBR3ZDLFNBQVMsU0FBQyxRQUFRLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTdWJqZWN0LCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnZW1vamktc2VsZWN0b3ItYnV0dG9uJyxcclxuICAgIHRlbXBsYXRlOiBgXHJcbiAgICAgICAgPGJ1dHRvbiAjYnV0dG9uIHR5cGU9XCJidXR0b25cIiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cInNob3coKVwiPlxyXG4gICAgICAgICAgICA8bWF0LWljb24+ZW1vamlfZW1vdGlvbnM8L21hdC1pY29uPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgIDxlbW9qaS1zZWxlY3Rvci1wYW5lbCBcclxuICAgICAgICAgICAgI3BhbmVsXHJcbiAgICAgICAgICAgIChzZWxlY3RlZCk9XCJpbnNlcnQoJGV2ZW50KVwiXHJcbiAgICAgICAgICAgIFtjbGFzcy52aXNpYmxlXT1cInNob3dFbW9qaVBhbmVsXCJcclxuICAgICAgICAgICAgPjwvZW1vamktc2VsZWN0b3ItcGFuZWw+XHJcbiAgICBgLFxyXG4gICAgc3R5bGVzOiBbYFxyXG4gICAgICAgIDpob3N0IHtcclxuICAgICAgICAgICAgZGlzcGxheTogYmxvY2s7XHJcbiAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGVtb2ppLXNlbGVjdG9yLXBhbmVsIHtcclxuICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xyXG4gICAgICAgICAgICAvKiBib3R0b206IDIuNWVtO1xyXG4gICAgICAgICAgICByaWdodDogMDsgKi9cclxuICAgICAgICAgICAgb3BhY2l0eTogMDtcclxuICAgICAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XHJcbiAgICAgICAgICAgIHotaW5kZXg6IDEwO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgZW1vamktc2VsZWN0b3ItcGFuZWwudmlzaWJsZSB7XHJcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBpbml0aWFsO1xyXG4gICAgICAgICAgICBvcGFjaXR5OiAxO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgYnV0dG9uIHtcclxuICAgICAgICAgICAgY29sb3I6ICM2NjZcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIC8qIDpob3N0LmJvdHRvbS1sZWZ0IGVtb2ppLXNlbGVjdG9yLXBhbmVsIHtcclxuICAgICAgICAgICAgcmlnaHQ6IGF1dG87XHJcbiAgICAgICAgICAgIGxlZnQ6IDA7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICA6aG9zdC50b3AtcmlnaHQgZW1vamktc2VsZWN0b3ItcGFuZWwge1xyXG4gICAgICAgICAgICB0b3A6IDIuNGVtO1xyXG4gICAgICAgICAgICBib3R0b206IGF1dG87XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICA6aG9zdC50b3AtbGVmdCBlbW9qaS1zZWxlY3Rvci1wYW5lbCB7XHJcbiAgICAgICAgICAgIHRvcDogMi40ZW07XHJcbiAgICAgICAgICAgIGJvdHRvbTogYXV0bztcclxuICAgICAgICAgICAgbGVmdDogMDtcclxuICAgICAgICAgICAgcmlnaHQ6IGF1dG87XHJcbiAgICAgICAgfSAqL1xyXG4gICAgYF1cclxufSlcclxuZXhwb3J0IGNsYXNzIEVtb2ppU2VsZWN0b3JCdXR0b25Db21wb25lbnQge1xyXG5cclxuICAgIHByaXZhdGUgX3NlbGVjdGVkID0gbmV3IFN1YmplY3Q8c3RyaW5nPigpO1xyXG4gICAgcHJpdmF0ZSBjbGlja0xpc3RlbmVyIDogYW55O1xyXG4gICAgcHJpdmF0ZSByZXNpemVMaXN0ZW5lciA6IGFueTtcclxuICAgIHNob3dFbW9qaVBhbmVsID0gZmFsc2U7XHJcblxyXG4gICAgQE91dHB1dCgpXHJcbiAgICBnZXQgc2VsZWN0ZWQoKSA6IE9ic2VydmFibGU8c3RyaW5nPiB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuX3NlbGVjdGVkO1xyXG4gICAgfVxyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ3BhbmVsJywgeyByZWFkOiBFbGVtZW50UmVmIH0pXHJcbiAgICBwYW5lbEVsZW1lbnQgOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdidXR0b24nLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSlcclxuICAgIGJ1dHRvbkVsZW1lbnQgOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PjtcclxuXHJcbiAgICBuZ09uRGVzdHJveSgpIHtcclxuICAgICAgICB0aGlzLnJlbW92ZUxpc3RlbmVyKCk7XHJcbiAgICAgICAgdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5yZW1vdmUoKTtcclxuICAgIH1cclxuXHJcbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICAgICAgdGhpcy5wdXRQYW5lbEF0Um9vdCgpO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgcHV0UGFuZWxBdFJvb3QoKSB7XHJcbiAgICAgICAgLy8gSWYgd2UgYXJlIGluIGZ1bGwtc2NyZWVuLCBwbGFjaW5nIHRoZSBwYW5lbCBvdXRzaWRlIG9mIHRoZSBmdWxsLXNjcmVlbiBlbGVtZW50IHdpbGwgcmVzdWx0IGluIGl0IFxyXG4gICAgICAgIC8vIGFsd2F5cyBiZWluZyBiZWhpbmQgc2FpZCBmdWxsLXNjcmVlbiBlbGVtZW50LCBzbyB3ZSBuZWVkIHRvIGVuc3VyZSB3ZSBuZXZlciBwbGFjZSBpdCBmdXJ0aGVyIHVwIHRoZSBcclxuICAgICAgICAvLyBzdGFjay5cclxuICAgICAgICBcclxuICAgICAgICBsZXQgcm9vdCA9IGRvY3VtZW50LmZ1bGxzY3JlZW5FbGVtZW50IHx8IGRvY3VtZW50LmJvZHkucXVlcnlTZWxlY3RvcignW25nLXZlcnNpb25dJykgfHwgZG9jdW1lbnQuYm9keTtcclxuICAgICAgICByb290LmFwcGVuZENoaWxkKHRoaXMucGFuZWxFbGVtZW50Lm5hdGl2ZUVsZW1lbnQpO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgcmVtb3ZlTGlzdGVuZXIoKSB7XHJcbiAgICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmNsaWNrTGlzdGVuZXIpO1xyXG4gICAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdyZXNpemUnLCB0aGlzLnJlc2l6ZUxpc3RlbmVyKTtcclxuICAgIH1cclxuXHJcbiAgICBwbGFjZSgpIHtcclxuICAgICAgICB0aGlzLnB1dFBhbmVsQXRSb290KCk7XHJcbiAgICAgICAgbGV0IHBvcyA9IHRoaXMuYnV0dG9uRWxlbWVudC5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgICAgIGxldCBzaXplID0gdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgICAgICBsZXQgbGVmdCA9IHdpbmRvdy5zY3JvbGxYICsgcG9zLmxlZnQgKyBwb3Mud2lkdGggLSBzaXplLndpZHRoO1xyXG4gICAgICAgIGlmIChsZWZ0IDwgMClcclxuICAgICAgICAgICAgbGVmdCA9ICh3aW5kb3cuc2Nyb2xsWCArIHdpbmRvdy5pbm5lcldpZHRoKSAvIDIgLSBzaXplLndpZHRoIC8gMjtcclxuXHJcbiAgICAgICAgT2JqZWN0LmFzc2lnbihcclxuICAgICAgICAgICAgdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5zdHlsZSxcclxuICAgICAgICAgICAge1xyXG4gICAgICAgICAgICAgICAgdG9wOiBgJHt3aW5kb3cuc2Nyb2xsWSArIHBvcy50b3AgKyBwb3MuaGVpZ2h0fXB4YCxcclxuICAgICAgICAgICAgICAgIGxlZnQ6IGAke01hdGgubWF4KDAsIGxlZnQpfXB4YFxyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgKTtcclxuICAgIH1cclxuXHJcbiAgICBzaG93KCkge1xyXG4gICAgICAgIGlmICh0aGlzLnNob3dFbW9qaVBhbmVsKSB7XHJcbiAgICAgICAgICAgIHRoaXMuc2hvd0Vtb2ppUGFuZWwgPSBmYWxzZTtcclxuICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGhpcy5zaG93RW1vamlQYW5lbCA9IHRydWU7XHJcbiAgICAgICAgdGhpcy5wbGFjZSgpO1xyXG5cclxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICAgICAgdGhpcy5yZXNpemVMaXN0ZW5lciA9ICgpID0+IHtcclxuICAgICAgICAgICAgICAgIGlmICghdGhpcy5zaG93RW1vamlQYW5lbClcclxuICAgICAgICAgICAgICAgICAgICByZXR1cm47XHJcbiAgICAgICAgICAgICAgICB0aGlzLnBsYWNlKCk7XHJcbiAgICAgICAgICAgIH07XHJcblxyXG4gICAgICAgICAgICB0aGlzLmNsaWNrTGlzdGVuZXIgPSAoZXYgOiBNb3VzZUV2ZW50KSA9PiB7XHJcblxyXG4gICAgICAgICAgICAgICAgbGV0IHBhcmVudCA9IDxIVE1MRWxlbWVudD4gZXYudGFyZ2V0O1xyXG4gICAgICAgICAgICAgICAgbGV0IGlzSW5EaWFsb2cgPSBmYWxzZTtcclxuICAgICAgICAgICAgICAgIFxyXG4gICAgICAgICAgICAgICAgd2hpbGUgKHBhcmVudCkge1xyXG4gICAgICAgICAgICAgICAgICAgIGlmIChwYXJlbnQubWF0Y2hlcygnZW1vamktc2VsZWN0b3ItcGFuZWwnKSlcclxuICAgICAgICAgICAgICAgICAgICAgICAgaXNJbkRpYWxvZyA9IHRydWU7XHJcblxyXG4gICAgICAgICAgICAgICAgICAgIHBhcmVudCA9IHBhcmVudC5wYXJlbnRFbGVtZW50O1xyXG4gICAgICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgICAgIGlmIChpc0luRGlhbG9nKVxyXG4gICAgICAgICAgICAgICAgICAgIHJldHVybjtcclxuXHJcbiAgICAgICAgICAgICAgICB0aGlzLnNob3dFbW9qaVBhbmVsID0gZmFsc2U7XHJcbiAgICAgICAgICAgICAgICB0aGlzLnJlbW92ZUxpc3RlbmVyKCk7XHJcbiAgICAgICAgICAgIH07XHJcbiAgICBcclxuICAgICAgICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmNsaWNrTGlzdGVuZXIpO1xyXG4gICAgICAgICAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcigncmVzaXplJywgdGhpcy5yZXNpemVMaXN0ZW5lcik7XHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgaW5zZXJ0KHN0cikge1xyXG4gICAgICAgIHRoaXMuX3NlbGVjdGVkLm5leHQoc3RyKTtcclxuICAgIH1cclxufSJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW1vamktc2VsZWN0b3ItYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Nkay9zcmMvbGliL2Vtb2ppL2Vtb2ppLXNlbGVjdG9yLWJ1dHRvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsd0RBQXdEO0FBRXhELE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RGLE9BQU8sRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBdUMzQyxNQUFNLE9BQU8sNEJBQTRCO0lBQ3JDLFlBQW9CLFVBQW1DO1FBQW5DLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBSS9DLGNBQVMsR0FBRyxJQUFJLE9BQU8sRUFBVSxDQUFDO1FBRzFDLG1CQUFjLEdBQUcsS0FBSyxDQUFDO0lBTHZCLENBQUM7SUFPRCxJQUNJLFFBQVE7UUFDUixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDMUIsQ0FBQztJQVFELFdBQVc7UUFDUCxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxhQUFhLENBQUMsTUFBTSxFQUFFLENBQUM7SUFDN0MsQ0FBQztJQUtELElBQ0ksZ0JBQWdCLEtBQUssT0FBTyxJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFFbkQsZUFBZTtJQUNmLENBQUM7SUFFTyxjQUFjO1FBQ2xCLG9HQUFvRztRQUNwRyx1R0FBdUc7UUFDdkcsU0FBUztRQUVULElBQUksSUFBSSxHQUFHLFFBQVEsQ0FBQyxpQkFBaUIsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLENBQUMsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDO1FBQ3RHLElBQUksQ0FBQyxXQUFXLENBQUMs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O1lBL0tKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsdUJBQXVCO2dCQUNqQyxRQUFRLEVBQUU7Ozs7Ozs7OztLQVNUO3lCQUNROzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQXVCUjthQUNKOzs7WUF2Q21CLFVBQVU7Ozt1QkFrRHpCLE1BQU07MkJBS04sU0FBUyxTQUFDLE9BQU8sRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7NEJBR3ZDLFNBQVMsU0FBQyxRQUFRLEVBQUUsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFOytCQVd4QyxXQUFXLFNBQUMseUJBQXlCIiwic291cmNlc0NvbnRlbnQiOlsiLy8vIDxyZWZlcmVuY2UgdHlwZXM9XCJAdHlwZXMvcmVzaXplLW9ic2VydmVyLWJyb3dzZXJcIiAvPlxyXG5cclxuaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgT3V0cHV0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU3ViamVjdCwgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2Vtb2ppLXNlbGVjdG9yLWJ1dHRvbicsXHJcbiAgICB0ZW1wbGF0ZTogYFxyXG4gICAgICAgIDxidXR0b24gI2J1dHRvbiB0eXBlPVwiYnV0dG9uXCIgbWF0LWljb24tYnV0dG9uIChjbGljayk9XCJzaG93KClcIj5cclxuICAgICAgICAgICAgPG1hdC1pY29uPmVtb2ppX2Vtb3Rpb25zPC9tYXQtaWNvbj5cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICA8ZW1vamktc2VsZWN0b3ItcGFuZWwgXHJcbiAgICAgICAgICAgICNwYW5lbFxyXG4gICAgICAgICAgICAoc2VsZWN0ZWQpPVwiaW5zZXJ0KCRldmVudClcIlxyXG4gICAgICAgICAgICBbY2xhc3MudmlzaWJsZV09XCJzaG93RW1vamlQYW5lbFwiXHJcbiAgICAgICAgICAgID48L2Vtb2ppLXNlbGVjdG9yLXBhbmVsPlxyXG4gICAgYCxcclxuICAgIHN0eWxlczogW2BcclxuICAgICAgICA6aG9zdCB7XHJcbiAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICBlbW9qaS1zZWxlY3Rvci1wYW5lbCB7XHJcbiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgICAgICAgICAgdG9wOiAyLjVlbTtcclxuICAgICAgICAgICAgcmlnaHQ6IDA7XHJcbiAgICAgICAgICAgIG9wYWNpdHk6IDA7XHJcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xyXG4gICAgICAgICAgICB6LWluZGV4OiAxMDtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGVtb2ppLXNlbGVjdG9yLXBhbmVsLnZpc2libGUge1xyXG4gICAgICAgICAgICBwb2ludGVyLWV2ZW50czogaW5pdGlhbDtcclxuICAgICAgICAgICAgb3BhY2l0eTogMTtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGJ1dHRvbiB7XHJcbiAgICAgICAgICAgIGNvbG9yOiAjNjY2XHJcbiAgICAgICAgfVxyXG4gICAgYF1cclxufSlcclxuZXhwb3J0IGNsYXNzIEVtb2ppU2VsZWN0b3JCdXR0b25Db21wb25lbnQge1xyXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge1xyXG5cclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIF9zZWxlY3RlZCA9IG5ldyBTdWJqZWN0PHN0cmluZz4oKTtcclxuICAgIHByaXZhdGUgY2xpY2tMaXN0ZW5lciA6IGFueTtcclxuICAgIHByaXZhdGUgcmVzaXplTGlzdGVuZXIgOiBhbnk7XHJcbiAgICBzaG93RW1vamlQYW5lbCA9IGZhbHNlO1xyXG5cclxuICAgIEBPdXRwdXQoKVxyXG4gICAgZ2V0IHNlbGVjdGVkKCkgOiBPYnNlcnZhYmxlPHN0cmluZz4ge1xyXG4gICAgICAgIHJldHVybiB0aGlzLl9zZWxlY3RlZDtcclxuICAgIH1cclxuXHJcbiAgICBAVmlld0NoaWxkKCdwYW5lbCcsIHsgcmVhZDogRWxlbWVudFJlZiB9KVxyXG4gICAgcGFuZWxFbGVtZW50IDogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XHJcblxyXG4gICAgQFZpZXdDaGlsZCgnYnV0dG9uJywgeyByZWFkOiBFbGVtZW50UmVmIH0pXHJcbiAgICBidXR0b25FbGVtZW50IDogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XHJcblxyXG4gICAgbmdPbkRlc3Ryb3koKSB7XHJcbiAgICAgICAgdGhpcy5yZW1vdmVMaXN0ZW5lcigpO1xyXG4gICAgICAgIHRoaXMucGFuZWxFbGVtZW50Lm5hdGl2ZUVsZW1lbnQucmVtb3ZlKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSB3aWR0aDogbnVtYmVyO1xyXG4gICAgcHJpdmF0ZSBoZWlnaHQ6IG51bWJlcjtcclxuXHJcbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLndpZHRoLWNvbnN0cmFpbmVkJylcclxuICAgIGdldCB3aWR0aENvbnN0cmFpbmVkKCkgeyByZXR1cm4gdGhpcy53aWR0aCA8IDcwMDsgfVxyXG5cclxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIHB1dFBhbmVsQXRSb290KCkge1xyXG4gICAgICAgIC8vIElmIHdlIGFyZSBpbiBmdWxsLXNjcmVlbiwgcGxhY2luZyB0aGUgcGFuZWwgb3V0c2lkZSBvZiB0aGUgZnVsbC1zY3JlZW4gZWxlbWVudCB3aWxsIHJlc3VsdCBpbiBpdCBcclxuICAgICAgICAvLyBhbHdheXMgYmVpbmcgYmVoaW5kIHNhaWQgZnVsbC1zY3JlZW4gZWxlbWVudCwgc28gd2UgbmVlZCB0byBlbnN1cmUgd2UgbmV2ZXIgcGxhY2UgaXQgZnVydGhlciB1cCB0aGUgXHJcbiAgICAgICAgLy8gc3RhY2suXHJcbiAgICAgICAgXHJcbiAgICAgICAgbGV0IHJvb3QgPSBkb2N1bWVudC5mdWxsc2NyZWVuRWxlbWVudCB8fCBkb2N1bWVudC5ib2R5LnF1ZXJ5U2VsZWN0b3IoJ1tuZy12ZXJzaW9uXScpIHx8IGRvY3VtZW50LmJvZHk7XHJcbiAgICAgICAgcm9vdC5hcHBlbmRDaGlsZCh0aGlzLnBhbmVsRWxlbWVudC5uYXRpdmVFbGVtZW50KTtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIHJlbW92ZUxpc3RlbmVyKCkge1xyXG4gICAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgdGhpcy5jbGlja0xpc3RlbmVyKTtcclxuICAgICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigncmVzaXplJywgdGhpcy5yZXNpemVMaXN0ZW5lcik7XHJcbiAgICB9XHJcblxyXG4gICAgcGxhY2UoKSB7XHJcbiAgICAgICAgLy8gTm90IGN1cnJlbnRseSB1c2VkIGFzIGl0IGNhbid0IGJlIGVhc2lseSBkb25lIGhhbmRsaW5nIGFsbCBcclxuICAgICAgICAvLyBzY3JvbGxpbmcgY29ybmVyIGNhc2VzLlxyXG5cclxuICAgICAgICB0aGlzLnB1dFBhbmVsQXRSb290KCk7XHJcbiAgICAgICAgbGV0IHBvcyA9IHRoaXMuYnV0dG9uRWxlbWVudC5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgICAgIGxldCBzaXplID0gdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcclxuICAgICAgICBsZXQgbGVmdCA9IHdpbmRvdy5zY3JvbGxYICsgcG9zLmxlZnQgKyBwb3Mud2lkdGggLSBzaXplLndpZHRoO1xyXG4gICAgICAgIGlmIChsZWZ0IDwgMClcclxuICAgICAgICAgICAgbGVmdCA9ICh3aW5kb3cuc2Nyb2xsWCArIHdpbmRvdy5pbm5lcldpZHRoKSAvIDIgLSBzaXplLndpZHRoIC8gMjtcclxuICAgICAgICBsZXQgc2Nyb2xsWSA9IHdpbmRvdy5zY3JvbGxZO1xyXG4gICAgICAgIGlmIChkb2N1bWVudC5mdWxsc2NyZWVuRWxlbWVudCkge1xyXG4gICAgICAgICAgICBcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIE9iamVjdC5hc3NpZ24oXHJcbiAgICAgICAgICAgIHRoaXMucGFuZWxFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuc3R5bGUsXHJcbiAgICAgICAgICAgIHtcclxuICAgICAgICAgICAgICAgIHRvcDogYCR7d2luZG93LnNjcm9sbFkgKyBwb3MudG9wICsgcG9zLmhlaWdodH1weGAsXHJcbiAgICAgICAgICAgICAgICBsZWZ0OiBgJHtNYXRoLm1heCgwLCBsZWZ0KX1weGBcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICk7XHJcbiAgICB9XHJcblxyXG4gICAgc2hvdygpIHtcclxuICAgICAgICBpZiAodGhpcy5zaG93RW1vamlQYW5lbCkge1xyXG4gICAgICAgICAgICB0aGlzLnNob3dFbW9qaVBhbmVsID0gZmFsc2U7XHJcbiAgICAgICAgICAgIHJldHVybjtcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIHRoaXMuc2hvd0Vtb2ppUGFuZWwgPSB0cnVlO1xyXG4gICAgICAgIC8vdGhpcy5wbGFjZSgpO1xyXG5cclxuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcclxuICAgICAgICAgICAgbGV0IG9uUmVzaXplID0gKCkgPT4ge1xyXG4gICAgICAgICAgICAgICAgaWYgKCF0aGlzLnNob3dFbW9qaVBhbmVsKVxyXG4gICAgICAgICAgICAgICAgICAgIHJldHVybjtcclxuICAgICAgICAgICAgICAgIHRoaXMud2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aDtcclxuICAgICAgICAgICAgICAgIHRoaXMuaGVpZ2h0ID0gd2luZG93LmlubmVySGVpZ2h0O1xyXG5cclxuICAgICAgICAgICAgICAgIGxldCBlZGdlT2Zmc2V0ID0gMDtcclxuICAgICAgICAgICAgICAgIGxldCBjb21tZW50RmllbGQgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jbG9zZXN0KGBiYW50YS1jb21tZW50LWZpZWxkYCk7XHJcbiAgICAgICAgICAgICAgICBpZiAoY29tbWVudEZpZWxkKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgbGV0IHNpemUgPSBjb21tZW50RmllbGQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcbiAgICAgICAgICAgICAgICAgICAgdGhpcy53aWR0aCA9IHNpemUud2lkdGg7XHJcbiAgICAgICAgICAgICAgICAgICAgZWRnZU9mZnNldCA9IHdpbmRvdy5pbm5lcldpZHRoIC0gc2l6ZS5yaWdodDtcclxuICAgICAgICAgICAgICAgIH1cclxuXHJcbiAgICAgICAgICAgICAgICBsZXQgYnV0dG9uUmVjdCA9IHRoaXMuYnV0dG9uRWxlbWVudC5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xyXG4gICAgICAgICAgICAgICAgbGV0IGJ1dHRvblJpZ2h0ID0gd2luZG93LmlubmVyV2lkdGggLSBidXR0b25SZWN0LnJpZ2h0IC0gZWRnZU9mZnNldCAtIDEwO1xyXG5cclxuICAgICAgICAgICAgICAgIGlmICh0aGlzLndpZHRoIDwgNzAwKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5wYW5lbEVsZW1lbnQubmF0aXZlRWxlbWVudC5zdHlsZS5yaWdodCA9IGAkey1idXR0b25SaWdodH1weGA7XHJcbiAgICAgICAgICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICAgICAgICAgIHRoaXMucGFuZWxFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuc3R5bGUucmlnaHQgPSAnJztcclxuICAgICAgICAgICAgICAgIH1cclxuXHJcbiAgICAgICAgICAgICAgICB0aGlzLnBhbmVsRWxlbWVudC5uYXRpdmVFbGVtZW50LnN0eWxlLm1heFdpZHRoID0gYCR7dGhpcy53aWR0aCAtIDE1fXB4YDtcclxuICAgICAgICAgICAgfTtcclxuXHJcbiAgICAgICAgICAgIHRoaXMucmVzaXplTGlzdGVuZXIgPSBvblJlc2l6ZTtcclxuICAgICAgICAgICAgb25SZXNpemUoKTtcclxuXHJcbiAgICAgICAgICAgIHRoaXMuY2xpY2tMaXN0ZW5lciA9IChldiA6IE1vdXNlRXZlbnQpID0+IHtcclxuXHJcbiAgICAgICAgICAgICAgICBsZXQgcGFyZW50ID0gPEhUTUxFbGVtZW50PiBldi50YXJnZXQ7XHJcbiAgICAgICAgICAgICAgICBsZXQgaXNJbkRpYWxvZyA9IGZhbHNlO1xyXG4gICAgICAgICAgICAgICAgXHJcbiAgICAgICAgICAgICAgICB3aGlsZSAocGFyZW50KSB7XHJcbiAgICAgICAgICAgICAgICAgICAgaWYgKHBhcmVudC5tYXRjaGVzKCdlbW9qaS1zZWxlY3Rvci1wYW5lbCcpKVxyXG4gICAgICAgICAgICAgICAgICAgICAgICBpc0luRGlhbG9nID0gdHJ1ZTtcclxuXHJcbiAgICAgICAgICAgICAgICAgICAgcGFyZW50ID0gcGFyZW50LnBhcmVudEVsZW1lbnQ7XHJcbiAgICAgICAgICAgICAgICB9XHJcblxyXG4gICAgICAgICAgICAgICAgaWYgKGlzSW5EaWFsb2cpXHJcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuO1xyXG5cclxuICAgICAgICAgICAgICAgIHRoaXMuc2hvd0Vtb2ppUGFuZWwgPSBmYWxzZTtcclxuICAgICAgICAgICAgICAgIHRoaXMucmVtb3ZlTGlzdGVuZXIoKTtcclxuICAgICAgICAgICAgfTtcclxuICAgIFxyXG4gICAgICAgICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIHRoaXMuY2xpY2tMaXN0ZW5lcik7XHJcbiAgICAgICAgICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCB0aGlzLnJlc2l6ZUxpc3RlbmVyKTtcclxuICAgICAgICB9KTtcclxuICAgIH1cclxuXHJcbiAgICBpbnNlcnQoc3RyKSB7XHJcbiAgICAgICAgdGhpcy5fc2VsZWN0ZWQubmV4dChzdHIpO1xyXG4gICAgfVxyXG59Il19

package/esm2015/lib/emoji/emoji-selector-panel/emoji-selector-panel.component.js

@@ -74,7 +74,7 @@ EmojiSelectorPanelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'emoji-selector-panel',
                 template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>",
-                styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}"]
+                styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}"]
             },] }
 ];
 EmojiSelectorPanelComponent.ctorParameters = () => [

package/fesm2015/banta-sdk.js

@@ -1,6 +1,6 @@
 import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish } from 'rxjs/operators';
-import { Component, Input, ViewChild, NgModule, Output, ElementRef, HostBinding, Injectable, Inject } from '@angular/core';
+import { Component, Input, ViewChild, NgModule, Output, ElementRef, HostBinding, NgZone, Injectable, Inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -6761,7 +6761,7 @@ EmojiSelectorPanelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'emoji-selector-panel',
                 template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>",
-                styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}"]
+                styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:opacity .4s ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width:500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}"]
             },] }
 ];
 EmojiSelectorPanelComponent.ctorParameters = () => [
@@ -6771,8 +6771,10 @@ EmojiSelectorPanelComponent.propDecorators = {
     selected: [{ type: Output }]
 };
 
+/// <reference types="@types/resize-observer-browser" />
 class EmojiSelectorButtonComponent {
-    constructor() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this._selected = new Subject();
         this.showEmojiPanel = false;
     }
@@ -6783,8 +6785,8 @@ class EmojiSelectorButtonComponent {
         this.removeListener();
         this.panelElement.nativeElement.remove();
     }
+    get widthConstrained() { return this.width < 700; }
     ngAfterViewInit() {
-        this.putPanelAtRoot();
     }
     putPanelAtRoot() {
         // If we are in full-screen, placing the panel outside of the full-screen element will result in it 
@@ -6798,12 +6800,17 @@ class EmojiSelectorButtonComponent {
         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) {
+        }
         Object.assign(this.panelElement.nativeElement.style, {
             top: `${window.scrollY + pos.top + pos.height}px`,
             left: `${Math.max(0, left)}px`
@@ -6815,13 +6822,32 @@ class EmojiSelectorButtonComponent {
             return;
         }
         this.showEmojiPanel = true;
-        this.place();
+        //this.place();
         setTimeout(() => {
-            this.resizeListener = () => {
+            let onResize = () => {
                 if (!this.showEmojiPanel)
                     return;
-                this.place();
+                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;
@@ -6864,8 +6890,8 @@ EmojiSelectorButtonComponent.decorators = [
 
         emoji-selector-panel {
             position: absolute;
-            /* bottom: 2.5em;
-            right: 0; */
+            top: 2.5em;
+            right: 0;
             opacity: 0;
             pointer-events: none;
             z-index: 10;
@@ -6879,30 +6905,17 @@ EmojiSelectorButtonComponent.decorators = [
         button {
             color: #666
         }
-
-        /* :host.bottom-left emoji-selector-panel {
-            right: auto;
-            left: 0;
-        }
-
-        :host.top-right emoji-selector-panel {
-            top: 2.4em;
-            bottom: auto;
-        }
-
-        :host.top-left emoji-selector-panel {
-            top: 2.4em;
-            bottom: auto;
-            left: 0;
-            right: auto;
-        } */
     `]
             },] }
 ];
+EmojiSelectorButtonComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
 EmojiSelectorButtonComponent.propDecorators = {
     selected: [{ type: Output }],
     panelElement: [{ type: ViewChild, args: ['panel', { read: ElementRef },] }],
-    buttonElement: [{ type: ViewChild, args: ['button', { read: ElementRef },] }]
+    buttonElement: [{ type: ViewChild, args: ['button', { read: ElementRef },] }],
+    widthConstrained: [{ type: HostBinding, args: ['class.width-constrained',] }]
 };
 
 const COMPONENTS$1 = [
@@ -7782,8 +7795,8 @@ class CommentComponent {
 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        {{message.message}}\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\">\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    </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    <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=\"Comment\" 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}:host .actions banta-timestamp{color:#666;font-size:10pt}.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}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:44px}:host .message-content .content{margin-left:44px;margin-right:.5em}}.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}"]
+                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        {{message.message}}\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=\"Comment\" 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}"]
             },] }
 ];
 CommentComponent.propDecorators = {
@@ -8055,15 +8068,17 @@ CommentViewComponent.propDecorators = {
     sortOrderChanged: [{ type: Output }]
 };
 
+/// <reference types="@types/resize-observer-browser" />
 /**
  * Comments component
  */
 class BantaCommentsComponent {
-    constructor(backend, elementRef, activatedRoute, matSnackBar) {
+    constructor(backend, elementRef, activatedRoute, matSnackBar, ngZone) {
         this.backend = backend;
         this.elementRef = elementRef;
         this.activatedRoute = activatedRoute;
         this.matSnackBar = matSnackBar;
+        this.ngZone = ngZone;
         // Loading Screen
         this._loadingMessage = '';
         this.loadingMessageVisible = false;
@@ -8183,8 +8198,22 @@ class BantaCommentsComponent {
             }
         }
     }
+    get isMobileSized() { return this.width < 500; }
+    ngAfterViewInit() {
+        let callback = () => {
+            let size = this.elementRef.nativeElement.getBoundingClientRect();
+            this.ngZone.run(() => {
+                this.width = size.width;
+                this.height = size.height;
+            });
+        };
+        this.resizeObserver = new ResizeObserver(callback);
+        this.resizeObserver.observe(this.elementRef.nativeElement);
+        callback();
+    }
     ngOnDestroy() {
         this._subs.unsubscribe();
+        this.resizeObserver.disconnect();
     }
     setSourceFromTopicID(topicID) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -8522,16 +8551,18 @@ BantaCommentsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-comments',
                 template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading Comments</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-content select=\".reply-send-options\"></ng-content>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <banta-comment-view\r\n            [class.faded]=\"selectedMessage\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            ></banta-comment-view>\r\n    </div>\r\n</ng-container>\r\n",
-                styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:4em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}@media (max-width:450px){banta-comment-sort{margin:0;width:100%}}"]
+                styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:4em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}@media (max-width:500px){.focused .replies{margin-left:0}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}"]
             },] }
 ];
 BantaCommentsComponent.ctorParameters = () => [
     { type: ChatBackendBase },
     { type: ElementRef },
     { type: ActivatedRoute },
-    { type: MatSnackBar }
+    { type: MatSnackBar },
+    { type: NgZone }
 ];
 BantaCommentsComponent.propDecorators = {
+    isMobileSized: [{ type: HostBinding, args: ['class.banta-mobile',] }],
     loadingMessages: [{ type: Input }],
     signInLabel: [{ type: Input }],
     sendLabel: [{ type: Input }],
@@ -8871,7 +8902,7 @@ CommentFieldComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-comment-field',
                 template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                        <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                        {{sendError.message}}\r\n                    </div>\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button (addedAttachment)=\"addedAttachment($event)\" *ngIf=\"allowAttachments\"></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"chatMessageAttachments && chatMessageAttachments.length\" class=\"message-attachments-container\">\r\n                <div *ngFor=\"let attachment of chatMessageAttachments; index as attachmentIndex\"\r\n                    class=\"message-attachment\">\r\n                    <button (click)=\"removeAttachment(attachmentIndex)\" mat-mini-fab color=\"primary\" class=\"remove-img\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                    <img [src]=\"attachment.url\" alt=\"Message Attachment\">\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"canComment && ((!text && !chatMessageAttachments.length) || sending)\"\r\n                >\r\n                <ng-container *ngIf=\"canComment\">\r\n                    <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                </ng-container>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!canComment\">\r\n                        {{permissionDeniedLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"canComment\">\r\n                        <ng-container *ngIf=\"!sending\">\r\n                            {{sendLabel}}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"sending\">\r\n                            {{sendingLabel}}\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </span>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
-                styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative}.message-attachments-container .message-attachment img{width:300px;border-radius:10px}.message-attachments-container .message-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row{position:relative}"]
+                styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}:host-context(.banta-mobile) button.send .label{display:none}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative}.message-attachments-container .message-attachment img{width:300px;border-radius:10px}.message-attachments-container .message-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row{position:relative}"]
             },] }
 ];
 CommentFieldComponent.propDecorators = {