@progress/kendo-angular-conversational-ui 5.0.0-next.202204010856 → 5.0.0

package/api/action.interface.d.ts

@@ -15,6 +15,10 @@ export declare type ActionType = 'openUrl' | 'reply' | 'call' | string;
  * The value is interpreted according to the specified action type.
  */
 export interface Action {
+    /**
+     * A predefined or custom (string) type for the action.
+     */
+    type: ActionType;
     /**
      * The value which is associated with the action.
      */
@@ -24,8 +28,4 @@ export interface Action {
      * If omitted, the Chat displays the value instead.
      */
     title?: string;
-    /**
-     * A predefined or custom (string) type for the action.
-     */
-    type: ActionType;
 }

package/bundles/kendo-angular-conversational-ui.umd.js

@@ -2,4 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-intl"),require("@angular/common"),require("rxjs"),require("rxjs/operators"),require("@progress/kendo-angular-common"),require("@progress/kendo-angular-buttons")):"function"==typeof define&&define.amd?define("KendoAngularConversationalUi",["exports","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-licensing","@progress/kendo-angular-intl","@angular/common","rxjs","rxjs/operators","@progress/kendo-angular-common","@progress/kendo-angular-buttons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularConversationalUi={},e.ng.core,e.KendoAngularL10N,e.KendoLicensing,e.KendoAngularIntl,e.ng.common,e.rxjs,e.rxjs.operators,e.KendoAngularCommon,e.KendoAngularButtons)}(this,function(e,o,t,P,n,s,L,N,a,r){"use strict";function i(n){if(n&&n.__esModule)return n;var s=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),s.default=n,Object.freeze(s)}function R(){}var c=i(o),l=i(t),p=i(n),n=i(s),u=i(a),g=i(r),m=function(e){this.templateRef=e},d=(m.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:m,deps:[{token:c.TemplateRef,optional:!0}],target:c.ɵɵFactoryTarget.Directive}),m.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:m,selector:"[kendoChatAttachmentTemplate]",ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:m,decorators:[{type:o.Directive,args:[{selector:"[kendoChatAttachmentTemplate]"}]}],ctorParameters:function(){return[{type:c.TemplateRef,decorators:[{type:o.Optional}]}]}}),function(e){this.message=e}),j={reply:function(e,t){t.sendMessage.emit(new d({author:t.user,text:e.value,timestamp:new Date}))},call:function(e){window.open("tel:"+e.value)},openUrl:function(e){window.open(e.value)}},h=function(e){this.templateRef=e},U=(h.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:h,deps:[{token:c.TemplateRef,optional:!0}],target:c.ɵɵFactoryTarget.Directive}),h.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:h,selector:"[kendoChatMessageTemplate]",ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:h,decorators:[{type:o.Directive,args:[{selector:"[kendoChatMessageTemplate]"}]}],ctorParameters:function(){return[{type:c.TemplateRef,decorators:[{type:o.Optional}]}]}}),function(e,t){return(U=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)});function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}U(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function y(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var s,a,o=n.call(e),r=[];try{for(;(void 0===t||0<t--)&&!(s=o.next()).done;)r.push(s.value)}catch(e){a={error:e}}finally{try{s&&!s.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return r}function H(e,t,n){if(n||2===arguments.length)for(var s,a=0,o=t.length;a<o;a++)!s&&a in t||((s=s||Array.prototype.slice.call(t,0,a))[a]=t[a]);return e.concat(s||Array.prototype.slice.call(t))}Object.create;function K(){this.prevented=!1}K.prototype.preventDefault=function(){this.prevented=!0},K.prototype.isDefaultPrevented=function(){return this.prevented};f(q,_=K);var _,$=q;function q(e,t){var n=_.call(this)||this;return n.action=e,n.message=t,n}function v(){}function G(e,t){return e&&t.author&&e.id===t.author.id}function W(e){return e[e.length-1]}function Z(e){return e.reduce((s=e.length,function(e,t,n){n=n===s-1;return Y(e,t),J(e,t,n),t.attachments&&1<t.attachments.length&&e.push({type:"attachment-group",attachments:t.attachments,attachmentLayout:t.attachmentLayout,timestamp:t.timestamp,trackBy:t}),t.suggestedActions&&n&&e.push({type:"action-group",actions:t.suggestedActions,timestamp:t.timestamp,trackBy:t}),e}),[]);var s}var Q,X={name:"@progress/kendo-angular-conversational-ui",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1648803312,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},Y=function(e,t){var n,t=t.timestamp,s=W(e);!t||s&&(n=t,s=s.timestamp,!n||!s||s.getDate()===n.getDate()&&s.getMonth()===n.getMonth()&&s.getFullYear()===n.getFullYear())||(s={type:"date-marker",timestamp:t,trackBy:t.getTime()},e.push(s))},J=function(e,t,n){var s,a=W(e);if(o.isDevMode()&&!t.author)throw new Error("Author must be set for message: "+JSON.stringify(t));t.typing&&!n||((s=a&&"message-group"===a.type?a.messages:s)&&G(t.author,W(s))?s.push(t):e.push({type:"message-group",messages:[t],author:t.author,timestamp:t.timestamp,trackBy:t}))},k=(f(b,Q=v),Object.defineProperty(b.prototype,"tabIndex",{get:function(){return this.tabbable?"0":"-1"},enumerable:!1,configurable:!0}),b.prototype.formatTimeStamp=function(e){return this.intl.formatDate(e,{datetime:"short"})},b.prototype.focus=function(){this.element.nativeElement.focus()},b);function b(e,t){var n=Q.call(this)||this;return n.element=e,n.intl=t,n.cssClass=!0,n}k.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:k,deps:[{token:c.ElementRef},{token:p.IntlService}],target:c.ɵɵFactoryTarget.Component}),k.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:k,selector:"kendo-chat-message",inputs:{message:"message",tabbable:"tabbable",template:"template"},host:{properties:{"class.k-message":"this.cssClass","class.k-state-selected":"this.selected","class.k-state-focused":"this.selected","attr.tabIndex":"this.tabIndex"}},providers:[{provide:v,useExisting:o.forwardRef(function(){return k})}],usesInheritance:!0,ngImport:c,template:'\n    <time\n      [attr.aria-hidden]="!selected"\n      class="k-message-time"\n      *ngIf="message.timestamp"\n    >\n      {{ formatTimeStamp(message.timestamp) }}\n    </time>\n\n    <ng-container *ngIf="!message.typing; else typing">\n      <div class="k-bubble" *ngIf="template">\n        <ng-container\n          *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"\n        >\n        </ng-container>\n      </div>\n\n      <div class="k-bubble" *ngIf="!template && message.text">\n        {{message.text}}\n      </div>\n    </ng-container>\n\n    <span\n      class="k-message-status"\n      *ngIf="message.status"\n    >\n      {{ message.status }}\n    </span>\n\n    <ng-template #typing>\n      <div class="k-bubble">\n        <div class="k-typing-indicator">\n          <span></span>\n          <span></span>\n          <span></span>\n        </div>\n      </div>\n    </ng-template>\n  ',isInline:!0,directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:k,decorators:[{type:o.Component,args:[{selector:"kendo-chat-message",providers:[{provide:v,useExisting:o.forwardRef(function(){return k})}],template:'\n    <time\n      [attr.aria-hidden]="!selected"\n      class="k-message-time"\n      *ngIf="message.timestamp"\n    >\n      {{ formatTimeStamp(message.timestamp) }}\n    </time>\n\n    <ng-container *ngIf="!message.typing; else typing">\n      <div class="k-bubble" *ngIf="template">\n        <ng-container\n          *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"\n        >\n        </ng-container>\n      </div>\n\n      <div class="k-bubble" *ngIf="!template && message.text">\n        {{message.text}}\n      </div>\n    </ng-container>\n\n    <span\n      class="k-message-status"\n      *ngIf="message.status"\n    >\n      {{ message.status }}\n    </span>\n\n    <ng-template #typing>\n      <div class="k-bubble">\n        <div class="k-typing-indicator">\n          <span></span>\n          <span></span>\n          <span></span>\n        </div>\n      </div>\n    </ng-template>\n  '}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:p.IntlService}]},propDecorators:{message:[{type:o.Input}],tabbable:[{type:o.Input}],template:[{type:o.Input}],cssClass:[{type:o.HostBinding,args:["class.k-message"]}],selected:[{type:o.HostBinding,args:["class.k-state-selected"]},{type:o.HostBinding,args:["class.k-state-focused"]}],tabIndex:[{type:o.HostBinding,args:["attr.tabIndex"]}]}});Object.defineProperty(C.prototype,"attachment",{get:function(){return this._attachment},set:function(e){this._attachment=e,this.context={$implicit:this.attachment}},enumerable:!1,configurable:!0}),Object.defineProperty(C.prototype,"image",{get:function(){return 0===this.contentType.indexOf("image/")},enumerable:!1,configurable:!0}),Object.defineProperty(C.prototype,"unknown",{get:function(){return!this.image},enumerable:!1,configurable:!0}),Object.defineProperty(C.prototype,"contentType",{get:function(){return this.attachment.contentType||""},enumerable:!1,configurable:!0});var I=C;function C(){}I.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:I,deps:[],target:c.ɵɵFactoryTarget.Component}),I.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:I,selector:"kendo-chat-attachment",inputs:{attachment:"attachment",template:"template"},ngImport:c,template:'\n    <ng-container *ngIf="template">\n      <ng-container *ngTemplateOutlet="template.templateRef; context: context;">\n      </ng-container>\n    </ng-container>\n\n    <div *ngIf="!template" class="k-card">\n      <div class="k-card-body">\n        <h5 class="k-card-title" *ngIf="attachment.title">\n          {{ attachment.title }}\n        </h5>\n        <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">\n          {{ attachment.subtitle }}\n        </h6>\n        <img *ngIf="image" [attr.src]="attachment.content" />\n        <ng-container *ngIf="unknown">\n          {{ attachment.content }}\n        </ng-container>\n      </div>\n    </div>\n  ',isInline:!0,directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:I,decorators:[{type:o.Component,args:[{selector:"kendo-chat-attachment",template:'\n    <ng-container *ngIf="template">\n      <ng-container *ngTemplateOutlet="template.templateRef; context: context;">\n      </ng-container>\n    </ng-container>\n\n    <div *ngIf="!template" class="k-card">\n      <div class="k-card-body">\n        <h5 class="k-card-title" *ngIf="attachment.title">\n          {{ attachment.title }}\n        </h5>\n        <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">\n          {{ attachment.subtitle }}\n        </h6>\n        <img *ngIf="image" [attr.src]="attachment.content" />\n        <ng-container *ngIf="unknown">\n          {{ attachment.content }}\n        </ng-container>\n      </div>\n    </div>\n  '}]}],propDecorators:{attachment:[{type:o.Input}],template:[{type:o.Input}]}});f(w,ee=v),Object.defineProperty(w.prototype,"carousel",{get:function(){return"list"!==this.layout},enumerable:!1,configurable:!0}),w.prototype.ngAfterViewInit=function(){var e=this;this.zone.runOutsideAngular(function(){e.scrollSubscription=L.fromEvent(e.deck.nativeElement,"scroll").pipe(N.debounceTime(100)).subscribe(function(){return e.onScroll()})})},w.prototype.ngOnDestroy=function(){this.scrollSubscription.unsubscribe()},w.prototype.isSelected=function(e){return this.selectedIndex===e},w.prototype.itemKeydown=function(e,t){var n=("list"===this.layout?this.listKeyHandlers:this.carouselKeyHandlers)[e.keyCode];n&&n(e,t)},w.prototype.itemClick=function(e){this.select(e)},w.prototype.focus=function(){this.select(this.selectedIndex)},w.prototype.scrollTo=function(e){var t=this.deck.nativeElement,n=t.scrollWidth/this.items.length,s=t.scrollWidth-t.offsetWidth,n=t.scrollLeft+n*e;t.scrollLeft=Math.max(0,Math.min(s,n))},w.prototype.select=function(e){this.selectedIndex=e;e=this.items.toArray()[e];e&&e.nativeElement.focus()},w.prototype.navigateTo=function(e,t){var n=this.selectedIndex,t=Math.max(0,Math.min(n+t,this.items.length-1));t!==n&&(this.select(t),e.preventDefault())},w.prototype.onScroll=function(){var e,t=this,n=this.deck.nativeElement;0!==n.scrollWidth&&(e=n.scrollLeft/(n.scrollWidth-n.offsetWidth))!==this.scrollPosition&&this.zone.run(function(){t.scrollPosition=e})};var ee,x=w;function w(e){var t=ee.call(this)||this;return t.zone=e,t.scrollPosition=0,t.selectedIndex=0,t.carouselKeyHandlers=((e={})[37]=function(e){return t.navigateTo(e,-1)},e[39]=function(e){return t.navigateTo(e,1)},e),t.listKeyHandlers=((e={})[38]=function(e){return t.navigateTo(e,-1)},e[40]=function(e){return t.navigateTo(e,1)},e),t}x.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:x,deps:[{token:c.NgZone}],target:c.ɵɵFactoryTarget.Component}),x.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:x,selector:"kendo-chat-message-attachments",inputs:{attachments:"attachments",layout:"layout",tabbable:"tabbable",template:"template"},host:{properties:{"class.k-card-deck-scrollwrap":"this.carousel"}},providers:[{provide:v,useExisting:o.forwardRef(function(){return x})}],viewQueries:[{propertyName:"deck",first:!0,predicate:["deck"],descendants:!0,read:o.ElementRef,static:!0},{propertyName:"items",predicate:["item"],descendants:!0,read:o.ElementRef}],usesInheritance:!0,ngImport:c,template:'\n    <button\n      *ngIf="carousel && scrollPosition > 0"\n      (click)="scrollTo(-1)"\n      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n      tabindex="-1">\n        <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>\n    </button>\n    <div #deck [class.k-card-deck]="carousel">\n      <kendo-chat-attachment #item\n        *ngFor="let att of attachments; index as index; first as first; last as last"\n        [attachment]="att"\n        [template]="template"\n        [class.k-state-selected]="isSelected(index)"\n        [class.k-state-focused]="isSelected(index)"\n        [class.k-card-wrap]="true"\n        [class.k-first]="first"\n        [class.k-last]="last"\n        [attr.tabindex]="tabbable && isSelected(index) ? \'0\' : \'-1\'"\n        (click)="itemClick(index)"\n        (keydown)="itemKeydown($event, att)"\n      >\n      </kendo-chat-attachment>\n    </div>\n    <button\n      *ngIf="carousel && scrollPosition < 1"\n      (click)="scrollTo(1)"\n      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n      tabindex="-1">\n        <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>\n    </button>\n  ',isInline:!0,components:[{type:I,selector:"kendo-chat-attachment",inputs:["attachment","template"]}],directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:x,decorators:[{type:o.Component,args:[{providers:[{provide:v,useExisting:o.forwardRef(function(){return x})}],selector:"kendo-chat-message-attachments",template:'\n    <button\n      *ngIf="carousel && scrollPosition > 0"\n      (click)="scrollTo(-1)"\n      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n      tabindex="-1">\n        <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>\n    </button>\n    <div #deck [class.k-card-deck]="carousel">\n      <kendo-chat-attachment #item\n        *ngFor="let att of attachments; index as index; first as first; last as last"\n        [attachment]="att"\n        [template]="template"\n        [class.k-state-selected]="isSelected(index)"\n        [class.k-state-focused]="isSelected(index)"\n        [class.k-card-wrap]="true"\n        [class.k-first]="first"\n        [class.k-last]="last"\n        [attr.tabindex]="tabbable && isSelected(index) ? \'0\' : \'-1\'"\n        (click)="itemClick(index)"\n        (keydown)="itemKeydown($event, att)"\n      >\n      </kendo-chat-attachment>\n    </div>\n    <button\n      *ngIf="carousel && scrollPosition < 1"\n      (click)="scrollTo(1)"\n      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n      tabindex="-1">\n        <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>\n    </button>\n  '}]}],ctorParameters:function(){return[{type:c.NgZone}]},propDecorators:{attachments:[{type:o.Input}],layout:[{type:o.Input}],tabbable:[{type:o.Input}],template:[{type:o.Input}],carousel:[{type:o.HostBinding,args:["class.k-card-deck-scrollwrap"]}],deck:[{type:o.ViewChild,args:["deck",{read:o.ElementRef,static:!0}]}],items:[{type:o.ViewChildren,args:["item",{read:o.ElementRef}]}]}});f(S,te=v),S.prototype.isSelected=function(e){return this.selected&&this.selectedIndex===e},S.prototype.actionClick=function(e){this.dispatch.next(e)},S.prototype.actionKeydown=function(e,t){var n=this.keyHandlers[e.keyCode];n&&n(e,t)},S.prototype.focus=function(){this.select(this.selectedIndex)},S.prototype.select=function(e){this.selectedIndex=e;e=this.items.toArray()[e];e&&e.nativeElement.focus()},S.prototype.navigateTo=function(e,t){var n=this.selectedIndex,t=Math.max(0,Math.min(n+t,this.items.length-1));t!==n&&(this.select(t),e.preventDefault())};var te,T=S;function S(){var e,n=te.apply(this,H([],y(arguments)))||this;return n.dispatch=new o.EventEmitter,n.defaultClass=!0,n.selectedIndex=0,n.keyHandlers=((e={})[37]=function(e){return n.navigateTo(e,-1)},e[39]=function(e){return n.navigateTo(e,1)},e[13]=function(e,t){return n.actionClick(t)},e),n}T.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:T,deps:null,target:c.ɵɵFactoryTarget.Component}),T.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:T,selector:"kendo-chat-suggested-actions",inputs:{actions:"actions",tabbable:"tabbable"},outputs:{dispatch:"dispatch"},host:{properties:{"class.k-quick-replies":"this.defaultClass"}},providers:[{provide:v,useExisting:o.forwardRef(function(){return T})}],viewQueries:[{propertyName:"items",predicate:["item"],descendants:!0}],usesInheritance:!0,ngImport:c,template:'\n    <span #item\n      *ngFor="let action of actions; index as index; first as first; last as last"\n      class="k-quick-reply"\n      [class.k-state-selected]="isSelected(index)"\n      [class.k-state-focused]="isSelected(index)"\n      [class.k-first]="first"\n      [class.k-last]="last"\n      [attr.tabindex]="tabbable && selectedIndex === index ? \'0\' : \'-1\'"\n      (click)="actionClick(action)"\n      (keydown)="actionKeydown($event, action)"\n    >\n      {{ action.title || action.value }}\n    </span>\n  ',isInline:!0,directives:[{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:T,decorators:[{type:o.Component,args:[{selector:"kendo-chat-suggested-actions",providers:[{provide:v,useExisting:o.forwardRef(function(){return T})}],template:'\n    <span #item\n      *ngFor="let action of actions; index as index; first as first; last as last"\n      class="k-quick-reply"\n      [class.k-state-selected]="isSelected(index)"\n      [class.k-state-focused]="isSelected(index)"\n      [class.k-first]="first"\n      [class.k-last]="last"\n      [attr.tabindex]="tabbable && selectedIndex === index ? \'0\' : \'-1\'"\n      (click)="actionClick(action)"\n      (keydown)="actionKeydown($event, action)"\n    >\n      {{ action.title || action.value }}\n    </span>\n  '}]}],propDecorators:{actions:[{type:o.Input}],tabbable:[{type:o.Input}],dispatch:[{type:o.Output}],defaultClass:[{type:o.HostBinding,args:["class.k-quick-replies"]}],items:[{type:o.ViewChildren,args:["item"]}]}});Object.defineProperty(M.prototype,"messages",{get:function(){return this._messages},set:function(e){e=e||[];this.view=Z(e),this._messages=e},enumerable:!1,configurable:!0}),M.prototype.ngAfterViewInit=function(){this.selectedItem=this.items.last},M.prototype.onResize=function(){this.resize.emit()},M.prototype.formatTimeStamp=function(e){return this.intl.formatDate(e,{date:"full"})},M.prototype.onKeydown=function(e){var t=this.keyActions[e.keyCode];t&&t(e)},M.prototype.onBlur=function(e){var t=this;!function(e,t){for(;e&&!t(e);)e=e.parentNode;return e}(e.relatedTarget||document.activeElement,function(e){return e===t.element.nativeElement})&&this.select(null)},M.prototype.isOwnMessage=function(e){return G(this.user,e)},M.prototype.dispatchAction=function(e,t){e=new $(e,t);this.executeAction.emit(e)},M.prototype.trackGroup=function(e,t){return t.trackBy},M.prototype.select=function(e){var t=this.selectedItem;t&&(t.selected=!1),e&&(e.selected=!0,this.selectedItem=e)},M.prototype.last=function(e){if(e&&0!==e.length)return e[e.length-1]},M.prototype.navigateTo=function(e,t){var n=this.items.toArray(),s=this.selectedItem,a=n.indexOf(s),n=n[Math.max(0,Math.min(a+t,this.items.length-1))];n!==s&&(this.select(n),n.focus(),this.navigate.emit(),e.preventDefault())};var D=M;function M(e,t){var n=this;this.element=e,this.intl=t,this.executeAction=new o.EventEmitter,this.navigate=new o.EventEmitter,this.resize=new o.EventEmitter,this.cssClass=!0,this.view=[],this.keyActions=((e={})[38]=function(e){return n.navigateTo(e,-1)},e[40]=function(e){return n.navigateTo(e,1)},e)}D.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:D,deps:[{token:c.ElementRef},{token:p.IntlService}],target:c.ɵɵFactoryTarget.Component}),D.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:D,selector:"kendo-chat-message-list",inputs:{messages:"messages",attachmentTemplate:"attachmentTemplate",messageTemplate:"messageTemplate",user:"user"},outputs:{executeAction:"executeAction",navigate:"navigate",resize:"resize"},host:{listeners:{keydown:"onKeydown($event)",focusout:"onBlur($event)"},properties:{"class.k-message-list-content":"this.cssClass"}},viewQueries:[{propertyName:"items",predicate:v,descendants:!0}],ngImport:c,template:'\n    <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">\n      <ng-container [ngSwitch]="group.type">\n        <div\n          *ngSwitchCase="\'date-marker\'"\n          class="k-timestamp"\n        >\n          {{ formatTimeStamp(group.timestamp) }}\n        </div>\n        <div\n          *ngSwitchCase="\'message-group\'"\n          class="k-message-group"\n          [class.k-alt]="isOwnMessage(group.messages[0])"\n          [class.k-no-avatar]="!group.author.avatarUrl"\n        >\n          <img\n            *ngIf="group.author.avatarUrl"\n            [attr.src]="group.author.avatarUrl"\n            class="k-avatar"\n          />\n          <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>\n          <ng-container\n              *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"\n          >\n            <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">\n            <kendo-chat-message #message\n              [message]="msg"\n              [tabbable]="lastGroup && lastMessage"\n              [template]="messageTemplate"\n              (click)="select(message)"\n              (focus)="select(message)"\n              [class.k-only]="group.messages.length === 1"\n              [class.k-first]="group.messages.length > 1 && firstMessage"\n              [class.k-last]="group.messages.length > 1 && lastMessage"\n            >\n            </kendo-chat-message>\n\n            <kendo-chat-attachment\n              *ngIf="msg.attachments && msg.attachments.length === 1"\n              [attachment]="msg.attachments[0]"\n              [template]="attachmentTemplate"\n              >\n            </kendo-chat-attachment>\n          </ng-container>\n        </div>\n\n        <kendo-chat-message-attachments #attachments\n          *ngSwitchCase="\'attachment-group\'"\n          [attachments]="group.attachments"\n          [layout]="group.attachmentLayout"\n          [tabbable]="lastGroup"\n          [template]="attachmentTemplate"\n          (click)="select(attachments)"\n          (focus)="select(attachments)"\n        >\n        </kendo-chat-message-attachments>\n\n        <kendo-chat-suggested-actions #actions\n          *ngSwitchCase="\'action-group\'"\n          [actions]="group.actions"\n          [tabbable]="lastGroup"\n          (dispatch)="dispatchAction($event, last(group.messages))"\n          (click)="select(actions)"\n          (focus)="select(actions)"\n        >\n        </kendo-chat-suggested-actions>\n      </ng-container>\n    </ng-container>\n    <kendo-resize-sensor (resize)="onResize()">\n    </kendo-resize-sensor>\n  ',isInline:!0,components:[{type:k,selector:"kendo-chat-message",inputs:["message","tabbable","template"]},{type:I,selector:"kendo-chat-attachment",inputs:["attachment","template"]},{type:x,selector:"kendo-chat-message-attachments",inputs:["attachments","layout","tabbable","template"]},{type:T,selector:"kendo-chat-suggested-actions",inputs:["actions","tabbable"],outputs:["dispatch"]},{type:u.ResizeSensorComponent,selector:"kendo-resize-sensor",inputs:["rateLimit"],outputs:["resize"]}],directives:[{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:n.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{type:n.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:D,decorators:[{type:o.Component,args:[{selector:"kendo-chat-message-list",template:'\n    <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">\n      <ng-container [ngSwitch]="group.type">\n        <div\n          *ngSwitchCase="\'date-marker\'"\n          class="k-timestamp"\n        >\n          {{ formatTimeStamp(group.timestamp) }}\n        </div>\n        <div\n          *ngSwitchCase="\'message-group\'"\n          class="k-message-group"\n          [class.k-alt]="isOwnMessage(group.messages[0])"\n          [class.k-no-avatar]="!group.author.avatarUrl"\n        >\n          <img\n            *ngIf="group.author.avatarUrl"\n            [attr.src]="group.author.avatarUrl"\n            class="k-avatar"\n          />\n          <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>\n          <ng-container\n              *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"\n          >\n            <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">\n            <kendo-chat-message #message\n              [message]="msg"\n              [tabbable]="lastGroup && lastMessage"\n              [template]="messageTemplate"\n              (click)="select(message)"\n              (focus)="select(message)"\n              [class.k-only]="group.messages.length === 1"\n              [class.k-first]="group.messages.length > 1 && firstMessage"\n              [class.k-last]="group.messages.length > 1 && lastMessage"\n            >\n            </kendo-chat-message>\n\n            <kendo-chat-attachment\n              *ngIf="msg.attachments && msg.attachments.length === 1"\n              [attachment]="msg.attachments[0]"\n              [template]="attachmentTemplate"\n              >\n            </kendo-chat-attachment>\n          </ng-container>\n        </div>\n\n        <kendo-chat-message-attachments #attachments\n          *ngSwitchCase="\'attachment-group\'"\n          [attachments]="group.attachments"\n          [layout]="group.attachmentLayout"\n          [tabbable]="lastGroup"\n          [template]="attachmentTemplate"\n          (click)="select(attachments)"\n          (focus)="select(attachments)"\n        >\n        </kendo-chat-message-attachments>\n\n        <kendo-chat-suggested-actions #actions\n          *ngSwitchCase="\'action-group\'"\n          [actions]="group.actions"\n          [tabbable]="lastGroup"\n          (dispatch)="dispatchAction($event, last(group.messages))"\n          (click)="select(actions)"\n          (focus)="select(actions)"\n        >\n        </kendo-chat-suggested-actions>\n      </ng-container>\n    </ng-container>\n    <kendo-resize-sensor (resize)="onResize()">\n    </kendo-resize-sensor>\n  '}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:p.IntlService}]},propDecorators:{messages:[{type:o.Input}],attachmentTemplate:[{type:o.Input}],messageTemplate:[{type:o.Input}],user:[{type:o.Input}],executeAction:[{type:o.Output}],navigate:[{type:o.Output}],resize:[{type:o.Output}],items:[{type:o.ViewChildren,args:[v]}],cssClass:[{type:o.HostBinding,args:["class.k-message-list-content"]}],onKeydown:[{type:o.HostListener,args:["keydown",["$event"]]}],onBlur:[{type:o.HostListener,args:["focusout",["$event"]]}]}});f(se,ne=t.ComponentMessages);var ne,u=se;function se(){return null!==ne&&ne.apply(this,arguments)||this}u.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,deps:null,target:c.ɵɵFactoryTarget.Directive}),u.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:u,selector:"kendoConversationalUIMessages",inputs:{messagePlaceholder:"messagePlaceholder",send:"send"},usesInheritance:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,decorators:[{type:o.Directive,args:[{selector:"kendoConversationalUIMessages"}]}],propDecorators:{messagePlaceholder:[{type:o.Input}],send:[{type:o.Input}]}});f(oe,ae=u);var ae,F=oe;function oe(e){var t=ae.call(this)||this;return t.service=e,t}F.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:F,deps:[{token:l.LocalizationService}],target:c.ɵɵFactoryTarget.Directive}),F.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:F,selector:"[kendoChatLocalizedMessages]",providers:[{provide:u,useExisting:o.forwardRef(function(){return F})}],usesInheritance:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:F,decorators:[{type:o.Directive,args:[{providers:[{provide:u,useExisting:o.forwardRef(function(){return F})}],selector:"[kendoChatLocalizedMessages]"}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});O.prototype.ngOnInit=function(){var e=this;this.zone.runOutsideAngular(function(){e.unsubscribe=e.renderer.listen(e.element.nativeElement,"scroll",function(){return e.onScroll()})})},O.prototype.ngAfterViewInit=function(){this.scrollToBottom()},O.prototype.ngOnDestroy=function(){this.unsubscribe&&this.unsubscribe()},O.prototype.onScroll=function(){var e,t,n,s=this;this.scrolling||(t=(e=this.element.nativeElement).scrollTop+e.offsetHeight,n=e.scrollHeight-t<2,this.autoScroll!==n&&this.zone.run(function(){s.autoScroll=n,s.autoScrollChange.emit(s.autoScroll)}))},O.prototype.scrollToBottom=function(){var e,t=this;this.autoScroll&&((e=this.element.nativeElement).scrollTop=e.scrollHeight-e.clientHeight,this.scrolling=!0,this.zone.runOutsideAngular(function(){return setTimeout(function(){return t.scrolling=!1},1e3)}))};var A=O;function O(e,t,n){this.element=e,this.zone=t,this.renderer=n,this.autoScroll=!0,this.autoScrollChange=new o.EventEmitter,this.overflowAnchor="none",this.scrolling=!1}A.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:A,deps:[{token:c.ElementRef},{token:c.NgZone},{token:c.Renderer2}],target:c.ɵɵFactoryTarget.Directive}),A.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:A,selector:"[kendoChatScrollAnchor]",inputs:{autoScroll:"autoScroll"},outputs:{autoScrollChange:"autoScrollChange"},host:{properties:{"style.overflow-anchor":"this.overflowAnchor"}},exportAs:["scrollAnchor"],ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:A,decorators:[{type:o.Directive,args:[{selector:"[kendoChatScrollAnchor]",exportAs:"scrollAnchor"}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:c.NgZone},{type:c.Renderer2}]},propDecorators:{autoScroll:[{type:o.Input}],autoScrollChange:[{type:o.Output}],overflowAnchor:[{type:o.HostBinding,args:["style.overflow-anchor"]}]}});re.prototype.onFocus=function(){this.focused=!0},re.prototype.onBlur=function(){this.focused=!1};var E=re;function re(){this.focused=!1}E.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:E,deps:[],target:c.ɵɵFactoryTarget.Directive}),E.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:E,selector:"[kendoChatFocusedState]",host:{listeners:{focusin:"onFocus()",focusout:"onBlur()"},properties:{"class.k-state-focused":"this.focused"}},ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:E,decorators:[{type:o.Directive,args:[{selector:"[kendoChatFocusedState]"}]}],propDecorators:{focused:[{type:o.HostBinding,args:["class.k-state-focused"]}],onFocus:[{type:o.HostListener,args:["focusin"]}],onBlur:[{type:o.HostListener,args:["focusout"]}]}});Object.defineProperty(z.prototype,"className",{get:function(){return"k-widget k-chat"},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"dirAttr",{get:function(){return this.direction},enumerable:!1,configurable:!0}),z.prototype.ngOnChanges=function(){var e=this;this.zone.runOutsideAngular(function(){return setTimeout(function(){e.messageList.nativeElement.style.flex="1 1 auto"})})},z.prototype.ngAfterViewInit=function(){if(o.isDevMode()&&!this.user)throw new Error("User must be set and have a valid id.")},z.prototype.ngOnDestroy=function(){this.localizationChangeSubscription&&this.localizationChangeSubscription.unsubscribe()},z.prototype.sendClick=function(){var e=this.messageInput.nativeElement,t=e.value;t&&(t={author:this.user,text:t,timestamp:new Date},this.sendMessage.emit(new d(t)),e.value=null,e.focus(),this.autoScroll=!0)},z.prototype.inputKeydown=function(e){13===e.keyCode&&this.sendClick()},z.prototype.dispatchAction=function(e){var t;this.executeAction.emit(e),e.isDefaultPrevented()||(t=e.action,(j[t.type]||R)(e.action,this),this.messageInput.nativeElement.focus())},z.prototype.textFor=function(e){return this.localization.get(e)};var V=z;function z(e,t){var n=this;this.localization=e,this.zone=t,this.sendMessage=new o.EventEmitter,this.executeAction=new o.EventEmitter,this.autoScroll=!0,P.validatePackage(X),this.direction=e.rtl?"rtl":"ltr",this.localizationChangeSubscription=e.changes.subscribe(function(e){e=e.rtl;n.direction=e?"rtl":"ltr"})}V.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:V,deps:[{token:l.LocalizationService},{token:c.NgZone}],target:c.ɵɵFactoryTarget.Component}),V.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:V,selector:"kendo-chat",inputs:{messages:"messages",user:"user"},outputs:{sendMessage:"sendMessage",executeAction:"executeAction"},host:{properties:{class:"this.className","attr.dir":"this.dirAttr"}},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chat"}],queries:[{propertyName:"attachmentTemplate",first:!0,predicate:m,descendants:!0},{propertyName:"messageTemplate",first:!0,predicate:h,descendants:!0}],viewQueries:[{propertyName:"messageInput",first:!0,predicate:["messageInput"],descendants:!0,static:!0},{propertyName:"messageList",first:!0,predicate:["messageList"],descendants:!0,static:!0}],usesOnChanges:!0,ngImport:c,template:'\n    <ng-container\n      kendoChatLocalizedMessages\n      i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"\n      messagePlaceholder="Type a message..."\n\n      i18n-send="kendo.chat.send|The text for the Send button"\n      send="Send..."\n    >\n    </ng-container>\n\n    <div\n      #messageList\n      class="k-message-list k-avatars"\n      aria-live="polite" role="log"\n      kendoChatScrollAnchor\n        #anchor="scrollAnchor"\n        [(autoScroll)]="autoScroll"\n    >\n      <kendo-chat-message-list\n        [messages]="messages"\n        [messageTemplate]="messageTemplate"\n        [attachmentTemplate]="attachmentTemplate"\n        [user]="user"\n        (executeAction)="dispatchAction($event)"\n        (resize)="anchor.scrollToBottom()"\n        (navigate)="this.autoScroll = false"\n      >\n      </kendo-chat-message-list>\n    </div>\n\n    <div class="k-message-box">\n      <input\n        #messageInput\n        kendoChatFocusedState\n        type="text"\n        class="k-input"\n        [placeholder]="textFor(\'messagePlaceholder\')"\n        (keydown)="inputKeydown($event)"\n      >\n      <button\n        kendoButton\n        fillMode="flat"\n        class="k-button-send"\n        tabindex="-1"\n        [attr.title]="textFor(\'send\')"\n        (click)="sendClick()"\n      ><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"/></svg></button>\n    </div>\n  ',isInline:!0,components:[{type:D,selector:"kendo-chat-message-list",inputs:["messages","attachmentTemplate","messageTemplate","user"],outputs:["executeAction","navigate","resize"]}],directives:[{type:F,selector:"[kendoChatLocalizedMessages]"},{type:A,selector:"[kendoChatScrollAnchor]",inputs:["autoScroll"],outputs:["autoScrollChange"],exportAs:["scrollAnchor"]},{type:E,selector:"[kendoChatFocusedState]"},{type:g.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","shape","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:V,decorators:[{type:o.Component,args:[{providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chat"}],selector:"kendo-chat",template:'\n    <ng-container\n      kendoChatLocalizedMessages\n      i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"\n      messagePlaceholder="Type a message..."\n\n      i18n-send="kendo.chat.send|The text for the Send button"\n      send="Send..."\n    >\n    </ng-container>\n\n    <div\n      #messageList\n      class="k-message-list k-avatars"\n      aria-live="polite" role="log"\n      kendoChatScrollAnchor\n        #anchor="scrollAnchor"\n        [(autoScroll)]="autoScroll"\n    >\n      <kendo-chat-message-list\n        [messages]="messages"\n        [messageTemplate]="messageTemplate"\n        [attachmentTemplate]="attachmentTemplate"\n        [user]="user"\n        (executeAction)="dispatchAction($event)"\n        (resize)="anchor.scrollToBottom()"\n        (navigate)="this.autoScroll = false"\n      >\n      </kendo-chat-message-list>\n    </div>\n\n    <div class="k-message-box">\n      <input\n        #messageInput\n        kendoChatFocusedState\n        type="text"\n        class="k-input"\n        [placeholder]="textFor(\'messagePlaceholder\')"\n        (keydown)="inputKeydown($event)"\n      >\n      <button\n        kendoButton\n        fillMode="flat"\n        class="k-button-send"\n        tabindex="-1"\n        [attr.title]="textFor(\'send\')"\n        (click)="sendClick()"\n      ><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"/></svg></button>\n    </div>\n  '}]}],ctorParameters:function(){return[{type:l.LocalizationService},{type:c.NgZone}]},propDecorators:{messages:[{type:o.Input}],user:[{type:o.Input}],sendMessage:[{type:o.Output}],executeAction:[{type:o.Output}],className:[{type:o.HostBinding,args:["class"]}],dirAttr:[{type:o.HostBinding,args:["attr.dir"]}],attachmentTemplate:[{type:o.ContentChild,args:[m,{static:!1}]}],messageTemplate:[{type:o.ContentChild,args:[h,{static:!1}]}],messageInput:[{type:o.ViewChild,args:["messageInput",{static:!0}]}],messageList:[{type:o.ViewChild,args:["messageList",{static:!0}]}]}});f(ce,ie=u),Object.defineProperty(ce.prototype,"override",{get:function(){return!0},enumerable:!1,configurable:!0});var ie,B=ce;function ce(e){var t=ie.call(this)||this;return t.service=e,t}B.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:B,deps:[{token:l.LocalizationService}],target:c.ɵɵFactoryTarget.Component}),B.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:B,selector:"kendo-chat-messages",providers:[{provide:u,useExisting:o.forwardRef(function(){return B})}],usesInheritance:!0,ngImport:c,template:"",isInline:!0}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:B,decorators:[{type:o.Component,args:[{providers:[{provide:u,useExisting:o.forwardRef(function(){return B})}],selector:"kendo-chat-messages",template:""}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});le.prototype.onClick=function(e){this.executeAction.next(e)};t=le;function le(){this.cssClass=!0,this.executeAction=new o.EventEmitter}t.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:t,deps:[],target:c.ɵɵFactoryTarget.Component}),t.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:t,selector:"kendo-chat-hero-card",inputs:{imageUrl:"imageUrl",title:"title",subtitle:"subtitle",actions:"actions"},outputs:{executeAction:"executeAction"},host:{properties:{"class.k-card":"this.cssClass"}},ngImport:c,template:'\n    <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />\n    <div class="k-card-body">\n      <h5 class="k-card-title" *ngIf="title">\n        {{ title }}\n      </h5>\n      <h6 class="k-card-subtitle" *ngIf="subtitle">\n        {{ subtitle }}\n      </h6>\n    </div>\n    <div class="k-card-actions k-card-actions-vertical">\n      <span class="k-card-action"\n            *ngFor="let act of actions"\n      >\n        <button\n          kendoButton fillMode="flat"\n          (click)="onClick(act)">\n          {{ act.title }}\n        </button>\n      </span>\n    </div>\n  ',isInline:!0,directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:g.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","shape","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:t,decorators:[{type:o.Component,args:[{selector:"kendo-chat-hero-card",template:'\n    <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />\n    <div class="k-card-body">\n      <h5 class="k-card-title" *ngIf="title">\n        {{ title }}\n      </h5>\n      <h6 class="k-card-subtitle" *ngIf="subtitle">\n        {{ subtitle }}\n      </h6>\n    </div>\n    <div class="k-card-actions k-card-actions-vertical">\n      <span class="k-card-action"\n            *ngFor="let act of actions"\n      >\n        <button\n          kendoButton fillMode="flat"\n          (click)="onClick(act)">\n          {{ act.title }}\n        </button>\n      </span>\n    </div>\n  '}]}],propDecorators:{imageUrl:[{type:o.Input}],title:[{type:o.Input}],subtitle:[{type:o.Input}],actions:[{type:o.Input}],cssClass:[{type:o.HostBinding,args:["class.k-card"]}],executeAction:[{type:o.Output}]}});u=[V,B,m,h,t],n=[I,E,F,x,k,D,h,A,T],g=function(){};g.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,deps:[],target:c.ɵɵFactoryTarget.NgModule}),g.ɵmod=c.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,declarations:[V,B,m,h,t,I,E,F,x,k,D,h,A,T],imports:[r.ButtonModule,s.CommonModule,a.ResizeSensorModule],exports:[V,B,m,h,t]}),g.ɵinj=c.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,imports:[[r.ButtonModule,s.CommonModule,a.ResizeSensorModule]]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,decorators:[{type:o.NgModule,args:[{declarations:H(H([],y(u)),y(n)),exports:[u],imports:[r.ButtonModule,s.CommonModule,a.ResizeSensorModule]}]}]}),e.AttachmentTemplateDirective=m,e.ChatComponent=V,e.ChatModule=g,e.CustomMessagesComponent=B,e.ExecuteActionEvent=$,e.HeroCardComponent=t,e.MessageTemplateDirective=h,e.SendMessageEvent=d,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-angular-l10n"),require("@progress/kendo-licensing"),require("@progress/kendo-angular-intl"),require("@angular/common"),require("rxjs"),require("rxjs/operators"),require("@progress/kendo-angular-common"),require("@progress/kendo-angular-buttons")):"function"==typeof define&&define.amd?define("KendoAngularConversationalUi",["exports","@angular/core","@progress/kendo-angular-l10n","@progress/kendo-licensing","@progress/kendo-angular-intl","@angular/common","rxjs","rxjs/operators","@progress/kendo-angular-common","@progress/kendo-angular-buttons"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularConversationalUi={},e.ng.core,e.KendoAngularL10N,e.KendoLicensing,e.KendoAngularIntl,e.ng.common,e.rxjs,e.rxjs.operators,e.KendoAngularCommon,e.KendoAngularButtons)}(this,function(e,o,t,P,n,s,R,N,a,r){"use strict";function i(n){if(n&&n.__esModule)return n;var s=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),s.default=n,Object.freeze(s)}function L(){}var c=i(o),l=i(t),K=i(n),n=i(s),p=i(a),u=i(r),g=function(e){this.templateRef=e},j=(g.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,deps:[{token:c.TemplateRef,optional:!0}],target:c.ɵɵFactoryTarget.Directive}),g.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:g,selector:"[kendoChatAttachmentTemplate]",ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:g,decorators:[{type:o.Directive,args:[{selector:"[kendoChatAttachmentTemplate]"}]}],ctorParameters:function(){return[{type:c.TemplateRef,decorators:[{type:o.Optional}]}]}}),function(e){this.message=e}),U={reply:function(e,t){t.sendMessage.emit(new j({author:t.user,text:e.value,timestamp:new Date}))},call:function(e){window.open("tel:"+e.value)},openUrl:function(e){window.open(e.value)}},m=function(e){this.templateRef=e},H=(m.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:m,deps:[{token:c.TemplateRef,optional:!0}],target:c.ɵɵFactoryTarget.Directive}),m.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:m,selector:"[kendoChatMessageTemplate]",ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:m,decorators:[{type:o.Directive,args:[{selector:"[kendoChatMessageTemplate]"}]}],ctorParameters:function(){return[{type:c.TemplateRef,decorators:[{type:o.Optional}]}]}}),{name:"@progress/kendo-angular-conversational-ui",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1650440956,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"}),d=function(e){this.templateRef=e},$=(d.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:d,deps:[{token:c.TemplateRef}],target:c.ɵɵFactoryTarget.Directive}),d.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:d,selector:"[kendoChatMessageBoxTemplate]",ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:d,decorators:[{type:o.Directive,args:[{selector:"[kendoChatMessageBoxTemplate]"}]}],ctorParameters:function(){return[{type:c.TemplateRef}]}}),function(e,t){return($=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)});function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}$(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function _(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var s,a,o=n.call(e),r=[];try{for(;(void 0===t||0<t--)&&!(s=o.next()).done;)r.push(s.value)}catch(e){a={error:e}}finally{try{s&&!s.done&&(n=o.return)&&n.call(o)}finally{if(a)throw a.error}}return r}function q(e,t,n){if(n||2===arguments.length)for(var s,a=0,o=t.length;a<o;a++)!s&&a in t||((s=s||Array.prototype.slice.call(t,0,a))[a]=t[a]);return e.concat(s||Array.prototype.slice.call(t))}Object.create;function G(){this.prevented=!1}G.prototype.preventDefault=function(){this.prevented=!0},G.prototype.isDefaultPrevented=function(){return this.prevented};h(Q,W=G);var W,Z=Q;function Q(e,t){var n=W.call(this)||this;return n.action=e,n.message=t,n}function f(){}function X(e,t){return e&&t.author&&e.id===t.author.id}function Y(e){return e[e.length-1]}function J(e){return e.reduce((s=e.length,function(e,t,n){n=n===s-1;return te(e,t),ne(e,t,n),t.attachments&&1<t.attachments.length&&e.push({type:"attachment-group",attachments:t.attachments,attachmentLayout:t.attachmentLayout,timestamp:t.timestamp,trackBy:t}),t.suggestedActions&&n&&e.push({type:"action-group",actions:t.suggestedActions,timestamp:t.timestamp,trackBy:t}),e}),[]);var s}var ee,te=function(e,t){var n,t=t.timestamp,s=Y(e);!t||s&&(n=t,s=s.timestamp,!n||!s||s.getDate()===n.getDate()&&s.getMonth()===n.getMonth()&&s.getFullYear()===n.getFullYear())||(s={type:"date-marker",timestamp:t,trackBy:t.getTime()},e.push(s))},ne=function(e,t,n){var s,a=Y(e);if(o.isDevMode()&&!t.author)throw new Error("Author must be set for message: "+JSON.stringify(t));t.typing&&!n||((s=a&&"message-group"===a.type?a.messages:s)&&X(t.author,Y(s))?s.push(t):e.push({type:"message-group",messages:[t],author:t.author,timestamp:t.timestamp,trackBy:t}))},y=(h(k,ee=f),Object.defineProperty(k.prototype,"tabIndex",{get:function(){return this.tabbable?"0":"-1"},enumerable:!1,configurable:!0}),k.prototype.formatTimeStamp=function(e){return this.intl.formatDate(e,{datetime:"short"})},k.prototype.focus=function(){this.element.nativeElement.focus()},k);function k(e,t){var n=ee.call(this)||this;return n.element=e,n.intl=t,n.cssClass=!0,n}y.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:y,deps:[{token:c.ElementRef},{token:K.IntlService}],target:c.ɵɵFactoryTarget.Component}),y.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:y,selector:"kendo-chat-message",inputs:{message:"message",tabbable:"tabbable",template:"template"},host:{properties:{"class.k-message":"this.cssClass","class.k-state-selected":"this.selected","class.k-state-focused":"this.selected","attr.tabIndex":"this.tabIndex"}},providers:[{provide:f,useExisting:o.forwardRef(function(){return y})}],usesInheritance:!0,ngImport:c,template:'\n        <time\n        [attr.aria-hidden]="!selected"\n        class="k-message-time"\n        *ngIf="message.timestamp"\n        >\n        {{ formatTimeStamp(message.timestamp) }}\n        </time>\n\n        <ng-container *ngIf="!message.typing; else typing">\n        <div class="k-bubble" *ngIf="template">\n            <ng-container\n            *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"\n            >\n            </ng-container>\n        </div>\n\n        <div class="k-bubble" *ngIf="!template && message.text">\n            {{message.text}}\n        </div>\n        </ng-container>\n\n        <span\n        class="k-message-status"\n        *ngIf="message.status"\n        >\n        {{ message.status }}\n        </span>\n\n        <ng-template #typing>\n        <div class="k-bubble">\n            <div class="k-typing-indicator">\n            <span></span>\n            <span></span>\n            <span></span>\n            </div>\n        </div>\n        </ng-template>\n    ',isInline:!0,directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:y,decorators:[{type:o.Component,args:[{selector:"kendo-chat-message",providers:[{provide:f,useExisting:o.forwardRef(function(){return y})}],template:'\n        <time\n        [attr.aria-hidden]="!selected"\n        class="k-message-time"\n        *ngIf="message.timestamp"\n        >\n        {{ formatTimeStamp(message.timestamp) }}\n        </time>\n\n        <ng-container *ngIf="!message.typing; else typing">\n        <div class="k-bubble" *ngIf="template">\n            <ng-container\n            *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"\n            >\n            </ng-container>\n        </div>\n\n        <div class="k-bubble" *ngIf="!template && message.text">\n            {{message.text}}\n        </div>\n        </ng-container>\n\n        <span\n        class="k-message-status"\n        *ngIf="message.status"\n        >\n        {{ message.status }}\n        </span>\n\n        <ng-template #typing>\n        <div class="k-bubble">\n            <div class="k-typing-indicator">\n            <span></span>\n            <span></span>\n            <span></span>\n            </div>\n        </div>\n        </ng-template>\n    '}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:K.IntlService}]},propDecorators:{message:[{type:o.Input}],tabbable:[{type:o.Input}],template:[{type:o.Input}],cssClass:[{type:o.HostBinding,args:["class.k-message"]}],selected:[{type:o.HostBinding,args:["class.k-state-selected"]},{type:o.HostBinding,args:["class.k-state-focused"]}],tabIndex:[{type:o.HostBinding,args:["attr.tabIndex"]}]}});Object.defineProperty(b.prototype,"attachment",{get:function(){return this._attachment},set:function(e){this._attachment=e,this.context={$implicit:this.attachment}},enumerable:!1,configurable:!0}),Object.defineProperty(b.prototype,"image",{get:function(){return 0===this.contentType.indexOf("image/")},enumerable:!1,configurable:!0}),Object.defineProperty(b.prototype,"unknown",{get:function(){return!this.image},enumerable:!1,configurable:!0}),Object.defineProperty(b.prototype,"contentType",{get:function(){return this.attachment.contentType||""},enumerable:!1,configurable:!0});var v=b;function b(){}v.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:v,deps:[],target:c.ɵɵFactoryTarget.Component}),v.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:v,selector:"kendo-chat-attachment",inputs:{attachment:"attachment",template:"template"},ngImport:c,template:'\n        <ng-container *ngIf="template">\n            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">\n            </ng-container>\n        </ng-container>\n\n        <div *ngIf="!template" class="k-card">\n            <div class="k-card-body">\n            <h5 class="k-card-title" *ngIf="attachment.title">\n                {{ attachment.title }}\n            </h5>\n            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">\n                {{ attachment.subtitle }}\n            </h6>\n            <img *ngIf="image" [attr.src]="attachment.content" />\n            <ng-container *ngIf="unknown">\n                {{ attachment.content }}\n            </ng-container>\n            </div>\n        </div>\n    ',isInline:!0,directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:v,decorators:[{type:o.Component,args:[{selector:"kendo-chat-attachment",template:'\n        <ng-container *ngIf="template">\n            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">\n            </ng-container>\n        </ng-container>\n\n        <div *ngIf="!template" class="k-card">\n            <div class="k-card-body">\n            <h5 class="k-card-title" *ngIf="attachment.title">\n                {{ attachment.title }}\n            </h5>\n            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">\n                {{ attachment.subtitle }}\n            </h6>\n            <img *ngIf="image" [attr.src]="attachment.content" />\n            <ng-container *ngIf="unknown">\n                {{ attachment.content }}\n            </ng-container>\n            </div>\n        </div>\n    '}]}],propDecorators:{attachment:[{type:o.Input}],template:[{type:o.Input}]}});h(I,se=f),Object.defineProperty(I.prototype,"carousel",{get:function(){return"list"!==this.layout},enumerable:!1,configurable:!0}),I.prototype.ngAfterViewInit=function(){var e=this;this.zone.runOutsideAngular(function(){e.scrollSubscription=R.fromEvent(e.deck.nativeElement,"scroll").pipe(N.debounceTime(100)).subscribe(function(){return e.onScroll()})})},I.prototype.ngOnDestroy=function(){this.scrollSubscription.unsubscribe()},I.prototype.isSelected=function(e){return this.selectedIndex===e},I.prototype.itemKeydown=function(e,t){var n=("list"===this.layout?this.listKeyHandlers:this.carouselKeyHandlers)[e.keyCode];n&&n(e,t)},I.prototype.itemClick=function(e){this.select(e)},I.prototype.focus=function(){this.select(this.selectedIndex)},I.prototype.scrollTo=function(e){var t=this.deck.nativeElement,n=t.scrollWidth/this.items.length,s=t.scrollWidth-t.offsetWidth,n=t.scrollLeft+n*e;t.scrollLeft=Math.max(0,Math.min(s,n))},I.prototype.select=function(e){this.selectedIndex=e;e=this.items.toArray()[e];e&&e.nativeElement.focus()},I.prototype.navigateTo=function(e,t){var n=this.selectedIndex,t=Math.max(0,Math.min(n+t,this.items.length-1));t!==n&&(this.select(t),e.preventDefault())},I.prototype.onScroll=function(){var e,t=this,n=this.deck.nativeElement;0!==n.scrollWidth&&(e=n.scrollLeft/(n.scrollWidth-n.offsetWidth))!==this.scrollPosition&&this.zone.run(function(){t.scrollPosition=e})};var se,x=I;function I(e){var t=se.call(this)||this;return t.zone=e,t.scrollPosition=0,t.selectedIndex=0,t.carouselKeyHandlers=((e={})[37]=function(e){return t.navigateTo(e,-1)},e[39]=function(e){return t.navigateTo(e,1)},e),t.listKeyHandlers=((e={})[38]=function(e){return t.navigateTo(e,-1)},e[40]=function(e){return t.navigateTo(e,1)},e),t}x.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:x,deps:[{token:c.NgZone}],target:c.ɵɵFactoryTarget.Component}),x.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:x,selector:"kendo-chat-message-attachments",inputs:{attachments:"attachments",layout:"layout",tabbable:"tabbable",template:"template"},host:{properties:{"class.k-card-deck-scrollwrap":"this.carousel"}},providers:[{provide:f,useExisting:o.forwardRef(function(){return x})}],viewQueries:[{propertyName:"deck",first:!0,predicate:["deck"],descendants:!0,read:o.ElementRef,static:!0},{propertyName:"items",predicate:["item"],descendants:!0,read:o.ElementRef}],usesInheritance:!0,ngImport:c,template:'\n        <button\n        *ngIf="carousel && scrollPosition > 0"\n        (click)="scrollTo(-1)"\n        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n        tabindex="-1">\n            <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>\n        </button>\n        <div #deck [class.k-card-deck]="carousel">\n        <kendo-chat-attachment #item\n            *ngFor="let att of attachments; index as index; first as first; last as last"\n            [attachment]="att"\n            [template]="template"\n            [class.k-state-selected]="isSelected(index)"\n            [class.k-state-focused]="isSelected(index)"\n            [class.k-card-wrap]="true"\n            [class.k-first]="first"\n            [class.k-last]="last"\n            [attr.tabindex]="tabbable && isSelected(index) ? \'0\' : \'-1\'"\n            (click)="itemClick(index)"\n            (keydown)="itemKeydown($event, att)"\n        >\n        </kendo-chat-attachment>\n        </div>\n        <button\n        *ngIf="carousel && scrollPosition < 1"\n        (click)="scrollTo(1)"\n        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n        tabindex="-1">\n            <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>\n        </button>\n    ',isInline:!0,components:[{type:v,selector:"kendo-chat-attachment",inputs:["attachment","template"]}],directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:x,decorators:[{type:o.Component,args:[{providers:[{provide:f,useExisting:o.forwardRef(function(){return x})}],selector:"kendo-chat-message-attachments",template:'\n        <button\n        *ngIf="carousel && scrollPosition > 0"\n        (click)="scrollTo(-1)"\n        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n        tabindex="-1">\n            <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>\n        </button>\n        <div #deck [class.k-card-deck]="carousel">\n        <kendo-chat-attachment #item\n            *ngFor="let att of attachments; index as index; first as first; last as last"\n            [attachment]="att"\n            [template]="template"\n            [class.k-state-selected]="isSelected(index)"\n            [class.k-state-focused]="isSelected(index)"\n            [class.k-card-wrap]="true"\n            [class.k-first]="first"\n            [class.k-last]="last"\n            [attr.tabindex]="tabbable && isSelected(index) ? \'0\' : \'-1\'"\n            (click)="itemClick(index)"\n            (keydown)="itemKeydown($event, att)"\n        >\n        </kendo-chat-attachment>\n        </div>\n        <button\n        *ngIf="carousel && scrollPosition < 1"\n        (click)="scrollTo(1)"\n        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"\n        tabindex="-1">\n            <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>\n        </button>\n    '}]}],ctorParameters:function(){return[{type:c.NgZone}]},propDecorators:{attachments:[{type:o.Input}],layout:[{type:o.Input}],tabbable:[{type:o.Input}],template:[{type:o.Input}],carousel:[{type:o.HostBinding,args:["class.k-card-deck-scrollwrap"]}],deck:[{type:o.ViewChild,args:["deck",{read:o.ElementRef,static:!0}]}],items:[{type:o.ViewChildren,args:["item",{read:o.ElementRef}]}]}});h(T,ae=f),T.prototype.isSelected=function(e){return this.selected&&this.selectedIndex===e},T.prototype.actionClick=function(e){this.dispatch.next(e)},T.prototype.actionKeydown=function(e,t){var n=this.keyHandlers[e.keyCode];n&&n(e,t)},T.prototype.focus=function(){this.select(this.selectedIndex)},T.prototype.select=function(e){this.selectedIndex=e;e=this.items.toArray()[e];e&&e.nativeElement.focus()},T.prototype.navigateTo=function(e,t){var n=this.selectedIndex,t=Math.max(0,Math.min(n+t,this.items.length-1));t!==n&&(this.select(t),e.preventDefault())};var ae,C=T;function T(){var e,n=ae.apply(this,q([],_(arguments)))||this;return n.dispatch=new o.EventEmitter,n.defaultClass=!0,n.selectedIndex=0,n.keyHandlers=((e={})[37]=function(e){return n.navigateTo(e,-1)},e[39]=function(e){return n.navigateTo(e,1)},e[13]=function(e,t){return n.actionClick(t)},e),n}C.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:C,deps:null,target:c.ɵɵFactoryTarget.Component}),C.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"kendo-chat-suggested-actions",inputs:{actions:"actions",tabbable:"tabbable"},outputs:{dispatch:"dispatch"},host:{properties:{"class.k-quick-replies":"this.defaultClass"}},providers:[{provide:f,useExisting:o.forwardRef(function(){return C})}],viewQueries:[{propertyName:"items",predicate:["item"],descendants:!0}],usesInheritance:!0,ngImport:c,template:'\n        <span\n            #item\n            *ngFor="let action of actions; index as index; first as first; last as last"\n            class="k-quick-reply"\n            [class.k-state-selected]="isSelected(index)"\n            [class.k-state-focused]="isSelected(index)"\n            [class.k-first]="first"\n            [class.k-last]="last"\n            [attr.tabindex]="tabbable && selectedIndex === index ? \'0\' : \'-1\'"\n            (click)="actionClick(action)"\n            (keydown)="actionKeydown($event, action)"\n        >\n        {{ action.title || action.value }}\n        </span>\n    ',isInline:!0,directives:[{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:C,decorators:[{type:o.Component,args:[{selector:"kendo-chat-suggested-actions",providers:[{provide:f,useExisting:o.forwardRef(function(){return C})}],template:'\n        <span\n            #item\n            *ngFor="let action of actions; index as index; first as first; last as last"\n            class="k-quick-reply"\n            [class.k-state-selected]="isSelected(index)"\n            [class.k-state-focused]="isSelected(index)"\n            [class.k-first]="first"\n            [class.k-last]="last"\n            [attr.tabindex]="tabbable && selectedIndex === index ? \'0\' : \'-1\'"\n            (click)="actionClick(action)"\n            (keydown)="actionKeydown($event, action)"\n        >\n        {{ action.title || action.value }}\n        </span>\n    '}]}],propDecorators:{actions:[{type:o.Input}],tabbable:[{type:o.Input}],dispatch:[{type:o.Output}],defaultClass:[{type:o.HostBinding,args:["class.k-quick-replies"]}],items:[{type:o.ViewChildren,args:["item"]}]}});Object.defineProperty(D.prototype,"messages",{get:function(){return this._messages},set:function(e){e=e||[];this.view=J(e),this._messages=e},enumerable:!1,configurable:!0}),D.prototype.ngAfterViewInit=function(){this.selectedItem=this.items.last},D.prototype.onResize=function(){this.resize.emit()},D.prototype.formatTimeStamp=function(e){return this.intl.formatDate(e,{date:"full"})},D.prototype.onKeydown=function(e){var t=this.keyActions[e.keyCode];t&&t(e)},D.prototype.onBlur=function(e){var t=this;!function(e,t){for(;e&&!t(e);)e=e.parentNode;return e}(e.relatedTarget||document.activeElement,function(e){return e===t.element.nativeElement})&&this.select(null)},D.prototype.isOwnMessage=function(e){return X(this.user,e)},D.prototype.dispatchAction=function(e,t){e=new Z(e,t);this.executeAction.emit(e)},D.prototype.trackGroup=function(e,t){return t.trackBy},D.prototype.select=function(e){var t=this.selectedItem;t&&(t.selected=!1),e&&(e.selected=!0,this.selectedItem=e)},D.prototype.last=function(e){if(e&&0!==e.length)return e[e.length-1]},D.prototype.navigateTo=function(e,t){var n=this.items.toArray(),s=this.selectedItem,a=n.indexOf(s),n=n[Math.max(0,Math.min(a+t,this.items.length-1))];n!==s&&(this.select(n),n.focus(),this.navigate.emit(),e.preventDefault())};var w=D;function D(e,t){var n=this;this.element=e,this.intl=t,this.executeAction=new o.EventEmitter,this.navigate=new o.EventEmitter,this.resize=new o.EventEmitter,this.cssClass=!0,this.view=[],this.keyActions=((e={})[38]=function(e){return n.navigateTo(e,-1)},e[40]=function(e){return n.navigateTo(e,1)},e)}w.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:w,deps:[{token:c.ElementRef},{token:K.IntlService}],target:c.ɵɵFactoryTarget.Component}),w.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:w,selector:"kendo-chat-message-list",inputs:{messages:"messages",attachmentTemplate:"attachmentTemplate",messageTemplate:"messageTemplate",user:"user"},outputs:{executeAction:"executeAction",navigate:"navigate",resize:"resize"},host:{listeners:{keydown:"onKeydown($event)",focusout:"onBlur($event)"},properties:{"class.k-message-list-content":"this.cssClass"}},viewQueries:[{propertyName:"items",predicate:f,descendants:!0}],ngImport:c,template:'\n        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">\n        <ng-container [ngSwitch]="group.type">\n            <div\n            *ngSwitchCase="\'date-marker\'"\n            class="k-timestamp"\n            >\n            {{ formatTimeStamp(group.timestamp) }}\n            </div>\n            <div\n            *ngSwitchCase="\'message-group\'"\n            class="k-message-group"\n            [class.k-alt]="isOwnMessage(group.messages[0])"\n            [class.k-no-avatar]="!group.author.avatarUrl"\n            >\n            <img\n                *ngIf="group.author.avatarUrl"\n                [attr.src]="group.author.avatarUrl"\n                class="k-avatar"\n            />\n            <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>\n            <ng-container\n                *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"\n            >\n                <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">\n                <kendo-chat-message #message\n                [message]="msg"\n                [tabbable]="lastGroup && lastMessage"\n                [template]="messageTemplate"\n                (click)="select(message)"\n                (focus)="select(message)"\n                [class.k-only]="group.messages.length === 1"\n                [class.k-first]="group.messages.length > 1 && firstMessage"\n                [class.k-last]="group.messages.length > 1 && lastMessage"\n                >\n                </kendo-chat-message>\n\n                <kendo-chat-attachment\n                *ngIf="msg.attachments && msg.attachments.length === 1"\n                [attachment]="msg.attachments[0]"\n                [template]="attachmentTemplate"\n                >\n                </kendo-chat-attachment>\n            </ng-container>\n            </div>\n\n            <kendo-chat-message-attachments #attachments\n            *ngSwitchCase="\'attachment-group\'"\n            [attachments]="group.attachments"\n            [layout]="group.attachmentLayout"\n            [tabbable]="lastGroup"\n            [template]="attachmentTemplate"\n            (click)="select(attachments)"\n            (focus)="select(attachments)"\n            >\n            </kendo-chat-message-attachments>\n\n            <kendo-chat-suggested-actions #actions\n            *ngSwitchCase="\'action-group\'"\n            [actions]="group.actions"\n            [tabbable]="lastGroup"\n            (dispatch)="dispatchAction($event, last(group.messages))"\n            (click)="select(actions)"\n            (focus)="select(actions)"\n            >\n            </kendo-chat-suggested-actions>\n        </ng-container>\n        </ng-container>\n        <kendo-resize-sensor (resize)="onResize()">\n        </kendo-resize-sensor>\n    ',isInline:!0,components:[{type:y,selector:"kendo-chat-message",inputs:["message","tabbable","template"]},{type:v,selector:"kendo-chat-attachment",inputs:["attachment","template"]},{type:x,selector:"kendo-chat-message-attachments",inputs:["attachments","layout","tabbable","template"]},{type:C,selector:"kendo-chat-suggested-actions",inputs:["actions","tabbable"],outputs:["dispatch"]},{type:p.ResizeSensorComponent,selector:"kendo-resize-sensor",inputs:["rateLimit"],outputs:["resize"]}],directives:[{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:n.NgSwitch,selector:"[ngSwitch]",inputs:["ngSwitch"]},{type:n.NgSwitchCase,selector:"[ngSwitchCase]",inputs:["ngSwitchCase"]},{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:w,decorators:[{type:o.Component,args:[{selector:"kendo-chat-message-list",template:'\n        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">\n        <ng-container [ngSwitch]="group.type">\n            <div\n            *ngSwitchCase="\'date-marker\'"\n            class="k-timestamp"\n            >\n            {{ formatTimeStamp(group.timestamp) }}\n            </div>\n            <div\n            *ngSwitchCase="\'message-group\'"\n            class="k-message-group"\n            [class.k-alt]="isOwnMessage(group.messages[0])"\n            [class.k-no-avatar]="!group.author.avatarUrl"\n            >\n            <img\n                *ngIf="group.author.avatarUrl"\n                [attr.src]="group.author.avatarUrl"\n                class="k-avatar"\n            />\n            <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>\n            <ng-container\n                *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"\n            >\n                <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">\n                <kendo-chat-message #message\n                [message]="msg"\n                [tabbable]="lastGroup && lastMessage"\n                [template]="messageTemplate"\n                (click)="select(message)"\n                (focus)="select(message)"\n                [class.k-only]="group.messages.length === 1"\n                [class.k-first]="group.messages.length > 1 && firstMessage"\n                [class.k-last]="group.messages.length > 1 && lastMessage"\n                >\n                </kendo-chat-message>\n\n                <kendo-chat-attachment\n                *ngIf="msg.attachments && msg.attachments.length === 1"\n                [attachment]="msg.attachments[0]"\n                [template]="attachmentTemplate"\n                >\n                </kendo-chat-attachment>\n            </ng-container>\n            </div>\n\n            <kendo-chat-message-attachments #attachments\n            *ngSwitchCase="\'attachment-group\'"\n            [attachments]="group.attachments"\n            [layout]="group.attachmentLayout"\n            [tabbable]="lastGroup"\n            [template]="attachmentTemplate"\n            (click)="select(attachments)"\n            (focus)="select(attachments)"\n            >\n            </kendo-chat-message-attachments>\n\n            <kendo-chat-suggested-actions #actions\n            *ngSwitchCase="\'action-group\'"\n            [actions]="group.actions"\n            [tabbable]="lastGroup"\n            (dispatch)="dispatchAction($event, last(group.messages))"\n            (click)="select(actions)"\n            (focus)="select(actions)"\n            >\n            </kendo-chat-suggested-actions>\n        </ng-container>\n        </ng-container>\n        <kendo-resize-sensor (resize)="onResize()">\n        </kendo-resize-sensor>\n    '}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:K.IntlService}]},propDecorators:{messages:[{type:o.Input}],attachmentTemplate:[{type:o.Input}],messageTemplate:[{type:o.Input}],user:[{type:o.Input}],executeAction:[{type:o.Output}],navigate:[{type:o.Output}],resize:[{type:o.Output}],items:[{type:o.ViewChildren,args:[f]}],cssClass:[{type:o.HostBinding,args:["class.k-message-list-content"]}],onKeydown:[{type:o.HostListener,args:["keydown",["$event"]]}],onBlur:[{type:o.HostListener,args:["focusout",["$event"]]}]}});oe.prototype.onFocus=function(){this.focused=!0},oe.prototype.onBlur=function(){this.focused=!1};p=oe;function oe(){this.focused=!1}p.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,deps:[],target:c.ɵɵFactoryTarget.Directive}),p.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:p,selector:"[kendoChatFocusedState]",host:{listeners:{focusin:"onFocus()",focusout:"onBlur()"},properties:{"class.k-focus":"this.focused"}},ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,decorators:[{type:o.Directive,args:[{selector:"[kendoChatFocusedState]"}]}],propDecorators:{focused:[{type:o.HostBinding,args:["class.k-focus"]}],onFocus:[{type:o.HostListener,args:["focusin"]}],onBlur:[{type:o.HostListener,args:["focusout"]}]}});Object.defineProperty(B.prototype,"messageBoxValue",{get:function(){return"textarea"===this.type},enumerable:!1,configurable:!0}),B.prototype.sendClick=function(){var e=this.messageBoxInput.nativeElement,t=e.value;t&&(t={author:this.user,text:t,timestamp:new Date},this.sendMessage.emit(new j(t)),e.value=null,e.focus(),this.autoScroll=!0)},B.prototype.inputKeydown=function(e){e.keyCode===a.Keys.Enter&&this.sendClick()},B.prototype.textAreaKeydown=function(e){var t;e.keyCode===a.Keys.Enter&&(t=e.metaKey||e.ctrlKey,e.shiftKey||e.metaKey||e.ctrlKey||(e.preventDefault(),this.sendClick()),t&&(this.messageBoxInput.nativeElement.value+="\r\n"))},B.prototype.textFor=function(e){return this.localization.get(e)};var S=B;function B(){this.hostClasses="k-message-box k-input k-input-md k-rounded-md k-input-solid",this.sendMessage=new o.EventEmitter}S.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:S,deps:[],target:c.ɵɵFactoryTarget.Component}),S.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:S,selector:"kendo-message-box",inputs:{user:"user",autoScroll:"autoScroll",type:"type",localization:"localization",messageBoxTemplate:"messageBoxTemplate"},outputs:{sendMessage:"sendMessage"},host:{properties:{class:"this.hostClasses","class.!k-align-items-end":"this.messageBoxValue"}},viewQueries:[{propertyName:"messageBoxInput",first:!0,predicate:["messageBoxInput"],descendants:!0}],ngImport:c,template:'\n    <ng-container *ngIf="!messageBoxTemplate">\n        <input\n            *ngIf="type === \'textbox\'"\n            #messageBoxInput\n            kendoChatFocusedState\n            type="text"\n            class="k-textbox k-input k-input-md k-input-solid"\n            [placeholder]="textFor(\'messagePlaceholder\')"\n            (keydown)="inputKeydown($event)"\n        />\n\n        <textarea\n        *ngIf="type === \'textarea\'"\n        #messageBoxInput\n        kendoChatFocusedState\n        [rows]="3"\n        class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"\n        [placeholder]="textFor(\'messagePlaceholder\')"\n        (keydown)="textAreaKeydown($event)"\n        ></textarea>\n\n        <button\n            kendoButton\n            fillMode="flat"\n            class="k-button-send"\n            [tabindex]="0"\n            [attr.title]="textFor(\'send\')"\n            (click)="sendClick()"\n        >\n            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"/></svg>\n        </button>\n    </ng-container>\n\n    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>\n',isInline:!0,directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:p,selector:"[kendoChatFocusedState]"},{type:u.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:n.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:S,decorators:[{type:o.Component,args:[{selector:"kendo-message-box",template:'\n    <ng-container *ngIf="!messageBoxTemplate">\n        <input\n            *ngIf="type === \'textbox\'"\n            #messageBoxInput\n            kendoChatFocusedState\n            type="text"\n            class="k-textbox k-input k-input-md k-input-solid"\n            [placeholder]="textFor(\'messagePlaceholder\')"\n            (keydown)="inputKeydown($event)"\n        />\n\n        <textarea\n        *ngIf="type === \'textarea\'"\n        #messageBoxInput\n        kendoChatFocusedState\n        [rows]="3"\n        class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"\n        [placeholder]="textFor(\'messagePlaceholder\')"\n        (keydown)="textAreaKeydown($event)"\n        ></textarea>\n\n        <button\n            kendoButton\n            fillMode="flat"\n            class="k-button-send"\n            [tabindex]="0"\n            [attr.title]="textFor(\'send\')"\n            (click)="sendClick()"\n        >\n            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"/></svg>\n        </button>\n    </ng-container>\n\n    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>\n'}]}],propDecorators:{hostClasses:[{type:o.HostBinding,args:["class"]}],messageBoxValue:[{type:o.HostBinding,args:["class.!k-align-items-end"]}],messageBoxInput:[{type:o.ViewChild,args:["messageBoxInput",{static:!1}]}],user:[{type:o.Input}],autoScroll:[{type:o.Input}],type:[{type:o.Input}],localization:[{type:o.Input}],messageBoxTemplate:[{type:o.Input}],sendMessage:[{type:o.Output}]}});h(ie,re=t.ComponentMessages);var re,M=ie;function ie(){return null!==re&&re.apply(this,arguments)||this}M.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:M,deps:null,target:c.ɵɵFactoryTarget.Directive}),M.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:M,selector:"kendoConversationalUIMessages",inputs:{messagePlaceholder:"messagePlaceholder",send:"send"},usesInheritance:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:M,decorators:[{type:o.Directive,args:[{selector:"kendoConversationalUIMessages"}]}],propDecorators:{messagePlaceholder:[{type:o.Input}],send:[{type:o.Input}]}});h(le,ce=M);var ce,F=le;function le(e){var t=ce.call(this)||this;return t.service=e,t}F.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:F,deps:[{token:l.LocalizationService}],target:c.ɵɵFactoryTarget.Directive}),F.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:F,selector:"[kendoChatLocalizedMessages]",providers:[{provide:M,useExisting:o.forwardRef(function(){return F})}],usesInheritance:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:F,decorators:[{type:o.Directive,args:[{providers:[{provide:M,useExisting:o.forwardRef(function(){return F})}],selector:"[kendoChatLocalizedMessages]"}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});A.prototype.ngOnInit=function(){var e=this;this.zone.runOutsideAngular(function(){e.unsubscribe=e.renderer.listen(e.element.nativeElement,"scroll",function(){return e.onScroll()})})},A.prototype.ngAfterViewInit=function(){this.scrollToBottom()},A.prototype.ngOnDestroy=function(){this.unsubscribe&&this.unsubscribe()},A.prototype.onScroll=function(){var e,t,n,s=this;this.scrolling||(t=(e=this.element.nativeElement).scrollTop+e.offsetHeight,n=e.scrollHeight-t<2,this.autoScroll!==n&&this.zone.run(function(){s.autoScroll=n,s.autoScrollChange.emit(s.autoScroll)}))},A.prototype.scrollToBottom=function(){var e,t=this;this.autoScroll&&((e=this.element.nativeElement).scrollTop=e.scrollHeight-e.clientHeight,this.scrolling=!0,this.zone.runOutsideAngular(function(){return setTimeout(function(){return t.scrolling=!1},1e3)}))};var O=A;function A(e,t,n){this.element=e,this.zone=t,this.renderer=n,this.autoScroll=!0,this.autoScrollChange=new o.EventEmitter,this.overflowAnchor="none",this.scrolling=!1}O.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:O,deps:[{token:c.ElementRef},{token:c.NgZone},{token:c.Renderer2}],target:c.ɵɵFactoryTarget.Directive}),O.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:O,selector:"[kendoChatScrollAnchor]",inputs:{autoScroll:"autoScroll"},outputs:{autoScrollChange:"autoScrollChange"},host:{properties:{"style.overflow-anchor":"this.overflowAnchor"}},exportAs:["scrollAnchor"],ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:O,decorators:[{type:o.Directive,args:[{selector:"[kendoChatScrollAnchor]",exportAs:"scrollAnchor"}]}],ctorParameters:function(){return[{type:c.ElementRef},{type:c.NgZone},{type:c.Renderer2}]},propDecorators:{autoScroll:[{type:o.Input}],autoScrollChange:[{type:o.Output}],overflowAnchor:[{type:o.HostBinding,args:["style.overflow-anchor"]}]}});Object.defineProperty(z.prototype,"className",{get:function(){return"k-chat"},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"dirAttr",{get:function(){return this.direction},enumerable:!1,configurable:!0}),Object.defineProperty(z.prototype,"localizationText",{get:function(){return this.localization},enumerable:!1,configurable:!0}),z.prototype.ngOnChanges=function(){var e=this;this.zone.runOutsideAngular(function(){return setTimeout(function(){e.messageList.nativeElement.style.flex="1 1 auto"})})},z.prototype.ngAfterViewInit=function(){if(o.isDevMode()&&!this.user)throw new Error("User must be set and have a valid id.")},z.prototype.ngOnDestroy=function(){this.localizationChangeSubscription&&this.localizationChangeSubscription.unsubscribe()},z.prototype.dispatchAction=function(e){var t;this.executeAction.emit(e),e.isDefaultPrevented()||(t=e.action,(U[t.type]||L)(e.action,this),this.messageBoxTemplate||this.messageBox.messageBoxInput.nativeElement.focus())},z.prototype.textFor=function(e){return this.localization.get(e)};var E=z;function z(e,t){var n=this;this.localization=e,this.zone=t,this.messageBoxType="textbox",this.sendMessage=new o.EventEmitter,this.executeAction=new o.EventEmitter,this.autoScroll=!0,P.validatePackage(H),this.direction=e.rtl?"rtl":"ltr",this.localizationChangeSubscription=e.changes.subscribe(function(e){e=e.rtl;n.direction=e?"rtl":"ltr"})}E.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:E,deps:[{token:l.LocalizationService},{token:c.NgZone}],target:c.ɵɵFactoryTarget.Component}),E.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:E,selector:"kendo-chat",inputs:{messages:"messages",user:"user",messageBoxType:"messageBoxType"},outputs:{sendMessage:"sendMessage",executeAction:"executeAction"},host:{properties:{class:"this.className","attr.dir":"this.dirAttr"}},providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chat"}],queries:[{propertyName:"attachmentTemplate",first:!0,predicate:g,descendants:!0},{propertyName:"messageTemplate",first:!0,predicate:m,descendants:!0},{propertyName:"messageBoxTemplate",first:!0,predicate:d,descendants:!0}],viewQueries:[{propertyName:"messageBox",first:!0,predicate:["messageBox"],descendants:!0},{propertyName:"messageList",first:!0,predicate:["messageList"],descendants:!0,static:!0}],usesOnChanges:!0,ngImport:c,template:'\n        <ng-container\n        kendoChatLocalizedMessages\n        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"\n        messagePlaceholder="Type a message..."\n\n        i18n-send="kendo.chat.send|The text for the Send button"\n        send="Send..."\n        >\n        </ng-container>\n\n        <div\n        #messageList\n        class="k-message-list k-avatars"\n        aria-live="polite" role="log"\n        kendoChatScrollAnchor\n            #anchor="scrollAnchor"\n            [(autoScroll)]="autoScroll"\n        >\n        <kendo-chat-message-list\n            [messages]="messages"\n            [messageTemplate]="messageTemplate"\n            [attachmentTemplate]="attachmentTemplate"\n            [user]="user"\n            (executeAction)="dispatchAction($event)"\n            (resize)="anchor.scrollToBottom()"\n            (navigate)="this.autoScroll = false"\n        >\n        </kendo-chat-message-list>\n        </div>\n        <kendo-message-box\n        #messageBox\n        [messageBoxTemplate]="messageBoxTemplate"\n        [type]="messageBoxType"\n        [user]="user"\n        [autoScroll]="autoScroll"\n        [localization]="localizationText"\n        (sendMessage)="sendMessage.emit($event)"\n        >\n        </kendo-message-box>\n    ',isInline:!0,components:[{type:w,selector:"kendo-chat-message-list",inputs:["messages","attachmentTemplate","messageTemplate","user"],outputs:["executeAction","navigate","resize"]},{type:S,selector:"kendo-message-box",inputs:["user","autoScroll","type","localization","messageBoxTemplate"],outputs:["sendMessage"]}],directives:[{type:F,selector:"[kendoChatLocalizedMessages]"},{type:O,selector:"[kendoChatScrollAnchor]",inputs:["autoScroll"],outputs:["autoScrollChange"],exportAs:["scrollAnchor"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:E,decorators:[{type:o.Component,args:[{providers:[t.LocalizationService,{provide:t.L10N_PREFIX,useValue:"kendo.chat"}],selector:"kendo-chat",template:'\n        <ng-container\n        kendoChatLocalizedMessages\n        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"\n        messagePlaceholder="Type a message..."\n\n        i18n-send="kendo.chat.send|The text for the Send button"\n        send="Send..."\n        >\n        </ng-container>\n\n        <div\n        #messageList\n        class="k-message-list k-avatars"\n        aria-live="polite" role="log"\n        kendoChatScrollAnchor\n            #anchor="scrollAnchor"\n            [(autoScroll)]="autoScroll"\n        >\n        <kendo-chat-message-list\n            [messages]="messages"\n            [messageTemplate]="messageTemplate"\n            [attachmentTemplate]="attachmentTemplate"\n            [user]="user"\n            (executeAction)="dispatchAction($event)"\n            (resize)="anchor.scrollToBottom()"\n            (navigate)="this.autoScroll = false"\n        >\n        </kendo-chat-message-list>\n        </div>\n        <kendo-message-box\n        #messageBox\n        [messageBoxTemplate]="messageBoxTemplate"\n        [type]="messageBoxType"\n        [user]="user"\n        [autoScroll]="autoScroll"\n        [localization]="localizationText"\n        (sendMessage)="sendMessage.emit($event)"\n        >\n        </kendo-message-box>\n    '}]}],ctorParameters:function(){return[{type:l.LocalizationService},{type:c.NgZone}]},propDecorators:{messages:[{type:o.Input}],user:[{type:o.Input}],messageBoxType:[{type:o.Input}],sendMessage:[{type:o.Output}],executeAction:[{type:o.Output}],className:[{type:o.HostBinding,args:["class"]}],dirAttr:[{type:o.HostBinding,args:["attr.dir"]}],attachmentTemplate:[{type:o.ContentChild,args:[g,{static:!1}]}],messageTemplate:[{type:o.ContentChild,args:[m,{static:!1}]}],messageBoxTemplate:[{type:o.ContentChild,args:[d,{static:!1}]}],messageBox:[{type:o.ViewChild,args:["messageBox",{static:!1}]}],messageList:[{type:o.ViewChild,args:["messageList",{static:!0}]}]}});h(ue,pe=M),Object.defineProperty(ue.prototype,"override",{get:function(){return!0},enumerable:!1,configurable:!0});var pe,V=ue;function ue(e){var t=pe.call(this)||this;return t.service=e,t}V.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:V,deps:[{token:l.LocalizationService}],target:c.ɵɵFactoryTarget.Component}),V.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:V,selector:"kendo-chat-messages",providers:[{provide:M,useExisting:o.forwardRef(function(){return V})}],usesInheritance:!0,ngImport:c,template:"",isInline:!0}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:V,decorators:[{type:o.Component,args:[{providers:[{provide:M,useExisting:o.forwardRef(function(){return V})}],selector:"kendo-chat-messages",template:""}]}],ctorParameters:function(){return[{type:l.LocalizationService}]}});ge.prototype.onClick=function(e){this.executeAction.next(e)};t=ge;function ge(){this.cssClass=!0,this.executeAction=new o.EventEmitter}t.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:t,deps:[],target:c.ɵɵFactoryTarget.Component}),t.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:t,selector:"kendo-chat-hero-card",inputs:{imageUrl:"imageUrl",title:"title",subtitle:"subtitle",actions:"actions"},outputs:{executeAction:"executeAction"},host:{properties:{"class.k-card":"this.cssClass"}},ngImport:c,template:'\n        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />\n        <div class="k-card-body">\n        <h5 class="k-card-title" *ngIf="title">\n            {{ title }}\n        </h5>\n        <h6 class="k-card-subtitle" *ngIf="subtitle">\n            {{ subtitle }}\n        </h6>\n        </div>\n        <div class="k-card-actions k-card-actions-vertical">\n        <span class="k-card-action"\n                *ngFor="let act of actions"\n        >\n            <button\n                kendoButton fillMode="flat"\n                (click)="onClick(act)"\n            >\n                    {{ act.title }}\n            </button>\n        </span>\n        </div>\n    ',isInline:!0,directives:[{type:n.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:n.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:u.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:t,decorators:[{type:o.Component,args:[{selector:"kendo-chat-hero-card",template:'\n        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />\n        <div class="k-card-body">\n        <h5 class="k-card-title" *ngIf="title">\n            {{ title }}\n        </h5>\n        <h6 class="k-card-subtitle" *ngIf="subtitle">\n            {{ subtitle }}\n        </h6>\n        </div>\n        <div class="k-card-actions k-card-actions-vertical">\n        <span class="k-card-action"\n                *ngFor="let act of actions"\n        >\n            <button\n                kendoButton fillMode="flat"\n                (click)="onClick(act)"\n            >\n                    {{ act.title }}\n            </button>\n        </span>\n        </div>\n    '}]}],propDecorators:{imageUrl:[{type:o.Input}],title:[{type:o.Input}],subtitle:[{type:o.Input}],actions:[{type:o.Input}],cssClass:[{type:o.HostBinding,args:["class.k-card"]}],executeAction:[{type:o.Output}]}});M=[E,V,g,m,t,d],n=[v,p,F,x,y,w,m,O,C,S],u=function(){};u.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,deps:[],target:c.ɵɵFactoryTarget.NgModule}),u.ɵmod=c.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,declarations:[E,V,g,m,t,d,v,p,F,x,y,w,m,O,C,S],imports:[r.ButtonModule,s.CommonModule,a.ResizeSensorModule],exports:[E,V,g,m,t,d]}),u.ɵinj=c.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,imports:[[r.ButtonModule,s.CommonModule,a.ResizeSensorModule]]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,decorators:[{type:o.NgModule,args:[{declarations:q(q([],_(M)),_(n)),exports:[M],imports:[r.ButtonModule,s.CommonModule,a.ResizeSensorModule]}]}]}),e.AttachmentTemplateDirective=g,e.ChatComponent=E,e.ChatMessageBoxTemplateDirective=d,e.ChatModule=u,e.CustomMessagesComponent=V,e.ExecuteActionEvent=Z,e.HeroCardComponent=t,e.MessageTemplateDirective=m,e.SendMessageEvent=j,Object.defineProperty(e,"__esModule",{value:!0})});

