@datarailsshared/datarailsshared 1.4.102 → 1.4.106

package/fesm2015/datarailsshared-datarailsshared.js

@@ -2111,9 +2111,14 @@ class DrPopoverService {
     getOverlayConfig(popoverModel) {
         if (!POPUP_POSITIONS[popoverModel.position])
             throw new Error(`DrPopover does not support the '${popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position}' position!`);
+        const position = Object.assign({}, POPUP_POSITIONS[popoverModel.position]);
+        if (popoverModel.overlayConfig.noPadding) {
+            position.offsetY = 0;
+            position.offsetX = 0;
+        }
         const config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
         const hostElement = this.getHostElement(popoverModel.hostRef);
-        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(popoverModel.hostRef).withPositions([POPUP_POSITIONS[popoverModel.position]]);
+        const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(popoverModel.hostRef).withPositions([position]);
         const overlayConfig = new OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy }, config));
         if (popoverModel.alignment === 'host' && hostElement) {
             const alignmentDimension = getAlignmentDimension(popoverModel.position);
@@ -3358,7 +3363,6 @@ var CHAT_MESSAGE_TYPE;
     CHAT_MESSAGE_TYPE["DOWNLOAD_FILE"] = "download-file";
     CHAT_MESSAGE_TYPE["MAILTO"] = "mailto";
     CHAT_MESSAGE_TYPE["EMBED"] = "embed";
-    CHAT_MESSAGE_TYPE["WIDGET"] = "widget";
     CHAT_MESSAGE_TYPE["INPUT"] = "input";
     CHAT_MESSAGE_TYPE["CODE"] = "code";
 })(CHAT_MESSAGE_TYPE || (CHAT_MESSAGE_TYPE = {}));
@@ -3368,7 +3372,7 @@ class ChatMessage {
         this.kind = obj === null || obj === void 0 ? void 0 : obj.kind;
         this.seq = obj === null || obj === void 0 ? void 0 : obj.seq;
         this.conversationId = obj === null || obj === void 0 ? void 0 : obj.conversationId;
-        this.reply = (obj === null || obj === void 0 ? void 0 : obj.senderId) !== user.id;
+        this.reply = (obj === null || obj === void 0 ? void 0 : obj.senderId) !== (user === null || user === void 0 ? void 0 : user.id);
         this.senderId = obj === null || obj === void 0 ? void 0 : obj.senderId;
         this.parentId = obj === null || obj === void 0 ? void 0 : obj.parentId;
         this.text = (obj === null || obj === void 0 ? void 0 : obj.text) || obj.body;
@@ -3379,6 +3383,8 @@ class ChatMessage {
         this.body = obj === null || obj === void 0 ? void 0 : obj.body;
         this.form = obj === null || obj === void 0 ? void 0 : obj.form;
         this.parameters = obj === null || obj === void 0 ? void 0 : obj.parameters;
+        this.useDefaultAvatar = obj === null || obj === void 0 ? void 0 : obj.useDefaultAvatar;
+        this.avatarUrl = obj === null || obj === void 0 ? void 0 : obj.avatarUrl;
     }
 }
 
@@ -4588,13 +4594,17 @@ class DrChatFormComponent {
     onModelChange(value) {
         this.inputChange.emit(value);
     }
+    getTextAreaHeight(textAreaElement) {
+        return textAreaElement.scrollHeight / 22 > textAreaElement.rows ?
+            'height: ' + textAreaElement.scrollHeight + 'px;' : '';
+    }
 }
 DrChatFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-chat-form',
