@datarailsshared/datarailsshared 1.5.297 → 1.5.299

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.
@@ -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:75px}.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 23px 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: [
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:75px}.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 23px 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"] }]
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:905px}.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"] }] }); }
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:905px}.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"] }]
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: [{
@@ -8365,6 +8365,221 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
8365
8365
  }]
8366
8366
  }] });
8367
8367
 
8368
+ class DrSliderComponent {
8369
+ constructor() {
8370
+ this.max = 100;
8371
+ this.min = 1;
8372
+ this.step = 1;
8373
+ this.rangeValue = 1;
8374
+ this.onChange = () => {
8375
+ };
8376
+ this.onTouched = () => {
8377
+ };
8378
+ }
8379
+ registerOnChange(fn) {
8380
+ this.onChange = fn;
8381
+ }
8382
+ registerOnTouched(fn) {
8383
+ this.onTouched = fn;
8384
+ }
8385
+ setDisabledState(isDisabled) {
8386
+ this.disabled = isDisabled;
8387
+ }
8388
+ writeValue(value) {
8389
+ this.rangeValue = value;
8390
+ }
8391
+ setValue(event) {
8392
+ this.writeValue(event.target.value);
8393
+ this.onChange(this.rangeValue);
8394
+ this.onTouched();
8395
+ }
8396
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8397
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrSliderComponent, isStandalone: true, selector: "dr-slider", inputs: { disabled: "disabled", max: "max", min: "min", step: "step", rangeValue: "rangeValue" }, providers: [
8398
+ { provide: NG_VALUE_ACCESSOR, useExisting: DrSliderComponent, multi: true }
8399
+ ], ngImport: i0, template: "<input type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [value]=\"rangeValue\"\n (change)=\"setValue($event)\"\n/>\n", styles: ["input[type=range]{appearance:none;background:transparent;cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background-color:#dfe0e3}input[type=range]::-webkit-slider-thumb{appearance:none;margin-top:-5px;height:14px;width:14px;border-radius:14px;background-color:#4646ce}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8400
+ }
8401
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrSliderComponent, decorators: [{
8402
+ type: Component,
8403
+ args: [{ selector: 'dr-slider', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
8404
+ { provide: NG_VALUE_ACCESSOR, useExisting: DrSliderComponent, multi: true }
8405
+ ], standalone: true, template: "<input type=\"range\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [value]=\"rangeValue\"\n (change)=\"setValue($event)\"\n/>\n", styles: ["input[type=range]{appearance:none;background:transparent;cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background-color:#dfe0e3}input[type=range]::-webkit-slider-thumb{appearance:none;margin-top:-5px;height:14px;width:14px;border-radius:14px;background-color:#4646ce}\n"] }]
8406
+ }], propDecorators: { disabled: [{
8407
+ type: Input
8408
+ }], max: [{
8409
+ type: Input
8410
+ }], min: [{
8411
+ type: Input
8412
+ }], step: [{
8413
+ type: Input
8414
+ }], rangeValue: [{
8415
+ type: Input
8416
+ }] } });
8417
+
8418
+ var CROP_IMAGE_MODES;
8419
+ (function (CROP_IMAGE_MODES) {
8420
+ CROP_IMAGE_MODES["SQUARE"] = "square";
8421
+ CROP_IMAGE_MODES["RECTANGLE"] = "rectangle";
8422
+ })(CROP_IMAGE_MODES || (CROP_IMAGE_MODES = {}));
8423
+
8424
+ class DrImageCropperCanvasService {
8425
+ constructor() {
8426
+ this.ALPHA_FOR_SHADOW = 0.2;
8427
+ // this param means that a side of a white square is half of a side of a canvas
8428
+ this.CROP_AREA_PROPORTION = 2;
8429
+ this.RECTANGULAR_SHADOW_WIDTH = 30;
8430
+ this.RECTANGULAR_SHADOW_HEIGHT = 70;
8431
+ }
8432
+ drawShape(canvasSize, cropMode, zoomLevel, htmlImageElement) {
8433
+ this.clearCanvas(canvasSize);
8434
+ this.drawImageByZoom(canvasSize, zoomLevel, htmlImageElement);
8435
+ this.drawShadow(cropMode, canvasSize);
8436
+ }
8437
+ getCoordinates(cropMode, canvasSize) {
8438
+ return cropMode === CROP_IMAGE_MODES.SQUARE
8439
+ ? this.getCoordinatesForSquare(canvasSize)
8440
+ : this.getCoordinatesForRectangle(canvasSize);
8441
+ }
8442
+ getCoordinatesForSquare(canvasSize) {
8443
+ const shadowLength = canvasSize / (this.CROP_AREA_PROPORTION * 2);
8444
+ const bottomPosition = canvasSize - shadowLength;
8445
+ return [shadowLength, shadowLength, bottomPosition, bottomPosition].join(',');
8446
+ }
8447
+ getCoordinatesForRectangle(canvasSize) {
8448
+ return [
8449
+ this.RECTANGULAR_SHADOW_WIDTH,
8450
+ this.RECTANGULAR_SHADOW_HEIGHT,
8451
+ canvasSize - this.RECTANGULAR_SHADOW_WIDTH,
8452
+ canvasSize - this.RECTANGULAR_SHADOW_HEIGHT
8453
+ ].join(',');
8454
+ }
8455
+ drawShadow(cropMode, canvasSize) {
8456
+ this.ctx.globalAlpha = this.ALPHA_FOR_SHADOW;
8457
+ this.ctx.fillStyle = 'black';
8458
+ if (cropMode === CROP_IMAGE_MODES.SQUARE) {
8459
+ this.drawSquareShadow(canvasSize);
8460
+ }
8461
+ else if (cropMode === CROP_IMAGE_MODES.RECTANGLE) {
8462
+ this.drawRectangularShadow(canvasSize);
8463
+ }
8464
+ this.ctx.globalAlpha = 1;
8465
+ }
8466
+ drawSquareShadow(canvasSize) {
8467
+ const shadowLength = canvasSize / (this.CROP_AREA_PROPORTION * 2);
8468
+ this.ctx.fillRect(0, 0, shadowLength, canvasSize);
8469
+ this.ctx.fillRect(canvasSize - shadowLength, 0, shadowLength, canvasSize);
8470
+ this.ctx.fillRect(shadowLength, 0, 2 * shadowLength, shadowLength);
8471
+ this.ctx.fillRect(shadowLength, canvasSize - shadowLength, 2 * shadowLength, shadowLength);
8472
+ }
8473
+ drawRectangularShadow(canvasSize) {
8474
+ this.ctx.fillRect(0, 0, this.RECTANGULAR_SHADOW_WIDTH, canvasSize);
8475
+ this.ctx.fillRect(canvasSize - this.RECTANGULAR_SHADOW_WIDTH, 0, this.RECTANGULAR_SHADOW_WIDTH, canvasSize);
8476
+ this.ctx.fillRect(this.RECTANGULAR_SHADOW_WIDTH, 0, canvasSize - 2 * this.RECTANGULAR_SHADOW_WIDTH, this.RECTANGULAR_SHADOW_HEIGHT);
8477
+ this.ctx.fillRect(this.RECTANGULAR_SHADOW_WIDTH, canvasSize - this.RECTANGULAR_SHADOW_HEIGHT, canvasSize - 2 * this.RECTANGULAR_SHADOW_WIDTH, this.RECTANGULAR_SHADOW_HEIGHT);
8478
+ }
8479
+ drawImageByZoom(canvasSize, zoomLevel, htmlImageElement) {
8480
+ const maxImageDimension = Math.max(htmlImageElement.width, htmlImageElement.height);
8481
+ const proportion = canvasSize / (this.CROP_AREA_PROPORTION * maxImageDimension);
8482
+ const suitableWidth = htmlImageElement.width * proportion * zoomLevel;
8483
+ const suitableHeight = htmlImageElement.height * proportion * zoomLevel;
8484
+ const rectX = (canvasSize - suitableWidth) / 2;
8485
+ const rectY = (canvasSize - suitableHeight) / 2;
8486
+ this.ctx.drawImage(htmlImageElement, rectX, rectY, suitableWidth, suitableHeight);
8487
+ }
8488
+ clearCanvas(canvasSize) {
8489
+ this.ctx.fillStyle = 'white';
8490
+ this.ctx.fillRect(0, 0, canvasSize, canvasSize);
8491
+ }
8492
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrImageCropperCanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
8493
+ /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrImageCropperCanvasService }); }
8494
+ }
8495
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrImageCropperCanvasService, decorators: [{
8496
+ type: Injectable
8497
+ }] });
8498
+
8499
+ class DrImageCropperComponent {
8500
+ constructor(canvasService) {
8501
+ this.canvasService = canvasService;
8502
+ this.maxZoom = 10;
8503
+ this.minZoom = 0.5;
8504
+ this.zoomStep = 0.1;
8505
+ this.zoomLevel = 1;
8506
+ this.cropChanged = new EventEmitter();
8507
+ this.clearClicked = new EventEmitter();
8508
+ this.cropMode = CROP_IMAGE_MODES.SQUARE;
8509
+ this.CROP_IMAGE_MODES = CROP_IMAGE_MODES;
8510
+ }
8511
+ ngOnChanges(changes) {
8512
+ if (changes.imageFile && this.imageFile) {
8513
+ this.readImageFile();
8514
+ }
8515
+ }
8516
+ ngAfterViewInit() {
8517
+ this.canvasService.ctx = this.canvasElement.nativeElement.getContext('2d');
8518
+ }
8519
+ drawImage(newZoomEvent) {
8520
+ if (newZoomEvent !== undefined) {
8521
+ this.zoomLevel = newZoomEvent.target.value;
8522
+ }
8523
+ this.onCropModeUpdated();
8524
+ }
8525
+ onCropModeUpdated(cropMode) {
8526
+ if (cropMode) {
8527
+ this.cropMode = cropMode;
8528
+ }
8529
+ this.canvasService.drawShape(this.cropperSize, this.cropMode, this.zoomLevel, this.htmlImageElement);
8530
+ const coordinates = this.canvasService.getCoordinates(this.cropMode, this.cropperSize);
8531
+ this.canvasElement.nativeElement.toBlob((blob) => {
8532
+ const file = new File([blob], this.imageFile.name, { type: this.imageFile.type, lastModified: Date.now() });
8533
+ this.cropChanged.emit({ file, coordinates, cropMode: this.cropMode });
8534
+ }, this.imageFile.type);
8535
+ }
8536
+ readImageFile() {
8537
+ const reader = new FileReader();
8538
+ reader.onload = () => {
8539
+ this.htmlImageElement = new Image();
8540
+ this.htmlImageElement.src = this.getImagesStringSrc(reader);
8541
+ this.htmlImageElement.onload = () => {
8542
+ this.canvasElement.nativeElement.width = this.canvasElement.nativeElement.height = this.cropperSize;
8543
+ this.drawImage();
8544
+ };
8545
+ };
8546
+ reader.readAsDataURL(this.imageFile);
8547
+ }
8548
+ getImagesStringSrc(reader) {
8549
+ if (typeof reader.result === 'string')
8550
+ return reader.result;
8551
+ const decoder = new TextDecoder();
8552
+ return decoder.decode(reader.result);
8553
+ }
8554
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrImageCropperComponent, deps: [{ token: DrImageCropperCanvasService }], target: i0.ɵɵFactoryTarget.Component }); }
8555
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DrImageCropperComponent, isStandalone: true, selector: "dr-image-cropper", inputs: { cropperSize: "cropperSize", imageFile: "imageFile", maxZoom: "maxZoom", minZoom: "minZoom", zoomStep: "zoomStep", zoomLevel: "zoomLevel" }, outputs: { cropChanged: "cropChanged", clearClicked: "clearClicked" }, providers: [DrImageCropperCanvasService], viewQueries: [{ propertyName: "canvasElement", first: true, predicate: ["imageCanvas"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"crop-mode-btns-container\">\n <dr-button theme=\"ghost\"\n [class.active-mode]=\"cropMode === CROP_IMAGE_MODES.SQUARE\"\n (click)=\"onCropModeUpdated(CROP_IMAGE_MODES.SQUARE)\">\n <div class=\"mode-btn\">\n <div class=\"mode-btn__square-icon\"></div>\n Square\n </div>\n </dr-button>\n <dr-button theme=\"ghost\"\n [class.active-mode]=\"cropMode === CROP_IMAGE_MODES.RECTANGLE\"\n (click)=\"onCropModeUpdated(CROP_IMAGE_MODES.RECTANGLE)\">\n <div class=\"mode-btn\">\n <div class=\"mode-btn__rectangle-icon\"></div>\n Rectangle\n </div>\n </dr-button>\n</div>\n\n<div class=\"image-cropper\">\n <canvas #imageCanvas></canvas>\n</div>\n<dr-slider\n [(ngModel)]=\"zoomLevel\"\n [max]=\"maxZoom\"\n [min]=\"minZoom\"\n [step]=\"zoomStep\"\n [style.width]=\"cropperSize + 'px'\"\n class=\"image-crop-slider\"\n (input)=\"drawImage($event)\">\n</dr-slider>\n<dr-button [theme]=\"'ghost'\" (click)=\"clearClicked.emit()\" class=\"try-another-btn\">\n Try another image\n</dr-button>\n", styles: [":host{display:flex;flex-direction:column}:host .crop-mode-btns-container{display:flex;justify-content:center;margin-bottom:16px}:host .crop-mode-btns-container ::ng-deep dr-button.active-mode>button{background:#eaeaff}:host .crop-mode-btns-container ::ng-deep dr-button>button{height:56px;width:80px}:host .crop-mode-btns-container dr-button:not(:first-child){margin-left:8px}:host .crop-mode-btns-container .mode-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#333;height:56px;width:80px}:host .crop-mode-btns-container .mode-btn__rectangle-icon{height:8px;width:24px;margin-top:4px;margin-bottom:4px}:host .crop-mode-btns-container .mode-btn__square-icon{width:16px;height:16px}:host .crop-mode-btns-container .mode-btn__rectangle-icon,:host .crop-mode-btns-container .mode-btn__square-icon{border:1px solid #333333}:host .image-cropper{overflow:hidden;position:relative}:host .image-cropper__shadow{position:absolute}:host .image-crop-slider{margin-top:8px}:host .try-another-btn{display:flex;justify-content:center;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DrSliderComponent, selector: "dr-slider", inputs: ["disabled", "max", "min", "step", "rangeValue"] }, { kind: "ngmodule", type: DrInputsModule }, { kind: "component", type: DrButtonComponent, selector: "dr-button", inputs: ["theme", "icon", "iconColor", "iconSize", "iconAfter", "iconAfterColor", "iconAfterSize", "disabled", "isLoading", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
8556
+ }
8557
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrImageCropperComponent, decorators: [{
8558
+ type: Component,
8559
+ args: [{ selector: 'dr-image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, DrSliderComponent, DrInputsModule], standalone: true, providers: [DrImageCropperCanvasService], template: "<div class=\"crop-mode-btns-container\">\n <dr-button theme=\"ghost\"\n [class.active-mode]=\"cropMode === CROP_IMAGE_MODES.SQUARE\"\n (click)=\"onCropModeUpdated(CROP_IMAGE_MODES.SQUARE)\">\n <div class=\"mode-btn\">\n <div class=\"mode-btn__square-icon\"></div>\n Square\n </div>\n </dr-button>\n <dr-button theme=\"ghost\"\n [class.active-mode]=\"cropMode === CROP_IMAGE_MODES.RECTANGLE\"\n (click)=\"onCropModeUpdated(CROP_IMAGE_MODES.RECTANGLE)\">\n <div class=\"mode-btn\">\n <div class=\"mode-btn__rectangle-icon\"></div>\n Rectangle\n </div>\n </dr-button>\n</div>\n\n<div class=\"image-cropper\">\n <canvas #imageCanvas></canvas>\n</div>\n<dr-slider\n [(ngModel)]=\"zoomLevel\"\n [max]=\"maxZoom\"\n [min]=\"minZoom\"\n [step]=\"zoomStep\"\n [style.width]=\"cropperSize + 'px'\"\n class=\"image-crop-slider\"\n (input)=\"drawImage($event)\">\n</dr-slider>\n<dr-button [theme]=\"'ghost'\" (click)=\"clearClicked.emit()\" class=\"try-another-btn\">\n Try another image\n</dr-button>\n", styles: [":host{display:flex;flex-direction:column}:host .crop-mode-btns-container{display:flex;justify-content:center;margin-bottom:16px}:host .crop-mode-btns-container ::ng-deep dr-button.active-mode>button{background:#eaeaff}:host .crop-mode-btns-container ::ng-deep dr-button>button{height:56px;width:80px}:host .crop-mode-btns-container dr-button:not(:first-child){margin-left:8px}:host .crop-mode-btns-container .mode-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#333;height:56px;width:80px}:host .crop-mode-btns-container .mode-btn__rectangle-icon{height:8px;width:24px;margin-top:4px;margin-bottom:4px}:host .crop-mode-btns-container .mode-btn__square-icon{width:16px;height:16px}:host .crop-mode-btns-container .mode-btn__rectangle-icon,:host .crop-mode-btns-container .mode-btn__square-icon{border:1px solid #333333}:host .image-cropper{overflow:hidden;position:relative}:host .image-cropper__shadow{position:absolute}:host .image-crop-slider{margin-top:8px}:host .try-another-btn{display:flex;justify-content:center;margin-top:8px}\n"] }]
8560
+ }], ctorParameters: function () { return [{ type: DrImageCropperCanvasService }]; }, propDecorators: { cropperSize: [{
8561
+ type: Input,
8562
+ args: [{ required: true }]
8563
+ }], imageFile: [{
8564
+ type: Input,
8565
+ args: [{ required: true }]
8566
+ }], maxZoom: [{
8567
+ type: Input
8568
+ }], minZoom: [{
8569
+ type: Input
8570
+ }], zoomStep: [{
8571
+ type: Input
8572
+ }], zoomLevel: [{
8573
+ type: Input
8574
+ }], cropChanged: [{
8575
+ type: Output
8576
+ }], clearClicked: [{
8577
+ type: Output
8578
+ }], canvasElement: [{
8579
+ type: ViewChild,
8580
+ args: ['imageCanvas', { static: true }]
8581
+ }] } });
8582
+
8368
8583
  class DrDropdownModule {
8369
8584
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
8370
8585
  /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DrDropdownModule, declarations: [DrDropdownDirective,
@@ -8856,5 +9071,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
8856
9071
  * Generated bundle index. Do not edit.
8857
9072
  */
8858
9073
 
8859
- export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateFormat, DEFAULT_LINK_FONT_SIZE, DEFAULT_LINK_FONT_WEIGHT, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrLinkComponent, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, ICodeEditorHintIcon, IMAGE_TYPES, LinkTheme, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
9074
+ export { AnyTagComponent, BadgeStatus, CHAT_MESSAGE_TYPE, CROP_IMAGE_MODES, CalendarView, ChatMessage, ChatRole, CheckboxComponent, ClickOutsideDirective, ClickOutsideModule, CodeEditorHintWrapperComponent, CustomDateFormat, DEFAULT_LINK_FONT_SIZE, DEFAULT_LINK_FONT_WEIGHT, DIALOG_BUTTON_LABEL, DIALOG_FIELD_TYPE, DIALOG_SIZE, DateFromats, DatePickerPeriodPosition, DateTagComponent, DateTagModule, DateTags, DayTagComponent, DefaultToastrComponent, DefaultTreeviewEventParser, DefaultTreeviewI18n, DialogModalWrapperComponent, DialogService, DialogWrapperComponent, DownlineTreeviewEventParser, DrAccordionComponent, DrAccordionItemBodyComponent, DrAccordionItemComponent, DrAccordionItemHeaderComponent, DrAccordionModule, DrAlertComponent, DrAlertModule, DrAlertTheme, DrAvatarComponent, DrAvatarModule, DrAvatarPipe, DrAvatarService, DrBadgeStatusComponent, DrBadgeStatusModule, DrButtonComponent, DrChatAlertComponent, DrChatComponent, DrChatCustomMessageDirective, DrChatFormComponent, DrChatMessageComponent, DrChatMessageFileComponent, DrChatMessageTextComponent, DrChatModule, DrChatSuggestionsComponent, DrCodeEditorComponent, DrCodeEditorModule, DrCodemirrorComponent, DrDatePickerComponent, DrDatePickerCustomHeaderComponent, DrDatePickerFormatDirective, DrDatePickerRangeComponent, DrDatePickerWithTimeframeComponent, DrDetailsListComponent, DrDetailsListModule, DrDialogModule, DrDotFlashingComponent, DrDropdownComponent, DrDropdownDirective, DrDropdownItemShowPipe, DrDropdownModule, DrDropdownPositionDirective, DrDropdownService, DrErrorComponent, DrErrorModule, DrImageCropperComponent, DrInputComponent, DrInputsModule, DrLayoutBodyComponent, DrLayoutComponent, DrLayoutHeaderComponent, DrLayoutModule, DrLinkComponent, DrModelDebounceChangeDirective, DrPopoverAlignmentDimension, DrPopoverComponent, DrPopoverDirective, DrPopoverModule, DrPopoverRef, DrPopoverService, DrScenarioConfigurationComponent, DrScenarioModule, DrScenarioTagConfigurationComponent, DrSelectAddItemComponent, DrSelectComponent, DrSharedUtils, DrShowTimeframePipe, DrSliderComponent, DrSpinnerComponent, DrSpinnerDirective, DrSpinnerModule, DrStepperModule, DrTabComponent, DrTabsComponent, DrTabsModule, DrTagComponent, DrTagModule, DrTagsConstructorComponent, DrTagsConstructorModule, DrToastrModule, DrToastrService, DrToggleButtonComponent, DrToggleComponent, DrTooltipDirective, DrTooltipModule, FeedbackSentiment, ForecastTagComponent, ICodeEditorHintIcon, IMAGE_TYPES, LinkTheme, ListTagComponent, ListTagModule, MonthTagComponent, OrderDownlineTreeviewEventParser, QuarterTagComponent, RadioButtonComponent, RadioGroupComponent, Scenario, ScenarioService, StepperComponent, TagTypes, TagsConfigSubType, TagsConstructorService, TimeframeOption, ToastrStatus, ToastrStatusIcon, ToggleButtonMode, TooltipComponent, TooltipDefaultComponent, TooltipInfoComponent, TooltipInfoSimpleComponent, TooltipNoBodyComponent, TooltipPosition, TooltipProcessDefaultComponent, TooltipTheme, TreeviewComponent, TreeviewConfig, TreeviewEventParser, TreeviewHelper, TreeviewI18n, TreeviewItem, TreeviewModule, TreeviewPipe, WeekTagComponent, YearTagComponent };
8860
9075
  //# sourceMappingURL=datarailsshared-datarailsshared.mjs.map