package/chat/chat.component.d.ts

@@ -7,6 +7,9 @@ import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { MessageTemplateDirective } from './message-template.directive';
 import { ExecuteActionEvent, Message, SendMessageEvent, User } from '../api';
+import { MessageBoxType } from '../common/models/message-box-options';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+import { MessageBoxComponent } from './message-box.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI Chat component for Angular.
@@ -32,6 +35,12 @@ export declare class ChatComponent implements AfterViewInit, OnDestroy {
      * The User ID identifies messages that are authored by the local user.
      */
     user: User;
+    /**
+     * Used to switch between a one-liner input or a textarea.
+     * ([see example]({% slug message_box %})#toc-message-box-types).
+     * @default input
+     */
+    messageBoxType: MessageBoxType;
     /**
      * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
      * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
@@ -51,14 +60,16 @@ export declare class ChatComponent implements AfterViewInit, OnDestroy {
     get dirAttr(): string;
     attachmentTemplate: AttachmentTemplateDirective;
     messageTemplate: MessageTemplateDirective;
+    messageBoxTemplate: ChatMessageBoxTemplateDirective;
+    messageBox: MessageBoxComponent;
     /**
      * @hidden
      */
-    messageInput: ElementRef;
+    messageList: ElementRef;
     /**
      * @hidden
      */
-    messageList: ElementRef;
+    get localizationText(): LocalizationService;
     /**
      * @hidden
      */
@@ -69,14 +80,6 @@ export declare class ChatComponent implements AfterViewInit, OnDestroy {
     ngOnChanges(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    /**
-     * @hidden
-     */
-    sendClick(): void;
-    /**
-     * @hidden
-     */
-    inputKeydown(e: any): void;
     /**
      * @hidden
      */
@@ -86,5 +89,5 @@ export declare class ChatComponent implements AfterViewInit, OnDestroy {
      */
     textFor(key: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChatComponent, "kendo-chat", never, { "messages": "messages"; "user": "user"; }, { "sendMessage": "sendMessage"; "executeAction": "executeAction"; }, ["attachmentTemplate", "messageTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatComponent, "kendo-chat", never, { "messages": "messages"; "user": "user"; "messageBoxType": "messageBoxType"; }, { "sendMessage": "sendMessage"; "executeAction": "executeAction"; }, ["attachmentTemplate", "messageTemplate", "messageBoxTemplate"], never>;
 }

package/chat/chat.directives.d.ts

@@ -5,3 +5,4 @@
 export { ChatComponent } from './chat.component';
 export { AttachmentTemplateDirective } from './attachment-template.directive';
 export { MessageTemplateDirective } from './message-template.directive';
+export { ChatMessageBoxTemplateDirective } from './message-box.directive';

package/chat/chat.module.d.ts

@@ -8,17 +8,19 @@ import * as i2 from "./l10n/custom-messages.component";
 import * as i3 from "./attachment-template.directive";
 import * as i4 from "./message-template.directive";
 import * as i5 from "../cards/hero-card.component";
-import * as i6 from "./attachment.component";
-import * as i7 from "../common/focused-state.directive";
-import * as i8 from "./l10n/localized-messages.directive";
-import * as i9 from "./message-attachments.component";
-import * as i10 from "./message.component";
-import * as i11 from "./message-list.component";
-import * as i12 from "../common/scroll-anchor.directive";
-import * as i13 from "./suggested-actions.component";
-import * as i14 from "@progress/kendo-angular-buttons";
-import * as i15 from "@angular/common";
-import * as i16 from "@progress/kendo-angular-common";
+import * as i6 from "./message-box.directive";
+import * as i7 from "./attachment.component";
+import * as i8 from "../common/focused-state.directive";
+import * as i9 from "./l10n/localized-messages.directive";
+import * as i10 from "./message-attachments.component";
+import * as i11 from "./message.component";
+import * as i12 from "./message-list.component";
+import * as i13 from "../common/scroll-anchor.directive";
+import * as i14 from "./suggested-actions.component";
+import * as i15 from "./message-box.component";
+import * as i16 from "@progress/kendo-angular-buttons";
+import * as i17 from "@angular/common";
+import * as i18 from "@progress/kendo-angular-common";
 /**
  * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.
  *
@@ -42,6 +44,6 @@ import * as i16 from "@progress/kendo-angular-common";
  */
 export declare class ChatModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ChatModule, [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.MessageTemplateDirective, typeof i5.HeroCardComponent, typeof i6.AttachmentComponent, typeof i7.FocusedStateDirective, typeof i8.LocalizedMessagesDirective, typeof i9.MessageAttachmentsComponent, typeof i10.MessageComponent, typeof i11.MessageListComponent, typeof i4.MessageTemplateDirective, typeof i12.ScrollAnchorDirective, typeof i13.SuggestedActionsComponent], [typeof i14.ButtonModule, typeof i15.CommonModule, typeof i16.ResizeSensorModule], [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.MessageTemplateDirective, typeof i5.HeroCardComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ChatModule, [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.MessageTemplateDirective, typeof i5.HeroCardComponent, typeof i6.ChatMessageBoxTemplateDirective, typeof i7.AttachmentComponent, typeof i8.FocusedStateDirective, typeof i9.LocalizedMessagesDirective, typeof i10.MessageAttachmentsComponent, typeof i11.MessageComponent, typeof i12.MessageListComponent, typeof i4.MessageTemplateDirective, typeof i13.ScrollAnchorDirective, typeof i14.SuggestedActionsComponent, typeof i15.MessageBoxComponent], [typeof i16.ButtonModule, typeof i17.CommonModule, typeof i18.ResizeSensorModule], [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.MessageTemplateDirective, typeof i5.HeroCardComponent, typeof i6.ChatMessageBoxTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ChatModule>;
 }

package/chat/message-box.component.d.ts

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, EventEmitter } from '@angular/core';
+import { User } from '../api/user.interface';
+import { MessageBoxType } from '../common/models/message-box-options';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class MessageBoxComponent {
+    hostClasses: string;
+    get messageBoxValue(): boolean;
+    messageBoxInput: ElementRef;
+    user: User;
+    autoScroll: boolean;
+    type: MessageBoxType;
+    localization: LocalizationService;
+    messageBoxTemplate: ChatMessageBoxTemplateDirective;
+    sendMessage: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    sendClick(): void;
+    /**
+     * @hidden
+     */
+    inputKeydown(e: any): void;
+    /**
+     * @hidden
+     */
+    textAreaKeydown(e: any): void;
+    /**
+     * @hidden
+     */
+    textFor(key: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageBoxComponent, "kendo-message-box", never, { "user": "user"; "autoScroll": "autoScroll"; "type": "type"; "localization": "localization"; "messageBoxTemplate": "messageBoxTemplate"; }, { "sendMessage": "sendMessage"; }, never, never>;
+}

package/chat/message-box.directive.d.ts

@@ -0,0 +1,17 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Creates a message box area that overrides the default message box of the Conversational UI Component.
+ * To define a message-box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag
+ * [see example]({% slug message_box %}#toc-message-box-template).
+ */
+export declare class ChatMessageBoxTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChatMessageBoxTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ChatMessageBoxTemplateDirective, "[kendoChatMessageBoxTemplate]", never, {}, {}, never>;
+}

package/chat/message-list.component.d.ts

@@ -35,7 +35,7 @@ export declare class MessageListComponent implements AfterViewInit {
     onResize(): void;
     formatTimeStamp(date: any): string;
     onKeydown(e: any): void;
-    onBlur(args: FocusEvent): void;
+    onBlur(args: any): void;
     isOwnMessage(msg: Message): boolean;
     dispatchAction(action: Action, message: Message): void;
     trackGroup(_index: number, item: ViewItem): any;

package/common/models/message-box-options.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible message box options of the Conversational UI.
+ */
+export declare type MessageBoxType = 'textarea' | 'textbox';

package/esm2015/cards/hero-card.component.js

@@ -24,53 +24,55 @@ export class HeroCardComponent {
 }
 HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: HeroCardComponent, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
-    <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
-    <div class="k-card-body">
-      <h5 class="k-card-title" *ngIf="title">
-        {{ title }}
-      </h5>
-      <h6 class="k-card-subtitle" *ngIf="subtitle">
-        {{ subtitle }}
-      </h6>
-    </div>
-    <div class="k-card-actions k-card-actions-vertical">
-      <span class="k-card-action"
-            *ngFor="let act of actions"
-      >
-        <button
-          kendoButton fillMode="flat"
-          (click)="onClick(act)">
-          {{ act.title }}
-        </button>
-      </span>
-    </div>
-  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
+        <div class="k-card-body">
+        <h5 class="k-card-title" *ngIf="title">
+            {{ title }}
+        </h5>
+        <h6 class="k-card-subtitle" *ngIf="subtitle">
+            {{ subtitle }}
+        </h6>
+        </div>
+        <div class="k-card-actions k-card-actions-vertical">
+        <span class="k-card-action"
+                *ngFor="let act of actions"
+        >
+            <button
+                kendoButton fillMode="flat"
+                (click)="onClick(act)"
+            >
+                    {{ act.title }}
+            </button>
+        </span>
+        </div>
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: HeroCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-hero-card',
                     template: `
-    <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
-    <div class="k-card-body">
-      <h5 class="k-card-title" *ngIf="title">
-        {{ title }}
-      </h5>
-      <h6 class="k-card-subtitle" *ngIf="subtitle">
-        {{ subtitle }}
-      </h6>
-    </div>
-    <div class="k-card-actions k-card-actions-vertical">
-      <span class="k-card-action"
-            *ngFor="let act of actions"
-      >
-        <button
-          kendoButton fillMode="flat"
-          (click)="onClick(act)">
-          {{ act.title }}
-        </button>
-      </span>
-    </div>
-  `
+        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
+        <div class="k-card-body">
+        <h5 class="k-card-title" *ngIf="title">
+            {{ title }}
+        </h5>
+        <h6 class="k-card-subtitle" *ngIf="subtitle">
+            {{ subtitle }}
+        </h6>
+        </div>
+        <div class="k-card-actions k-card-actions-vertical">
+        <span class="k-card-action"
+                *ngFor="let act of actions"
+        >
+            <button
+                kendoButton fillMode="flat"
+                (click)="onClick(act)"
+            >
+                    {{ act.title }}
+            </button>
+        </span>
+        </div>
+    `
                 }]
         }], propDecorators: { imageUrl: [{
                 type: Input