@datarailsshared/datarailsshared 1.4.103 → 1.4.107
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles/img/default-chat-avatar.svg +13 -0
- package/bundles/datarailsshared-datarailsshared.umd.js +29 -11
- package/bundles/datarailsshared-datarailsshared.umd.js.map +1 -1
- package/datarailsshared-datarailsshared-1.4.107.tgz +0 -0
- package/datarailsshared-datarailsshared.metadata.json +1 -1
- package/esm2015/lib/dr-chat/chat.component.js +6 -4
- package/esm2015/lib/dr-chat/dr-chat-form/chat-form.component.js +7 -3
- package/esm2015/lib/dr-chat/dr-chat-message/chat-message.component.js +3 -3
- package/esm2015/lib/dr-inputs/dr-input/dr-input.component.js +4 -1
- package/esm2015/lib/dr-popover/dr-popover.service.js +7 -2
- package/esm2015/lib/dr-tabs/dr-tabs.component.js +5 -3
- package/esm2015/lib/models/chat.js +4 -2
- package/esm2015/lib/models/popover.js +1 -1
- package/fesm2015/datarailsshared-datarailsshared.js +29 -11
- package/fesm2015/datarailsshared-datarailsshared.js.map +1 -1
- package/lib/dr-chat/chat.component.d.ts +1 -0
- package/lib/dr-chat/dr-chat-form/chat-form.component.d.ts +1 -0
- package/lib/dr-inputs/dr-input/dr-input.component.d.ts +1 -0
- package/lib/dr-tabs/dr-tabs.component.d.ts +1 -0
- package/lib/models/chat.d.ts +4 -0
- package/lib/models/popover.d.ts +1 -0
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.4.103.tgz +0 -0
|
@@ -1096,6 +1096,7 @@ class DrInputComponent {
|
|
|
1096
1096
|
text: 'Save'
|
|
1097
1097
|
};
|
|
1098
1098
|
this.searchHandler = new EventEmitter();
|
|
1099
|
+
this.clearHandler = new EventEmitter();
|
|
1099
1100
|
this.buttonHandler = new EventEmitter();
|
|
1100
1101
|
this.tabindex = -1;
|
|
1101
1102
|
this.onChangeCallback = noop$1;
|
|
@@ -1212,6 +1213,7 @@ class DrInputComponent {
|
|
|
1212
1213
|
}
|
|
1213
1214
|
}
|
|
1214
1215
|
onClear($event) {
|
|
1216
|
+
this.clearHandler.emit($event);
|
|
1215
1217
|
$event.preventDefault();
|
|
1216
1218
|
$event.stopPropagation();
|
|
1217
1219
|
this.value = null;
|
|
@@ -1252,6 +1254,7 @@ DrInputComponent.propDecorators = {
|
|
|
1252
1254
|
ngModelDebounceChange: [{ type: Output }],
|
|
1253
1255
|
elementClass: [{ type: HostBinding, args: ['class',] }],
|
|
1254
1256
|
searchHandler: [{ type: Output }],
|
|
1257
|
+
clearHandler: [{ type: Output }],
|
|
1255
1258
|
buttonHandler: [{ type: Output }],
|
|
1256
1259
|
prefixIcon: [{ type: ContentChild, args: ['prefix', { static: false },] }],
|
|
1257
1260
|
suffixIcon: [{ type: ContentChild, args: ['suffix', { static: false },] }],
|
|
@@ -2111,9 +2114,14 @@ class DrPopoverService {
|
|
|
2111
2114
|
getOverlayConfig(popoverModel) {
|
|
2112
2115
|
if (!POPUP_POSITIONS[popoverModel.position])
|
|
2113
2116
|
throw new Error(`DrPopover does not support the '${popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position}' position!`);
|
|
2117
|
+
const position = Object.assign({}, POPUP_POSITIONS[popoverModel.position]);
|
|
2118
|
+
if (popoverModel.overlayConfig.noPadding) {
|
|
2119
|
+
position.offsetY = 0;
|
|
2120
|
+
position.offsetX = 0;
|
|
2121
|
+
}
|
|
2114
2122
|
const config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
|
|
2115
2123
|
const hostElement = this.getHostElement(popoverModel.hostRef);
|
|
2116
|
-
const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(popoverModel.hostRef).withPositions([
|
|
2124
|
+
const positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(popoverModel.hostRef).withPositions([position]);
|
|
2117
2125
|
const overlayConfig = new OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy }, config));
|
|
2118
2126
|
if (popoverModel.alignment === 'host' && hostElement) {
|
|
2119
2127
|
const alignmentDimension = getAlignmentDimension(popoverModel.position);
|
|
@@ -2612,6 +2620,7 @@ class DrTabsComponent {
|
|
|
2612
2620
|
constructor() {
|
|
2613
2621
|
this.selectedTab = 0;
|
|
2614
2622
|
this.noBodyPadding = false;
|
|
2623
|
+
this.noTabLabelsPadding = false;
|
|
2615
2624
|
this.selectedTabChange = new EventEmitter();
|
|
2616
2625
|
}
|
|
2617
2626
|
selectedIndexChange($event) {
|
|
@@ -2622,8 +2631,8 @@ class DrTabsComponent {
|
|
|
2622
2631
|
DrTabsComponent.decorators = [
|
|
2623
2632
|
{ type: Component, args: [{
|
|
2624
2633
|
selector: 'dr-tabs',
|
|
2625
|
-
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-body-padding]=\"noBodyPadding\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\">\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
2626
|
-
styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #d5dae5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#
|
|
2634
|
+
template: "<mat-tab-group disableRipple [selectedIndex]=\"selectedTab\"\n (selectedIndexChange)=\"selectedIndexChange($event)\"\n [class.with-radio]=\"withRadio\"\n [class.vertical]=\"vertical\"\n [class.no-tab-labels-padding]=\"noTabLabelsPadding\"\n [class.no-body-padding]=\"noBodyPadding\"\n [animationDuration]=\" vertical ? '0ms' : '500ms'\">\n <mat-tab *ngFor=\"let tab of tabsContentList; let index = index\" label=\"{{tab.label}}\" [disabled]=\"tab.disabled\">\n <ng-container *ngIf=\"withRadio\">\n <ng-template mat-tab-label>\n <dr-radio-button [value]=\"index\"\n [(ngModel)]=\"selectedTab\">\n </dr-radio-button>\n {{tab.label}}\n </ng-template>\n </ng-container>\n\n <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n </mat-tab>\n</mat-tab-group>\n",
|
|
2635
|
+
styles: [":host{width:100%}:host ::ng-deep .mat-tab-group,:host ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .mat-tab-group{font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-tab-nav-bar,:host ::ng-deep .mat-tab-header{border-bottom:1px solid #d5dae5}:host ::ng-deep .mat-tab-labels{padding:0 17px}:host ::ng-deep .mat-tab-label{padding:0 8px;min-width:0;height:38px;opacity:1}:host ::ng-deep .mat-tab-label:not(:last-child){margin-right:21px}:host ::ng-deep .mat-tab-label-active .mat-tab-label-content{color:#4646ce;font-weight:700}:host ::ng-deep .mat-tab-label-content{font-weight:400;font-size:14px;line-height:22px;color:#51566f;font-family:\"Poppins\",sans-serif}:host ::ng-deep .mat-ink-bar{height:3px;border-radius:5px;background-color:#4646ce!important}:host ::ng-deep .with-radio .mat-tab-labels{padding:0;margin-bottom:8px}:host ::ng-deep .with-radio .mat-tab-label{padding:8px 16px;min-width:0;flex-grow:1;justify-content:start;height:38px;opacity:1}:host ::ng-deep .with-radio .mat-tab-label:not(:last-child){margin-right:8px}:host ::ng-deep .with-radio .mat-tab-label-active{background:#f6f7f8;border-radius:3px}:host ::ng-deep .with-radio .mat-tab-label-active .mat-tab-label-content{color:#0c142b;font-weight:600}:host ::ng-deep .with-radio .mat-ink-bar{display:none!important}:host ::ng-deep .vertical.mat-tab-group{flex-direction:row}:host ::ng-deep .vertical .mat-tab-header{border-bottom:none}:host ::ng-deep .vertical .mat-tab-label-container{border-right:1px solid #d5dae5}:host ::ng-deep .vertical .mat-tab-label-container .mat-tab-labels{flex-direction:column;padding:0}:host ::ng-deep .vertical .mat-ink-bar{display:none!important}:host ::ng-deep .vertical .mat-tab-label{border-bottom:1px solid #d5dae5;margin:0!important;justify-content:flex-start;padding:1rem 2rem;height:40px}:host ::ng-deep .vertical .mat-tab-label:before{content:\"\";width:2px;height:100%;display:flex;position:absolute;top:0;left:0}:host ::ng-deep .vertical .mat-tab-label-active{background-color:#f3f7ff}:host ::ng-deep .vertical .mat-tab-label-active:before{background-color:#151a41}:host ::ng-deep .vertical .mat-tab-label-active .mat-tab-label-content{font-weight:normal;color:#151a41}:host ::ng-deep .vertical .mat-tab-body-wrapper{width:100%;padding:16px}:host ::ng-deep mat-tab-group.no-body-padding .mat-tab-body-wrapper{padding:0}:host ::ng-deep mat-tab-group.no-tab-labels-padding .mat-tab-labels{padding:0}\n"]
|
|
2627
2636
|
},] }
|
|
2628
2637
|
];
|
|
2629
2638
|
DrTabsComponent.ctorParameters = () => [];
|
|
@@ -2632,6 +2641,7 @@ DrTabsComponent.propDecorators = {
|
|
|
2632
2641
|
withRadio: [{ type: Input }],
|
|
2633
2642
|
vertical: [{ type: Input }],
|
|
2634
2643
|
noBodyPadding: [{ type: Input }],
|
|
2644
|
+
noTabLabelsPadding: [{ type: Input }],
|
|
2635
2645
|
selectedTabChange: [{ type: Output }],
|
|
2636
2646
|
tabsContentList: [{ type: ContentChildren, args: [DrTabComponent,] }]
|
|
2637
2647
|
};
|
|
@@ -3367,7 +3377,7 @@ class ChatMessage {
|
|
|
3367
3377
|
this.kind = obj === null || obj === void 0 ? void 0 : obj.kind;
|
|
3368
3378
|
this.seq = obj === null || obj === void 0 ? void 0 : obj.seq;
|
|
3369
3379
|
this.conversationId = obj === null || obj === void 0 ? void 0 : obj.conversationId;
|
|
3370
|
-
this.reply = (obj === null || obj === void 0 ? void 0 : obj.senderId) !== user.id;
|
|
3380
|
+
this.reply = (obj === null || obj === void 0 ? void 0 : obj.senderId) !== (user === null || user === void 0 ? void 0 : user.id);
|
|
3371
3381
|
this.senderId = obj === null || obj === void 0 ? void 0 : obj.senderId;
|
|
3372
3382
|
this.parentId = obj === null || obj === void 0 ? void 0 : obj.parentId;
|
|
3373
3383
|
this.text = (obj === null || obj === void 0 ? void 0 : obj.text) || obj.body;
|
|
@@ -3378,6 +3388,8 @@ class ChatMessage {
|
|
|
3378
3388
|
this.body = obj === null || obj === void 0 ? void 0 : obj.body;
|
|
3379
3389
|
this.form = obj === null || obj === void 0 ? void 0 : obj.form;
|
|
3380
3390
|
this.parameters = obj === null || obj === void 0 ? void 0 : obj.parameters;
|
|
3391
|
+
this.useDefaultAvatar = obj === null || obj === void 0 ? void 0 : obj.useDefaultAvatar;
|
|
3392
|
+
this.avatarUrl = obj === null || obj === void 0 ? void 0 : obj.avatarUrl;
|
|
3381
3393
|
}
|
|
3382
3394
|
}
|
|
3383
3395
|
|
|
@@ -4587,13 +4599,17 @@ class DrChatFormComponent {
|
|
|
4587
4599
|
onModelChange(value) {
|
|
4588
4600
|
this.inputChange.emit(value);
|
|
4589
4601
|
}
|
|
4602
|
+
getTextAreaHeight(textAreaElement) {
|
|
4603
|
+
return textAreaElement.scrollHeight / 22 > textAreaElement.rows ?
|
|
4604
|
+
'height: ' + textAreaElement.scrollHeight + 'px;' : '';
|
|
4605
|
+
}
|
|
4590
4606
|
}
|
|
4591
4607
|
DrChatFormComponent.decorators = [
|
|
4592
4608
|
{ type: Component, args: [{
|
|
4593
4609
|
selector: 'dr-chat-form',
|
|
4594
|
-
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 <
|
|
4610
|
+
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",
|
|
4595
4611
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4596
|
-
styles: [":host{display:flex;flex-direction:column;padding:
|
|
4612
|
+
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"]
|
|
4597
4613
|
},] }
|
|
4598
4614
|
];
|
|
4599
4615
|
DrChatFormComponent.ctorParameters = () => [
|
|
@@ -4689,7 +4705,7 @@ class DrChatMessageComponent {
|
|
|
4689
4705
|
DrChatMessageComponent.decorators = [
|
|
4690
4706
|
{ type: Component, args: [{
|
|
4691
4707
|
selector: 'dr-chat-message',
|
|
4692
|
-
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",
|
|
4708
|
+
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",
|
|
4693
4709
|
animations: [
|
|
4694
4710
|
trigger('flyInOut', [
|
|
4695
4711
|
state('in', style({ transform: 'translateX(0)' })),
|
|
@@ -4698,7 +4714,7 @@ DrChatMessageComponent.decorators = [
|
|
|
4698
4714
|
]),
|
|
4699
4715
|
],
|
|
4700
4716
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4701
|
-
styles: [":host{display:flex;flex-direction:row}:host.empty{display:none}:host:not(:first-child){margin-top:
|
|
4717
|
+
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"]
|
|
4702
4718
|
},] }
|
|
4703
4719
|
];
|
|
4704
4720
|
DrChatMessageComponent.ctorParameters = () => [
|
|
@@ -4722,6 +4738,7 @@ class DrChatComponent {
|
|
|
4722
4738
|
this.noMessagesPlaceholder = 'No messages yet.';
|
|
4723
4739
|
this._scrollBottom = true;
|
|
4724
4740
|
this.clear = new EventEmitter();
|
|
4741
|
+
this.close = new EventEmitter();
|
|
4725
4742
|
}
|
|
4726
4743
|
set contentUpdateSubject(value) {
|
|
4727
4744
|
if (value) {
|
|
@@ -4766,9 +4783,9 @@ class DrChatComponent {
|
|
|
4766
4783
|
DrChatComponent.decorators = [
|
|
4767
4784
|
{ type: Component, args: [{
|
|
4768
4785
|
selector: 'dr-chat',
|
|
4769
|
-
template: "<div class=\"header\">\n {{ title }}
|
|
4786
|
+
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",
|
|
4770
4787
|
providers: [DrChatCustomMessageService],
|
|
4771
|
-
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;
|
|
4788
|
+
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"]
|
|
4772
4789
|
},] }
|
|
4773
4790
|
];
|
|
4774
4791
|
DrChatComponent.ctorParameters = () => [
|
|
@@ -4783,7 +4800,8 @@ DrChatComponent.propDecorators = {
|
|
|
4783
4800
|
messagesContainer: [{ type: ViewChild, args: ['messagesContainer',] }],
|
|
4784
4801
|
messages: [{ type: ContentChildren, args: [DrChatMessageComponent,] }],
|
|
4785
4802
|
chatForm: [{ type: ContentChild, args: [DrChatFormComponent,] }],
|
|
4786
|
-
clear: [{ type: Output }]
|
|
4803
|
+
clear: [{ type: Output }],
|
|
4804
|
+
close: [{ type: Output }]
|
|
4787
4805
|
};
|
|
4788
4806
|
|
|
4789
4807
|
/**
|