@banta/sdk 4.6.24 → 4.6.25

package/bundles/banta-sdk.umd.js

@@ -7461,6 +7461,8 @@
             this.showEmojiPanel = false;
             this.overlayX = 'end';
             this.overlayY = 'top';
+            this.originX = 'end';
+            this.originY = 'bottom';
         }
         Object.defineProperty(EmojiSelectorButtonComponent.prototype, "selected", {
             get: function () {
@@ -7482,12 +7484,12 @@
          */
         EmojiSelectorButtonComponent.prototype.insert = function (str) {
             this._selected.next(str);
+            this.close();
         };
         EmojiSelectorButtonComponent.prototype.close = function () {
             if (this.overlayRef) {
                 this.overlayRef.dispose();
                 this.overlayRef = null;
-                return;
             }
         };
         EmojiSelectorButtonComponent.prototype.show = function () {
@@ -7500,8 +7502,8 @@
                     .flexibleConnectedTo(this.elementRef)
                     .withPositions([
                     {
-                        originX: 'end',
-                        originY: 'bottom',
+                        originX: this.originX,
+                        originY: this.originY,
                         overlayX: this.overlayX,
                         overlayY: this.overlayY
                     }
@@ -7540,7 +7542,9 @@
         selectorPanelTemplate: [{ type: core.ViewChild, args: ['selectorPanelTemplate',] }],
         selected: [{ type: core.Output }],
         overlayX: [{ type: core.Input }],
-        overlayY: [{ type: core.Input }]
+        overlayY: [{ type: core.Input }],
+        originX: [{ type: core.Input }],
+        originY: [{ type: core.Input }]
     };
 
     var COMPONENTS$1 = [
@@ -8430,7 +8434,10 @@
                         case 3:
                             _b.sent();
                             _b.label = 4;
-                        case 4: return [3 /*break*/, 6];
+                        case 4:
+                            this.chatView.scrollToLatest();
+                            this.inputElementRef.nativeElement.focus();
+                            return [3 /*break*/, 6];
                         case 5:
                             e_1 = _b.sent();
                             console.error("Failed to send message: ", message);
@@ -8446,7 +8453,7 @@
     BantaChatComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-chat',
-                    template: "<banta-chat-view \r\n    #chatView\r\n    [source]=\"source\"\r\n    [emptyLabel]=\"emptyLabel\"\r\n    (upvoted)=\"upvote($event)\"\r\n    (reported)=\"report($event)\"\r\n    (selected)=\"select($event)\"\r\n    (received)=\"onReceived($event)\"\r\n    (userSelected)=\"selectUser($event)\"\r\n    ></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    \r\n    <div class=\"entry-container\">\r\n        <input\r\n            type=\"text\"\r\n            name=\"message\" \r\n            autocomplete=\"off\"\r\n            [placeholder]=\"messageFieldPlaceholder\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessage.message\" />\r\n            \r\n        <emoji-selector-button\r\n            (selected)=\"insertEmoji($event)\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n\r\n        <ng-container *ngIf=\"!user\">\r\n            <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button *ngIf=\"canChat\" [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n            <button *ngIf=\"!canChat\" type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
+                    template: "<banta-chat-view \r\n    #chatView\r\n    [source]=\"source\"\r\n    [emptyLabel]=\"emptyLabel\"\r\n    (upvoted)=\"upvote($event)\"\r\n    (reported)=\"report($event)\"\r\n    (selected)=\"select($event)\"\r\n    (received)=\"onReceived($event)\"\r\n    (userSelected)=\"selectUser($event)\"\r\n    ></banta-chat-view>\r\n\r\n<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    \r\n    <div class=\"entry-container\">\r\n        <input\r\n            #input\r\n            type=\"text\"\r\n            name=\"message\" \r\n            autocomplete=\"off\"\r\n            [placeholder]=\"messageFieldPlaceholder\"\r\n            (keydown)=\"onKeyDown($event)\"\r\n            [(ngModel)]=\"newMessage.message\" />\r\n            \r\n        <emoji-selector-button\r\n            (selected)=\"insertEmoji($event)\"\r\n            overlayY=\"bottom\"\r\n            overlayX=\"end\"\r\n            originY=\"top\"\r\n            ></emoji-selector-button>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n\r\n        <ng-container *ngIf=\"!user\">\r\n            <button type=\"button\" (click)=\"showSignIn()\" mat-raised-button color=\"primary\">{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button *ngIf=\"canChat\" [disabled]=\"!newMessage.message\" mat-raised-button color=\"primary\">{{sendLabel}}</button>\r\n            <button *ngIf=\"!canChat\" type=\"button\" (click)=\"sendPermissionError()\" mat-raised-button color=\"primary\">{{permissionDeniedLabel}}</button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
                     styles: [":host{flex-direction:column;border-radius:5px;padding:10px;font-size:10pt;min-height:1px}.entry-container,:host{display:flex;flex-grow:1}.entry-container{flex-direction:row;position:relative}.entry-container emoji-selector-button{position:absolute;right:0;top:.15em}.entry-container input{height:2.6em;font-size:12pt;padding-left:1em}.entry-container input:-webkit-autofill,.entry-container input:-webkit-autofill:focus,.entry-container input:-webkit-autofill:hover{outline:1px solid #9da302;-webkit-text-fill-color:#9da302;-webkit-box-shadow:0 0 0 1000px #211e07 inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;caret-color:#9da302}.entry-container emoji-selector-panel{pointer-events:none;opacity:0;position:absolute;bottom:3.5em;right:0}.entry-container emoji-selector-panel.visible{opacity:1;pointer-events:auto}form{display:flex;padding:.5em 0;align-items:center}form textarea{font-size:14pt;background:#000;color:#fff;border:1px solid #333;min-height:6em;width:100%}form input[type=text]{background:#fff;color:#000;border:1px solid #ccc;width:100%;height:2.5em}form .actions{margin-left:1em}form button{display:block;margin:0 0 0 auto}:host-context(.mat-dark-theme) form input[type=text]{background:#000;color:#fff;border:1px solid #333}"]
                 },] }
     ];
@@ -8469,7 +8476,8 @@
         permissionDeniedError: [{ type: core.Output }],
         signInSelected: [{ type: core.Output }],
         received: [{ type: core.Output }],
-        chatView: [{ type: core.ViewChild, args: ['chatView', { static: true },] }]
+        chatView: [{ type: core.ViewChild, args: ['chatView',] }],
+        inputElementRef: [{ type: core.ViewChild, args: ['input',] }]
     };
 
     var COMPONENTS$2 = [