@datarailsshared/datarailsshared 1.5.297 → 1.5.298
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/vars.scss +1 -1
- package/datarailsshared-datarailsshared-1.5.298.tgz +0 -0
- package/esm2022/lib/dr-chat/chat.component.mjs +2 -2
- package/esm2022/lib/dr-chat/dr-chat-message/chat-message.component.mjs +2 -2
- package/fesm2022/datarailsshared-datarailsshared.mjs +4 -4
- package/package.json +1 -1
- package/datarailsshared-datarailsshared-1.5.297.tgz +0 -0
package/assets/styles/vars.scss
CHANGED
|
@@ -3,7 +3,7 @@ $dr-chat-horizontal-padding: 24px;
|
|
|
3
3
|
$dr-chat-main-color: #25258C;
|
|
4
4
|
$dr-chat-avatar-width: 28px;
|
|
5
5
|
$dr-chat-avatar-left-indent: 0;
|
|
6
|
-
$dr-chat-avatar-right-indent:
|
|
6
|
+
$dr-chat-avatar-right-indent: 16px;
|
|
7
7
|
$dr-chat-header-text-indent: 20px;
|
|
8
8
|
|
|
9
9
|
// DR spacing variables (margin, paddings, etc.)
|
|
Binary file
|
|
@@ -83,11 +83,11 @@ export class DrChatComponent {
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
86
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "chatHeader", first: true, predicate: ["drChatHeader"], descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:
|
|
86
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "chatHeader", first: true, predicate: ["drChatHeader"], descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:912px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.DrChatSuggestionsComponent, selector: "dr-chat-suggestions", inputs: ["values", "fullScreen", "buttonMode", "waitForReply"], outputs: ["suggestionSelect"] }] }); }
|
|
87
87
|
}
|
|
88
88
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, decorators: [{
|
|
89
89
|
type: Component,
|
|
90
|
-
args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:
|
|
90
|
+
args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:912px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{font-size:16px}\n"] }]
|
|
91
91
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fullScreen: [{
|
|
92
92
|
type: Input
|
|
93
93
|
}], noMessagesPlaceholder: [{
|
|
@@ -46,7 +46,7 @@ export class DrChatMessageComponent {
|
|
|
46
46
|
return customMessageDirective;
|
|
47
47
|
}
|
|
48
48
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatMessageComponent, deps: [{ token: i1.DrChatCustomMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatMessageComponent, selector: "dr-chat-message", inputs: { reply: "reply", type: "type", message: "message", customMessageData: "customMessageData", user: "user" }, host: { properties: { "@flyInOut": "this.flyInOut", "class.not-reply": "this.notReply", "class.reply": "this.reply" } }, queries: [{ propertyName: "drChatMessageActions", first: true, predicate: ["drChatMessageActions"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:
|
|
49
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatMessageComponent, selector: "dr-chat-message", inputs: { reply: "reply", type: "type", message: "message", customMessageData: "customMessageData", user: "user" }, host: { properties: { "@flyInOut": "this.flyInOut", "class.not-reply": "this.notReply", "class.reply": "this.reply" } }, queries: [{ propertyName: "drChatMessageActions", first: true, predicate: ["drChatMessageActions"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:68px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;border:1px solid #DFE0E3;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E %3Cdefs%3E %3Cstyle%3E .cls-1%2C .cls-2%2C .cls-3 %7B fill%3A none%3B %7D .cls-4 %7B fill%3A url(%23linear-gradient)%3B %7D .cls-5 %7B fill%3A %234eb7df%3B %7D .cls-2 %7B stroke%3A %23a6a8aa%3B stroke-miterlimit%3A 10%3B stroke-width%3A .37px%3B %7D .cls-6 %7B fill%3A url(%23linear-gradient-3)%3B %7D .cls-7 %7B fill%3A url(%23linear-gradient-2)%3B %7D .cls-3 %7B clip-path%3A url(%23clippath)%3B %7D %3C%2Fstyle%3E %3CclipPath id%3D%22clippath%22%3E %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E %3C%2FclipPath%3E %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E %3C%2FlinearGradient%3E %3C%2Fdefs%3E %3Cg class%3D%22cls-3%22%3E %3Cg%3E %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:20px;background-repeat:no-repeat;background-position-x:3px;background-position-y:4px}:host .avatar,:host dr-avatar{margin:0 16px 0 0}:host .avatar::ng-deep .users-section__user,:host dr-avatar::ng-deep .users-section__user{border:1px solid #DFE0E3}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-left:24px;flex-grow:1;justify-content:flex-end}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.DrAvatarComponent, selector: "dr-avatar", inputs: ["users", "warning", "showUnassigned", "drAvatarTooltipPosition", "drAvatarTooltipClass", "drAvatarSize", "drAvatarIsClickable"], outputs: ["userClicked"] }, { kind: "component", type: i4.DrChatMessageTextComponent, selector: "dr-chat-message-text", inputs: ["message"] }, { kind: "component", type: i5.DrChatMessageFileComponent, selector: "dr-chat-message-file", inputs: ["message", "files"] }], animations: [
|
|
50
50
|
trigger('flyInOut', [
|
|
51
51
|
state('in', style({ transform: 'translateX(0)' })),
|
|
52
52
|
transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(80)]),
|
|
@@ -62,7 +62,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
62
62
|
transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(80)]),
|
|
63
63
|
transition('* => void', [animate(80, style({ transform: 'translateX(100%)' }))]),
|
|
64
64
|
]),
|
|
65
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:
|
|
65
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:68px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;border:1px solid #DFE0E3;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E %3Cdefs%3E %3Cstyle%3E .cls-1%2C .cls-2%2C .cls-3 %7B fill%3A none%3B %7D .cls-4 %7B fill%3A url(%23linear-gradient)%3B %7D .cls-5 %7B fill%3A %234eb7df%3B %7D .cls-2 %7B stroke%3A %23a6a8aa%3B stroke-miterlimit%3A 10%3B stroke-width%3A .37px%3B %7D .cls-6 %7B fill%3A url(%23linear-gradient-3)%3B %7D .cls-7 %7B fill%3A url(%23linear-gradient-2)%3B %7D .cls-3 %7B clip-path%3A url(%23clippath)%3B %7D %3C%2Fstyle%3E %3CclipPath id%3D%22clippath%22%3E %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E %3C%2FclipPath%3E %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E %3C%2FlinearGradient%3E %3C%2Fdefs%3E %3Cg class%3D%22cls-3%22%3E %3Cg%3E %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:20px;background-repeat:no-repeat;background-position-x:3px;background-position-y:4px}:host .avatar,:host dr-avatar{margin:0 16px 0 0}:host .avatar::ng-deep .users-section__user,:host dr-avatar::ng-deep .users-section__user{border:1px solid #DFE0E3}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-left:24px;flex-grow:1;justify-content:flex-end}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}\n"] }]
|
|
66
66
|
}], ctorParameters: function () { return [{ type: i1.DrChatCustomMessageService }]; }, propDecorators: { flyInOut: [{
|
|
67
67
|
type: HostBinding,
|
|
68
68
|
args: ['@flyInOut']
|
|
@@ -4042,7 +4042,7 @@ class DrChatMessageComponent {
|
|
|
4042
4042
|
return customMessageDirective;
|
|
4043
4043
|
}
|
|
4044
4044
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatMessageComponent, deps: [{ token: DrChatCustomMessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4045
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatMessageComponent, selector: "dr-chat-message", inputs: { reply: "reply", type: "type", message: "message", customMessageData: "customMessageData", user: "user" }, host: { properties: { "@flyInOut": "this.flyInOut", "class.not-reply": "this.notReply", "class.reply": "this.reply" } }, queries: [{ propertyName: "drChatMessageActions", first: true, predicate: ["drChatMessageActions"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:
|
|
4045
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatMessageComponent, selector: "dr-chat-message", inputs: { reply: "reply", type: "type", message: "message", customMessageData: "customMessageData", user: "user" }, host: { properties: { "@flyInOut": "this.flyInOut", "class.not-reply": "this.notReply", "class.reply": "this.reply" } }, queries: [{ propertyName: "drChatMessageActions", first: true, predicate: ["drChatMessageActions"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:68px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;border:1px solid #DFE0E3;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E %3Cdefs%3E %3Cstyle%3E .cls-1%2C .cls-2%2C .cls-3 %7B fill%3A none%3B %7D .cls-4 %7B fill%3A url(%23linear-gradient)%3B %7D .cls-5 %7B fill%3A %234eb7df%3B %7D .cls-2 %7B stroke%3A %23a6a8aa%3B stroke-miterlimit%3A 10%3B stroke-width%3A .37px%3B %7D .cls-6 %7B fill%3A url(%23linear-gradient-3)%3B %7D .cls-7 %7B fill%3A url(%23linear-gradient-2)%3B %7D .cls-3 %7B clip-path%3A url(%23clippath)%3B %7D %3C%2Fstyle%3E %3CclipPath id%3D%22clippath%22%3E %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E %3C%2FclipPath%3E %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E %3C%2FlinearGradient%3E %3C%2Fdefs%3E %3Cg class%3D%22cls-3%22%3E %3Cg%3E %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:20px;background-repeat:no-repeat;background-position-x:3px;background-position-y:4px}:host .avatar,:host dr-avatar{margin:0 16px 0 0}:host .avatar::ng-deep .users-section__user,:host dr-avatar::ng-deep .users-section__user{border:1px solid #DFE0E3}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-left:24px;flex-grow:1;justify-content:flex-end}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DrAvatarComponent, selector: "dr-avatar", inputs: ["users", "warning", "showUnassigned", "drAvatarTooltipPosition", "drAvatarTooltipClass", "drAvatarSize", "drAvatarIsClickable"], outputs: ["userClicked"] }, { kind: "component", type: DrChatMessageTextComponent, selector: "dr-chat-message-text", inputs: ["message"] }, { kind: "component", type: DrChatMessageFileComponent, selector: "dr-chat-message-file", inputs: ["message", "files"] }], animations: [
|
|
4046
4046
|
trigger('flyInOut', [
|
|
4047
4047
|
state('in', style({ transform: 'translateX(0)' })),
|
|
4048
4048
|
transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(80)]),
|
|
@@ -4058,7 +4058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
4058
4058
|
transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(80)]),
|
|
4059
4059
|
transition('* => void', [animate(80, style({ transform: 'translateX(100%)' }))]),
|
|
4060
4060
|
]),
|
|
4061
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:
|
|
4061
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n</ng-template>\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-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 class=\"message__actions\" *ngIf=\"drChatMessageActions;\">\n <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #E5E5E5;padding:16px 24px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #E5E5E5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:68px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;border:1px solid #DFE0E3;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E %3Cdefs%3E %3Cstyle%3E .cls-1%2C .cls-2%2C .cls-3 %7B fill%3A none%3B %7D .cls-4 %7B fill%3A url(%23linear-gradient)%3B %7D .cls-5 %7B fill%3A %234eb7df%3B %7D .cls-2 %7B stroke%3A %23a6a8aa%3B stroke-miterlimit%3A 10%3B stroke-width%3A .37px%3B %7D .cls-6 %7B fill%3A url(%23linear-gradient-3)%3B %7D .cls-7 %7B fill%3A url(%23linear-gradient-2)%3B %7D .cls-3 %7B clip-path%3A url(%23clippath)%3B %7D %3C%2Fstyle%3E %3CclipPath id%3D%22clippath%22%3E %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E %3C%2FclipPath%3E %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E %3C%2FlinearGradient%3E %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E %3C%2FlinearGradient%3E %3C%2Fdefs%3E %3Cg class%3D%22cls-3%22%3E %3Cg%3E %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:20px;background-repeat:no-repeat;background-position-x:3px;background-position-y:4px}:host .avatar,:host dr-avatar{margin:0 16px 0 0}:host .avatar::ng-deep .users-section__user,:host dr-avatar::ng-deep .users-section__user{border:1px solid #DFE0E3}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-left:24px;flex-grow:1;justify-content:flex-end}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}\n"] }]
|
|
4062
4062
|
}], ctorParameters: function () { return [{ type: DrChatCustomMessageService }]; }, propDecorators: { flyInOut: [{
|
|
4063
4063
|
type: HostBinding,
|
|
4064
4064
|
args: ['@flyInOut']
|
|
@@ -4271,11 +4271,11 @@ class DrChatComponent {
|
|
|
4271
4271
|
}
|
|
4272
4272
|
}
|
|
4273
4273
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4274
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "chatHeader", first: true, predicate: ["drChatHeader"], descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:
|
|
4274
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrChatComponent, selector: "dr-chat", inputs: { fullScreen: "fullScreen", noMessagesPlaceholder: "noMessagesPlaceholder", contentUpdateSubject: "contentUpdateSubject", scrollBottom: "scrollBottom", suggestions: "suggestions", reopen: "reopen", waitForReply: "waitForReply" }, outputs: { suggestionSelect: "suggestionSelect" }, providers: [DrChatCustomMessageService], queries: [{ propertyName: "chatForm", first: true, predicate: DrChatFormComponent, descendants: true }, { propertyName: "chatHeader", first: true, predicate: ["drChatHeader"], descendants: true }, { propertyName: "messages", predicate: DrChatMessageComponent }], viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["messagesContainer"], descendants: true }, { propertyName: "_chatSuggestions", first: true, predicate: DrChatSuggestionsComponent, descendants: true }], ngImport: i0, template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:912px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrChatSuggestionsComponent, selector: "dr-chat-suggestions", inputs: ["values", "fullScreen", "buttonMode", "waitForReply"], outputs: ["suggestionSelect"] }] }); }
|
|
4275
4275
|
}
|
|
4276
4276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrChatComponent, decorators: [{
|
|
4277
4277
|
type: Component,
|
|
4278
|
-
args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:
|
|
4278
|
+
args: [{ selector: 'dr-chat', providers: [DrChatCustomMessageService], template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n <div class=\"chat__sticky-top\">\n <ng-container *ngIf=\"chatHeader\" [ngTemplateOutlet]=\"chatHeader\"></ng-container>\n\n <div class=\"chat__alert\">\n <ng-content select=\"dr-chat-alert\"></ng-content>\n </div>\n </div>\n\n <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n </div>\n\n <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n <div #messagesContainer class=\"chat__messages__container\"\n [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n <ng-content select=\"dr-chat-message\"></ng-content>\n </div>\n </div>\n\n <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n [values]=\"suggestions\"\n [fullScreen]=\"fullScreen\"\n [waitForReply]=\"waitForReply\"\n class=\"chat__suggestions\"\n [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n [buttonMode]=\"!!messages?.length\"\n (suggestionSelect)=\"suggestionSelect.emit($event)\">\n </dr-chat-suggestions>\n\n <div class=\"form\">\n <ng-content select=\"dr-chat-form\"></ng-content>\n </div>\n</div>\n", styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:Poppins,sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__sticky-top{display:flex;flex-direction:column;box-shadow:0 1px 3px #0003;z-index:1}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:44px 0;font-family:Poppins,sans-serif;font-size:18px;font-weight:400;line-height:28px;text-align:center;max-width:440px;color:#4646ce}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions{flex:1}.chat__suggestions ::ng-deep .chat-suggestions__container{padding:0}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{padding-left:48px;padding-right:48px}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:912px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{font-size:16px}\n"] }]
|
|
4279
4279
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fullScreen: [{
|
|
4280
4280
|
type: Input
|
|
4281
4281
|
}], noMessagesPlaceholder: [{
|
package/package.json
CHANGED
|
Binary file
|