@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
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_60_3314)">
|
|
3
|
+
<circle cx="16" cy="16" r="16" fill="#151B3F"/>
|
|
4
|
+
<path d="M23.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" fill="#F93576"/>
|
|
5
|
+
<path d="M14.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" fill="#FFA310"/>
|
|
6
|
+
<path d="M20.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" fill="#FBFCF5"/>
|
|
7
|
+
</g>
|
|
8
|
+
<defs>
|
|
9
|
+
<clipPath id="clip0_60_3314">
|
|
10
|
+
<rect width="32" height="32" fill="white"/>
|
|
11
|
+
</clipPath>
|
|
12
|
+
</defs>
|
|
13
|
+
</svg>
|
|
@@ -1495,6 +1495,7 @@
|
|
|
1495
1495
|
text: 'Save'
|
|
1496
1496
|
};
|
|
1497
1497
|
this.searchHandler = new i0.EventEmitter();
|
|
1498
|
+
this.clearHandler = new i0.EventEmitter();
|
|
1498
1499
|
this.buttonHandler = new i0.EventEmitter();
|
|
1499
1500
|
this.tabindex = -1;
|
|
1500
1501
|
this.onChangeCallback = rxjs.noop;
|
|
@@ -1632,6 +1633,7 @@
|
|
|
1632
1633
|
}
|
|
1633
1634
|
};
|
|
1634
1635
|
DrInputComponent.prototype.onClear = function ($event) {
|
|
1636
|
+
this.clearHandler.emit($event);
|
|
1635
1637
|
$event.preventDefault();
|
|
1636
1638
|
$event.stopPropagation();
|
|
1637
1639
|
this.value = null;
|
|
@@ -1673,6 +1675,7 @@
|
|
|
1673
1675
|
ngModelDebounceChange: [{ type: i0.Output }],
|
|
1674
1676
|
elementClass: [{ type: i0.HostBinding, args: ['class',] }],
|
|
1675
1677
|
searchHandler: [{ type: i0.Output }],
|
|
1678
|
+
clearHandler: [{ type: i0.Output }],
|
|
1676
1679
|
buttonHandler: [{ type: i0.Output }],
|
|
1677
1680
|
prefixIcon: [{ type: i0.ContentChild, args: ['prefix', { static: false },] }],
|
|
1678
1681
|
suffixIcon: [{ type: i0.ContentChild, args: ['suffix', { static: false },] }],
|
|
@@ -2612,9 +2615,14 @@
|
|
|
2612
2615
|
DrPopoverService.prototype.getOverlayConfig = function (popoverModel) {
|
|
2613
2616
|
if (!POPUP_POSITIONS[popoverModel.position])
|
|
2614
2617
|
throw new Error("DrPopover does not support the '" + (popoverModel === null || popoverModel === void 0 ? void 0 : popoverModel.position) + "' position!");
|
|
2618
|
+
var position = Object.assign({}, POPUP_POSITIONS[popoverModel.position]);
|
|
2619
|
+
if (popoverModel.overlayConfig.noPadding) {
|
|
2620
|
+
position.offsetY = 0;
|
|
2621
|
+
position.offsetX = 0;
|
|
2622
|
+
}
|
|
2615
2623
|
var config = Object.assign(Object.assign({}, DEFAULT_CONFIG), popoverModel.overlayConfig || {});
|
|
2616
2624
|
var hostElement = this.getHostElement(popoverModel.hostRef);
|
|
2617
|
-
var positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(popoverModel.hostRef).withPositions([
|
|
2625
|
+
var positionStrategy = this.overlayPositionBuilder.flexibleConnectedTo(popoverModel.hostRef).withPositions([position]);
|
|
2618
2626
|
var overlayConfig = new i1.OverlayConfig(Object.assign({ scrollStrategy: this.overlay.scrollStrategies.noop(), positionStrategy: positionStrategy }, config));
|
|
2619
2627
|
if (popoverModel.alignment === 'host' && hostElement) {
|
|
2620
2628
|
var alignmentDimension = getAlignmentDimension(popoverModel.position);
|
|
@@ -3132,6 +3140,7 @@
|
|
|
3132
3140
|
function DrTabsComponent() {
|
|
3133
3141
|
this.selectedTab = 0;
|
|
3134
3142
|
this.noBodyPadding = false;
|
|
3143
|
+
this.noTabLabelsPadding = false;
|
|
3135
3144
|
this.selectedTabChange = new i0.EventEmitter();
|
|
3136
3145
|
}
|
|
3137
3146
|
DrTabsComponent.prototype.selectedIndexChange = function ($event) {
|
|
@@ -3143,8 +3152,8 @@
|
|
|
3143
3152
|
DrTabsComponent.decorators = [
|
|
3144
3153
|
{ type: i0.Component, args: [{
|
|
3145
3154
|
selector: 'dr-tabs',
|
|
3146
|
-
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",
|
|
3147
|
-
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:#
|
|
3155
|
+
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",
|
|
3156
|
+
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"]
|
|
3148
3157
|
},] }
|
|
3149
3158
|
];
|
|
3150
3159
|
DrTabsComponent.ctorParameters = function () { return []; };
|
|
@@ -3153,6 +3162,7 @@
|
|
|
3153
3162
|
withRadio: [{ type: i0.Input }],
|
|
3154
3163
|
vertical: [{ type: i0.Input }],
|
|
3155
3164
|
noBodyPadding: [{ type: i0.Input }],
|
|
3165
|
+
noTabLabelsPadding: [{ type: i0.Input }],
|
|
3156
3166
|
selectedTabChange: [{ type: i0.Output }],
|
|
3157
3167
|
tabsContentList: [{ type: i0.ContentChildren, args: [DrTabComponent,] }]
|
|
3158
3168
|
};
|
|
@@ -3947,7 +3957,7 @@
|
|
|
3947
3957
|
this.kind = obj === null || obj === void 0 ? void 0 : obj.kind;
|
|
3948
3958
|
this.seq = obj === null || obj === void 0 ? void 0 : obj.seq;
|
|
3949
3959
|
this.conversationId = obj === null || obj === void 0 ? void 0 : obj.conversationId;
|
|
3950
|
-
this.reply = (obj === null || obj === void 0 ? void 0 : obj.senderId) !== user.id;
|
|
3960
|
+
this.reply = (obj === null || obj === void 0 ? void 0 : obj.senderId) !== (user === null || user === void 0 ? void 0 : user.id);
|
|
3951
3961
|
this.senderId = obj === null || obj === void 0 ? void 0 : obj.senderId;
|
|
3952
3962
|
this.parentId = obj === null || obj === void 0 ? void 0 : obj.parentId;
|
|
3953
3963
|
this.text = (obj === null || obj === void 0 ? void 0 : obj.text) || obj.body;
|
|
@@ -3958,6 +3968,8 @@
|
|
|
3958
3968
|
this.body = obj === null || obj === void 0 ? void 0 : obj.body;
|
|
3959
3969
|
this.form = obj === null || obj === void 0 ? void 0 : obj.form;
|
|
3960
3970
|
this.parameters = obj === null || obj === void 0 ? void 0 : obj.parameters;
|
|
3971
|
+
this.useDefaultAvatar = obj === null || obj === void 0 ? void 0 : obj.useDefaultAvatar;
|
|
3972
|
+
this.avatarUrl = obj === null || obj === void 0 ? void 0 : obj.avatarUrl;
|
|
3961
3973
|
}
|
|
3962
3974
|
return ChatMessage;
|
|
3963
3975
|
}());
|
|
@@ -5277,14 +5289,18 @@
|
|
|
5277
5289
|
DrChatFormComponent.prototype.onModelChange = function (value) {
|
|
5278
5290
|
this.inputChange.emit(value);
|
|
5279
5291
|
};
|
|
5292
|
+
DrChatFormComponent.prototype.getTextAreaHeight = function (textAreaElement) {
|
|
5293
|
+
return textAreaElement.scrollHeight / 22 > textAreaElement.rows ?
|
|
5294
|
+
'height: ' + textAreaElement.scrollHeight + 'px;' : '';
|
|
5295
|
+
};
|
|
5280
5296
|
return DrChatFormComponent;
|
|
5281
5297
|
}());
|
|
5282
5298
|
DrChatFormComponent.decorators = [
|
|
5283
5299
|
{ type: i0.Component, args: [{
|
|
5284
5300
|
selector: 'dr-chat-form',
|
|
5285
|
-
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 <
|
|
5301
|
+
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",
|
|
5286
5302
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
5287
|
-
styles: [":host{display:flex;flex-direction:column;padding:
|
|
5303
|
+
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"]
|
|
5288
5304
|
},] }
|
|
5289
5305
|
];
|
|
5290
5306
|
DrChatFormComponent.ctorParameters = function () { return [
|
|
@@ -5398,7 +5414,7 @@
|
|
|
5398
5414
|
DrChatMessageComponent.decorators = [
|
|
5399
5415
|
{ type: i0.Component, args: [{
|
|
5400
5416
|
selector: 'dr-chat-message',
|
|
5401
|
-
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",
|
|
5417
|
+
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",
|
|
5402
5418
|
animations: [
|
|
5403
5419
|
animations.trigger('flyInOut', [
|
|
5404
5420
|
animations.state('in', animations.style({ transform: 'translateX(0)' })),
|
|
@@ -5407,7 +5423,7 @@
|
|
|
5407
5423
|
]),
|
|
5408
5424
|
],
|
|
5409
5425
|
changeDetection: i0.ChangeDetectionStrategy.OnPush,
|
|
5410
|
-
styles: [":host{display:flex;flex-direction:row}:host.empty{display:none}:host:not(:first-child){margin-top:
|
|
5426
|
+
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"]
|
|
5411
5427
|
},] }
|
|
5412
5428
|
];
|
|
5413
5429
|
DrChatMessageComponent.ctorParameters = function () { return [
|
|
@@ -5431,6 +5447,7 @@
|
|
|
5431
5447
|
this.noMessagesPlaceholder = 'No messages yet.';
|
|
5432
5448
|
this._scrollBottom = true;
|
|
5433
5449
|
this.clear = new i0.EventEmitter();
|
|
5450
|
+
this.close = new i0.EventEmitter();
|
|
5434
5451
|
}
|
|
5435
5452
|
Object.defineProperty(DrChatComponent.prototype, "contentUpdateSubject", {
|
|
5436
5453
|
set: function (value) {
|
|
@@ -5487,9 +5504,9 @@
|
|
|
5487
5504
|
DrChatComponent.decorators = [
|
|
5488
5505
|
{ type: i0.Component, args: [{
|
|
5489
5506
|
selector: 'dr-chat',
|
|
5490
|
-
template: "<div class=\"header\">\n {{ title }}
|
|
5507
|
+
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",
|
|
5491
5508
|
providers: [DrChatCustomMessageService],
|
|
5492
|
-
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;
|
|
5509
|
+
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"]
|
|
5493
5510
|
},] }
|
|
5494
5511
|
];
|
|
5495
5512
|
DrChatComponent.ctorParameters = function () { return [
|
|
@@ -5504,7 +5521,8 @@
|
|
|
5504
5521
|
messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer',] }],
|
|
5505
5522
|
messages: [{ type: i0.ContentChildren, args: [DrChatMessageComponent,] }],
|
|
5506
5523
|
chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }],
|
|
5507
|
-
clear: [{ type: i0.Output }]
|
|
5524
|
+
clear: [{ type: i0.Output }],
|
|
5525
|
+
close: [{ type: i0.Output }]
|
|
5508
5526
|
};
|
|
5509
5527
|
|
|
5510
5528
|
/**
|