-                template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n    <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n        <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n            <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n        </div>\n        <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n        <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n    </div>\n</div>\n<div class=\"message-row\">\n    <dr-input (focus)=\"inputFocus = true\"\n              (blur)=\"inputFocus = false\"\n              (mouseenter)=\"inputHover = true\"\n              (mouseleave)=\"inputHover = false\"\n              [(ngModel)]=\"message\"\n              (ngModelChange)=\"onModelChange($event)\"\n              type=\"text\"\n              placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n              (keyup.enter)=\"sendMessage()\">\n    </dr-input>\n    <dr-button (click)=\"sendMessage()\"\n               theme=\"icon\"\n               icon=\"dr-icon-notify\"\n               class=\"send-button\">\n    </dr-button>\n</div>\n",
+                template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n    <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n        <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n            <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n        </div>\n        <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n        <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n    </div>\n</div>\n<div class=\"message-row\">\n    <textarea #textAreaElement\n              (focus)=\"inputFocus = true\"\n              (blur)=\"inputFocus = false\"\n              (mouseenter)=\"inputHover = true\"\n              (mouseleave)=\"inputHover = false\"\n              [(ngModel)]=\"message\"\n              [rows]=\"1\"\n              [style]=\"getTextAreaHeight(textAreaElement)\"\n              (ngModelChange)=\"onModelChange($event)\"\n              type=\"text\"\n              placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n              (keyup.enter)=\"sendMessage()\">\n    </textarea>\n    <i (click)=\"sendMessage()\" class=\"dr-icon-notify send-button\"></i>\n</div>\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column;padding:16px;border-top:1px solid #ccc}:host .message-row{flex-direction:row;display:flex;align-items:center}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .send-button{margin-left:10px}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background:white;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"]
+                styles: [":host{display:flex;flex-direction:column;padding:0;border-top:1px solid #E5E6EA}:host .message-row{flex-direction:row;display:flex;align-items:center;flex-grow:1;padding:6px 34px 6px 30px;height:76px;overflow:hidden}:host .message-row textarea{border:none;font-size:14px;line-height:22px;max-height:100%;flex-grow:1;resize:none;padding:0;margin:auto}:host .message-row textarea::placeholder{color:#9ea1aa}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .send-button{margin-left:10px;cursor:pointer;color:#dfe0e3;font-size:28px}:host .send-button:hover{color:#4646ce}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background:white;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"]
             },] }
 ];
 DrChatFormComponent.ctorParameters = () => [
@@ -4642,6 +4652,7 @@ class DrChatMessageComponent {
         this.MESSAGE_TYPE = CHAT_MESSAGE_TYPE;
         this.MESSAGE_TYPE_CUSTOM = CHAT_MESSAGE_TYPE.EMBED;
         this._reply = false;
+        this._isEmpty = false;
     }
     get flyInOut() {
         return true;
@@ -4658,6 +4669,17 @@ class DrChatMessageComponent {
     set reply(value) {
         this._reply = !!value;
     }
+    /**
+     * The outer flag is whether the message is empty. Needed if it is impossible to calculate it inside.
+     *
+     * @type {boolean}
+     */
+    get isEmpty() {
+        return this._isEmpty;
+    }
+    set isEmpty(value) {
+        this._isEmpty = !!value;
+    }
     getTemplate() {
         this.customMessage = true;
         const customMessage = this.getCustomMessage(this.type);
@@ -4678,7 +4700,7 @@ class DrChatMessageComponent {
 DrChatMessageComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-chat-message',
-                template: "<div class=\"message\" [class.message--custom]=\"customMessage\">\n    <ng-container [ngSwitch]=\"message.kind\">\n        <dr-chat-message-text *ngSwitchCase=\"MESSAGE_TYPE.TEXT\" [message]=\"message\"></dr-chat-message-text>\n        <dr-chat-message-rich-text *ngSwitchCase=\"MESSAGE_TYPE.RICH_TEXT\" [message]=\"message\"></dr-chat-message-rich-text>\n        <dr-chat-message-file *ngSwitchCase=\"MESSAGE_TYPE.DOWNLOAD_FILE\" [message]=\"message\"></dr-chat-message-file>\n        <ng-container *ngSwitchDefault>\n            <ng-container [ngTemplateOutlet]=\"getTemplate()\" [ngTemplateOutletContext]=\"getTemplateContext()\"></ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n",
+                template: "<div *ngIf=\"message.useDefaultAvatar || message.avatarUrl\"\n     class=\"avatar\"\n     [class.avatar--default]=\"message.useDefaultAvatar\"\n     [style.background-image]=\"message.useDefaultAvatar ? message.avatarUrl : ''\"></div>\n<div class=\"message\" [class.message--custom]=\"customMessage\">\n    <ng-container [ngSwitch]=\"message.kind\">\n        <dr-chat-message-text *ngSwitchCase=\"MESSAGE_TYPE.TEXT\" [message]=\"message\"></dr-chat-message-text>\n        <dr-chat-message-rich-text *ngSwitchCase=\"MESSAGE_TYPE.RICH_TEXT\" [message]=\"message\"></dr-chat-message-rich-text>\n        <dr-chat-message-file *ngSwitchCase=\"MESSAGE_TYPE.DOWNLOAD_FILE\" [message]=\"message\"></dr-chat-message-file>\n        <ng-container *ngSwitchDefault>\n            <ng-container [ngTemplateOutlet]=\"getTemplate()\" [ngTemplateOutletContext]=\"getTemplateContext()\"></ng-container>\n        </ng-container>\n    </ng-container>\n</div>\n",
                 animations: [
                     trigger('flyInOut', [
                         state('in', style({ transform: 'translateX(0)' })),
@@ -4687,7 +4709,7 @@ DrChatMessageComponent.decorators = [
                     ]),
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:row}:host:not(:first-child){margin-top:8px}.reply+:host.reply,.not-reply+:host.not-reply{margin-top:3px}:host.not-reply{justify-content:flex-end}:host.not-reply .message{color:#fff;background-color:#4646ce}:host .message{display:flex;background-color:#f3f7ff;border-radius:8px;padding:16px;max-width:60%;width:auto}:host .message--custom{max-width:unset;width:80%}\n"]
+                styles: [":host{display:flex;flex-direction:row}:host.empty{display:none}:host:not(:first-child){margin-top:28px}.reply+:host.reply,.not-reply+:host.not-reply{margin-top:11px}:host.not-reply{flex-direction:row-reverse}:host.not-reply .message{align-items:center;background-color:#f9faff}:host .message{display:flex;background-color:#fff;color:#4e566c;padding:13px 16px;max-width:60%;width:auto;border:1px solid #DFE0E3;box-shadow:0 3px 6px #d8d9de80;border-radius:12px;min-height:56px;line-height:22px}:host .avatar{display:flex;width:32px;height:32px;background-color:#151b3f;background-size:cover;border-radius:16px;margin:0 10px}:host .avatar--default{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2232%22 height%3D%2232%22 viewBox%3D%220 0 32 32%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg clip-path%3D%22url(%23clip0_60_3314)%22%3E%3Ccircle cx%3D%2216%22 cy%3D%2216%22 r%3D%2216%22 fill%3D%22%23151B3F%22%2F%3E%3Cpath d%3D%22M23.9836 6C23.8033 6 23.6271 6.05345 23.4773 6.15358C23.3274 6.25372 23.2106 6.39605 23.1416 6.56257C23.0727 6.72909 23.0546 6.91233 23.0898 7.0891C23.1249 7.26588 23.2117 7.42826 23.3392 7.55571C23.4666 7.68316 23.629 7.76995 23.8058 7.80512C23.9826 7.84028 24.1658 7.82223 24.3323 7.75326C24.4988 7.68428 24.6412 7.56748 24.7413 7.41761C24.8414 7.26775 24.8949 7.09156 24.8949 6.91131C24.8949 6.79164 24.8713 6.67314 24.8255 6.56257C24.7797 6.452 24.7126 6.35154 24.628 6.26692C24.5433 6.18229 24.4429 6.11517 24.3323 6.06937C24.2218 6.02357 24.1032 6 23.9836 6Z%22 fill%3D%22%23F93576%22%2F%3E%3Cpath d%3D%22M14.4784 12.2578C13.4049 12.5041 12.4218 13.0459 11.6402 13.8219C10.8585 14.5979 10.3096 15.5771 10.0556 16.6488L10.0186 16.8072H11.5809L11.6098 16.7177C11.8243 16.0309 12.2036 15.407 12.7146 14.9004C13.2255 14.3937 13.8526 14.0197 14.5412 13.8109L14.6317 13.7832V12.2218L14.4784 12.2578Z%22 fill%3D%22%23FFA310%22%2F%3E%3Cpath d%3D%22M20.26 14.0557L19.8897 13.7091C19.1313 12.9969 18.1992 12.4965 17.1866 12.2578L17.0303 12.2208V13.7832L17.1208 13.8109C17.743 14.0025 18.3152 14.329 18.7966 14.7671C19.2781 15.2053 19.6569 15.7444 19.906 16.3458C20.1551 16.9473 20.2683 17.5963 20.2376 18.2466C20.2069 18.8969 20.0331 19.5323 19.7284 20.1077C19.4238 20.683 18.9959 21.184 18.4754 21.5749C17.9548 21.9658 17.3544 22.2369 16.7169 22.369C16.0794 22.501 15.4207 22.4908 14.7877 22.3389C14.1547 22.187 13.563 21.8972 13.0549 21.4903C12.356 20.9222 11.8443 20.157 11.586 19.2943L11.5593 19.2027H10L10.035 19.358C10.3187 20.5951 10.9875 21.7104 11.945 22.5435C13.0538 23.5056 14.48 24.0223 15.9477 23.9936C17.4155 23.9649 18.8204 23.3929 19.8907 22.3882L20.26 22.0426V23.8282H21.7771V9.13403H20.26V14.0557Z%22 fill%3D%22%23FBFCF5%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath id%3D%22clip0_60_3314%22%3E%3Crect width%3D%2232%22 height%3D%2232%22 fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\")}\n"]
             },] }
 ];
 DrChatMessageComponent.ctorParameters = () => [
@@ -4699,17 +4721,28 @@ DrChatMessageComponent.propDecorators = {
     reply: [{ type: Input }, { type: HostBinding, args: ['class.reply',] }],
     type: [{ type: Input }],
     message: [{ type: Input }],
-    customMessageData: [{ type: Input }]
+    customMessageData: [{ type: Input }],
+    isEmpty: [{ type: Input }, { type: HostBinding, args: ['class.empty',] }]
 };
 
 class DrChatComponent {
     constructor(cdr) {
         this.cdr = cdr;
+        this.destroy$ = new Subject();
         this.showClearButton = true;
         this.noMessagesPlaceholder = 'No messages yet.';
         this._scrollBottom = true;
         this.clear = new EventEmitter();
+        this.close = new EventEmitter();
     }
+    set contentUpdateSubject(value) {
+        if (value) {
+            value.pipe(takeUntil(this.destroy$)).subscribe(() => {
+                this.updateView();
+            });
+        }
+    }
+    ;
     /**
      * Scroll chat to the bottom of the list when a new message arrives
      */
@@ -4737,13 +4770,17 @@ class DrChatComponent {
             this.cdr.markForCheck();
         });
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }
 DrChatComponent.decorators = [
     { type: Component, args: [{
                 selector: 'dr-chat',
-                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",
+                template: "<div class=\"header\">\n    <span class=\"header__title\">{{ title }}</span>\n    <dr-button *ngIf=\"showClearButton\"\n               (click)=\"clear.emit($event)\"\n               theme=\"ghost\"\n               icon=\"dr-icon-trash\"\n               class=\"ml-auto\"\n               title=\"Clear the history\">\n        <span>Clear chat</span>\n    </dr-button>\n\n    <dr-button (click)=\"close.emit($event)\"\n               theme=\"icon\"\n               icon=\"dr-icon-exit\"\n               class=\"ml-4\"\n               title=\"Close\">\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{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"]
+                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;background-color:#4646ce;color:#f9faff;padding:16px 30px;font-weight:bold}:host .header__title{display:flex;align-items:center;font-weight:400;font-size:20px;line-height:28px}:host .header__title:after{content:\"BETA\";display:inline-flex;padding:2px 10px;background:#FFA310;color:#4e566c;font-weight:600;font-size:10px;line-height:14px;border-radius:8px;margin-left:14px}:host .header dr-button::ng-deep button:not(:hover){color:#f9faff}: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 = () => [
@@ -4753,11 +4790,13 @@ DrChatComponent.propDecorators = {
     title: [{ type: Input }],
     showClearButton: [{ type: Input }],
     noMessagesPlaceholder: [{ type: Input }],
+    contentUpdateSubject: [{ type: Input }],
     scrollBottom: [{ type: Input }],
     messagesContainer: [{ type: ViewChild, args: ['messagesContainer',] }],
     messages: [{ type: ContentChildren, args: [DrChatMessageComponent,] }],
     chatForm: [{ type: ContentChild, args: [DrChatFormComponent,] }],
-    clear: [{ type: Output }]
+    clear: [{ type: Output }],
+    close: [{ type: Output }]
 };
 
 /**