@datarailsshared/datarailsshared 1.4.101 → 1.4.102

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -5410,8 +5410,10 @@
     var DrChatComponent = /** @class */ (function () {
         function DrChatComponent(cdr) {
             this.cdr = cdr;
+            this.showClearButton = true;
             this.noMessagesPlaceholder = 'No messages yet.';
             this._scrollBottom = true;
+            this.clear = new i0.EventEmitter();
         }
         Object.defineProperty(DrChatComponent.prototype, "scrollBottom", {
             /**
@@ -5451,9 +5453,9 @@
     DrChatComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-chat',
-                    template: "<div class=\"header\">\n    {{ title }}\n</div>\n\n<div class=\"scrollable\">\n    <div class=\"messages\" #messagesContainer>\n        <ng-content select=\"dr-chat-message\"></ng-content>\n        <p class=\"no-messages\" *ngIf=\"!messages?.length\">{{ noMessagesPlaceholder }}</p>\n    </div>\n</div>\n\n<div class=\"form\">\n    <ng-content select=\"dr-chat-form\"></ng-content>\n</div>\n",
+                    template: "<div class=\"header\">\n    {{ title }}\n    <dr-button *ngIf=\"showClearButton\"\n               (click)=\"clear.emit($event)\"\n               theme=\"icon\"\n               icon=\"dr-icon-trash\"\n               class=\"ml-auto\"\n               title=\"Clear the history\">\n    </dr-button>\n</div>\n\n<div class=\"scrollable\">\n    <div class=\"messages\" #messagesContainer>\n        <ng-content select=\"dr-chat-message\"></ng-content>\n        <p class=\"no-messages\" *ngIf=\"!messages?.length\">{{ noMessagesPlaceholder }}</p>\n    </div>\n</div>\n\n<div class=\"form\">\n    <ng-content select=\"dr-chat-form\"></ng-content>\n</div>\n",
                     providers: [DrChatCustomMessageService],
-                    styles: [":host{display:flex;flex-grow:1;flex-direction:column;position:relative;height:100%;background-color:#fff;border:1px solid #e5e6ea;border-radius:8px;box-shadow:0 4px 8px 1px #00000040;color:#151b3f;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}:host .header{border-bottom:1px solid #e5e6ea;padding:16px 32px;font-weight:bold}:host .scrollable{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}:host .scrollable .messages{padding:16px;overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%}:host .scrollable .no-messages{text-align:center}\n"]
+                    styles: [":host{display:flex;flex-grow:1;flex-direction:column;position:relative;height:100%;background-color:#fff;border:1px solid #e5e6ea;border-radius:8px;box-shadow:0 4px 8px 1px #00000040;color:#151b3f;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}:host .header{display:flex;align-items:center;border-bottom:1px solid #e5e6ea;padding:16px 32px;font-weight:bold}:host .scrollable{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}:host .scrollable .messages{padding:16px;overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%}:host .scrollable .no-messages{text-align:center}\n"]
                 },] }
     ];
     DrChatComponent.ctorParameters = function () { return [
@@ -5461,11 +5463,13 @@
     ]; };
     DrChatComponent.propDecorators = {
         title: [{ type: i0.Input }],
+        showClearButton: [{ type: i0.Input }],
         noMessagesPlaceholder: [{ type: i0.Input }],
         scrollBottom: [{ type: i0.Input }],
         messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer',] }],
         messages: [{ type: i0.ContentChildren, args: [DrChatMessageComponent,] }],
-        chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }]
+        chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }],
+        clear: [{ type: i0.Output }]
     };
 
     /**