@progress/kendo-angular-conversational-ui 16.11.0-develop.3 → 16.11.0-develop.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/chat/message-box.component.d.ts +4 -4
  2. package/esm2020/chat/chat.component.mjs +1 -1
  3. package/esm2020/chat/message-box.component.mjs +94 -64
  4. package/esm2020/package-metadata.mjs +2 -2
  5. package/fesm2015/progress-kendo-angular-conversational-ui.mjs +97 -100
  6. package/fesm2020/progress-kendo-angular-conversational-ui.mjs +97 -100
  7. package/package.json +10 -10
  8. package/chat/common/focused-state.directive.d.ts +0 -15
  9. package/esm2020/chat/common/focused-state.directive.mjs +0 -38
package/chat/message-box.component.d.ts CHANGED
@@ -2,20 +2,20 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { ElementRef, EventEmitter } from '@angular/core';
5
+ import { EventEmitter } from '@angular/core';
6
6
  import { LocalizationService } from '@progress/kendo-angular-l10n';
7
7
  import { SVGIcon } from '@progress/kendo-svg-icons';
8
8
  import { User } from './api/user.interface';
9
9
  import { MessageBoxType } from './common/models/message-box-options';
10
10
  import { ChatMessageBoxTemplateDirective } from './message-box.directive';
11
+ import { TextAreaComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
11
12
  import * as i0 from "@angular/core";
12
13
  /**
13
14
  * @hidden
14
15
  */
15
16
  export declare class MessageBoxComponent {
16
- hostClasses: string;
17
- get messageBoxValue(): boolean;
18
- messageBoxInput: ElementRef;
17
+ borderColor: string;
18
+ messageBoxInput: TextBoxComponent | TextAreaComponent;
19
19
  user: User;
20
20
  autoScroll: boolean;
21
21
  type: MessageBoxType;
package/esm2020/chat/chat.component.mjs CHANGED
@@ -100,7 +100,7 @@ export class ChatComponent {
100
100
  const handler = makeHandler(e.action);
101
101
  handler(e.action, this);
102
102
  if (!this.messageBoxTemplate) {
103
- this.messageBox.messageBoxInput.nativeElement.focus();
103
+ this.messageBox.messageBoxInput.focus();
104
104
  }
105
105
  }
106
106
  }
package/esm2020/chat/message-box.component.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
5
+ import { Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
6
6
  import { NgIf, NgTemplateOutlet } from '@angular/common';
7
7
  import { LocalizationService } from '@progress/kendo-angular-l10n';
8
8
  import { Keys } from '@progress/kendo-angular-common';
@@ -10,28 +10,25 @@ import { paperPlaneIcon } from '@progress/kendo-svg-icons';
10
10
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
11
11
  import { SendMessageEvent } from './api/post-message-event';
12
12
  import { ChatMessageBoxTemplateDirective } from './message-box.directive';
13
- import { FocusedStateDirective } from './common/focused-state.directive';
13
+ import { InputSeparatorComponent, TextAreaComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxSuffixTemplateDirective } from '@progress/kendo-angular-inputs';
14
14
  import * as i0 from "@angular/core";
15
15
  /**
16
16
  * @hidden
17
17
  */
18
18
  export class MessageBoxComponent {
19
19
  constructor() {
20
- this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
20
+ this.borderColor = 'inherit';
21
21
  this.sendMessage = new EventEmitter();
22
22
  /**
23
23
  * @hidden
24
24
  */
25
25
  this.sendIcon = paperPlaneIcon;
26
26
  }
27
- get messageBoxValue() {
28
- return this.type === 'textarea';
29
- }
30
27
  /**
31
28
  * @hidden
32
29
  */
33
30
  sendClick() {
34
- const input = this.messageBoxInput.nativeElement;
31
+ const input = this.messageBoxInput;
35
32
  const value = input.value;
36
33
  if (!value) {
37
34
  return;
@@ -69,7 +66,7 @@ export class MessageBoxComponent {
69
66
  this.sendClick();
70
67
  }
71
68
  if (newLine) {
72
- this.messageBoxInput.nativeElement.value += `\r\n`;
69
+ this.messageBoxInput.value += `\r\n`;
73
70
  }
74
71
  }
75
72
  /**
@@ -80,101 +77,134 @@ export class MessageBoxComponent {
80
77
  }
81
78
  }
82
79
  MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
83
- MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, 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: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
80
+ MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "style.border-color": "this.borderColor" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
84
81
  <ng-container *ngIf="!messageBoxTemplate">
85
- <input
82
+ <kendo-textbox
86
83
  *ngIf="type === 'textbox'"
87
84
  #messageBoxInput
88
- [attr.role]="'textbox'"
89
- kendoChatFocusedState
90
- type="text"
91
- class="k-textbox k-input k-input-md k-input-solid"
92
- [attr.aria-label]="textFor('messageBoxInputLabel')"
85
+ class="k-message-box"
86
+ [inputAttributes]="{
87
+ 'aria-label': textFor('messageBoxInputLabel')
88
+ }"
93
89
  [placeholder]="textFor('messagePlaceholder')"
94
90
  (keydown)="inputKeydown($event)"
95
- />
91
+ >
92
+ <ng-template kendoTextBoxSuffixTemplate>
93
+ <kendo-textbox-separator></kendo-textbox-separator>
94
+ <button
95
+ kendoButton
96
+ fillMode="flat"
97
+ class="k-chat-send"
98
+ icon="paper-plane"
99
+ [svgIcon]="sendIcon"
100
+ [tabindex]="0"
101
+ [attr.title]="textFor('send')"
102
+ (click)="sendClick()"
103
+ >
104
+ </button>
105
+ </ng-template>
106
+ </kendo-textbox>
96
107
 
97
- <textarea
108
+ <kendo-textarea
98
109
  *ngIf="type === 'textarea'"
99
110
  #messageBoxInput
100
- [attr.role]="'textbox'"
101
- kendoChatFocusedState
111
+ class="k-message-box !k-align-items-end"
112
+ resizable="none"
102
113
  [rows]="3"
103
- class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
104
- [attr.aria-label]="textFor('messageBoxInputLabel')"
114
+ [inputAttributes]="{
115
+ 'aria-label': textFor('messageBoxInputLabel')
116
+ }"
105
117
  [placeholder]="textFor('messagePlaceholder')"
118
+ [showSuffixSeparator]="true"
106
119
  (keydown)="textAreaKeydown($event)"
107
- ></textarea>
108
-
109
- <button
110
- kendoButton
111
- fillMode="flat"
112
- class="k-chat-send"
113
- icon="paper-plane"
114
- [svgIcon]="sendIcon"
115
- [tabindex]="0"
116
- [attr.title]="textFor('send')"
117
- (click)="sendClick()"
118
120
  >
119
- </button>
121
+ <kendo-textarea-suffix>
122
+ <button
123
+ kendoButton
124
+ fillMode="flat"
125
+ class="k-chat-send"
126
+ icon="paper-plane"
127
+ [svgIcon]="sendIcon"
128
+ [tabindex]="0"
129
+ [attr.title]="textFor('send')"
130
+ (click)="sendClick()"
131
+ >
132
+ </button>
133
+ </kendo-textarea-suffix>
134
+ </kendo-textarea>
120
135
  </ng-container>
121
136
 
122
137
  <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
123
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
138
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }] });
124
139
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, decorators: [{
125
140
  type: Component,
126
141
  args: [{
127
142
  selector: 'kendo-message-box',
128
143
  template: `
129
144
  <ng-container *ngIf="!messageBoxTemplate">
130
- <input
145
+ <kendo-textbox
131
146
  *ngIf="type === 'textbox'"
132
147
  #messageBoxInput
133
- [attr.role]="'textbox'"
134
- kendoChatFocusedState
135
- type="text"
136
- class="k-textbox k-input k-input-md k-input-solid"
137
- [attr.aria-label]="textFor('messageBoxInputLabel')"
148
+ class="k-message-box"
149
+ [inputAttributes]="{
150
+ 'aria-label': textFor('messageBoxInputLabel')
151
+ }"
138
152
  [placeholder]="textFor('messagePlaceholder')"
139
153
  (keydown)="inputKeydown($event)"
140
- />
154
+ >
155
+ <ng-template kendoTextBoxSuffixTemplate>
156
+ <kendo-textbox-separator></kendo-textbox-separator>
157
+ <button
158
+ kendoButton
159
+ fillMode="flat"
160
+ class="k-chat-send"
161
+ icon="paper-plane"
162
+ [svgIcon]="sendIcon"
163
+ [tabindex]="0"
164
+ [attr.title]="textFor('send')"
165
+ (click)="sendClick()"
166
+ >
167
+ </button>
168
+ </ng-template>
169
+ </kendo-textbox>
141
170
 
142
- <textarea
171
+ <kendo-textarea
143
172
  *ngIf="type === 'textarea'"
144
173
  #messageBoxInput
145
- [attr.role]="'textbox'"
146
- kendoChatFocusedState
174
+ class="k-message-box !k-align-items-end"
175
+ resizable="none"
147
176
  [rows]="3"
148
- class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
149
- [attr.aria-label]="textFor('messageBoxInputLabel')"
177
+ [inputAttributes]="{
178
+ 'aria-label': textFor('messageBoxInputLabel')
179
+ }"
150
180
  [placeholder]="textFor('messagePlaceholder')"
181
+ [showSuffixSeparator]="true"
151
182
  (keydown)="textAreaKeydown($event)"
152
- ></textarea>
153
-
154
- <button
155
- kendoButton
156
- fillMode="flat"
157
- class="k-chat-send"
158
- icon="paper-plane"
159
- [svgIcon]="sendIcon"
160
- [tabindex]="0"
161
- [attr.title]="textFor('send')"
162
- (click)="sendClick()"
163
183
  >
164
- </button>
184
+ <kendo-textarea-suffix>
185
+ <button
186
+ kendoButton
187
+ fillMode="flat"
188
+ class="k-chat-send"
189
+ icon="paper-plane"
190
+ [svgIcon]="sendIcon"
191
+ [tabindex]="0"
192
+ [attr.title]="textFor('send')"
193
+ (click)="sendClick()"
194
+ >
195
+ </button>
196
+ </kendo-textarea-suffix>
197
+ </kendo-textarea>
165
198
  </ng-container>
166
199
 
167
200
  <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
168
201
  `,
169
202
  standalone: true,
170
- imports: [NgIf, FocusedStateDirective, ButtonComponent, NgTemplateOutlet]
203
+ imports: [NgIf, ButtonComponent, NgTemplateOutlet, TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent]
171
204
  }]
172
- }], propDecorators: { hostClasses: [{
173
- type: HostBinding,
174
- args: ['class']
175
- }], messageBoxValue: [{
205
+ }], propDecorators: { borderColor: [{
176
206
  type: HostBinding,
177
- args: ['class.\!k-align-items-end']
207
+ args: ['style.border-color']
178
208
  }], messageBoxInput: [{
179
209
  type: ViewChild,
180
210
  args: ['messageBoxInput', { static: false }]
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-conversational-ui',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1727428539,
13
- version: '16.11.0-develop.3',
12
+ publishDate: 1727434220,
13
+ version: '16.11.0-develop.4',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/fesm2015/progress-kendo-angular-conversational-ui.mjs CHANGED
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { Directive, Optional, HostBinding, HostListener, EventEmitter, Component, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
6
+ import { Directive, Optional, EventEmitter, Component, HostBinding, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
7
7
  import * as i1$1 from '@progress/kendo-angular-l10n';
8
8
  import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
9
  import { validatePackage } from '@progress/kendo-licensing';
@@ -11,6 +11,7 @@ import { NgIf, NgTemplateOutlet, NgFor, NgSwitch, NgSwitchCase } from '@angular/
11
11
  import { Keys, ResizeSensorComponent, isPresent, focusableSelector, guid, ResizeBatchService } from '@progress/kendo-angular-common';
12
12
  import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon, sparklesIcon, commentIcon, moreHorizontalIcon, copyIcon, arrowRotateCwIcon, thumbUpOutlineIcon, thumbDownOutlineIcon, thumbUpIcon, thumbDownIcon, chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
13
13
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
14
+ import { TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent } from '@progress/kendo-angular-inputs';
14
15
  import { fromEvent, Subscription, Subject } from 'rxjs';
15
16
  import * as i1 from '@progress/kendo-angular-intl';
16
17
  import { debounceTime } from 'rxjs/operators';
@@ -18,7 +19,6 @@ import { IconsService } from '@progress/kendo-angular-icons';
18
19
  import { PopupService } from '@progress/kendo-angular-popup';
19
20
  import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
20
21
  import { PanelBarComponent } from '@progress/kendo-angular-layout';
21
- import { TextAreaComponent } from '@progress/kendo-angular-inputs';
22
22
 
23
23
  /**
24
24
  * Defines a template that will be used for displaying message attachments. To define an attachment
@@ -123,8 +123,8 @@ const packageMetadata = {
123
123
  name: '@progress/kendo-angular-conversational-ui',
124
124
  productName: 'Kendo UI for Angular',
125
125
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
126
- publishDate: 1727428539,
127
- version: '16.11.0-develop.3',
126
+ publishDate: 1727434220,
127
+ version: '16.11.0-develop.4',
128
128
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
129
129
  };
130
130
 
@@ -148,59 +148,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
148
148
  }]
149
149
  }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
150
150
 
151
- /**
152
- * @hidden
153
- */
154
- class FocusedStateDirective {
155
- constructor() {
156
- this.focused = false;
157
- }
158
- onFocus() {
159
- this.focused = true;
160
- }
161
- onBlur() {
162
- this.focused = false;
163
- }
164
- }
165
- FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
166
- FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusedStateDirective, isStandalone: true, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
167
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, decorators: [{
168
- type: Directive,
169
- args: [{
170
- selector: '[kendoChatFocusedState]',
171
- standalone: true
172
- }]
173
- }], propDecorators: { focused: [{
174
- type: HostBinding,
175
- args: ['class.k-focus']
176
- }], onFocus: [{
177
- type: HostListener,
178
- args: ['focusin']
179
- }], onBlur: [{
180
- type: HostListener,
181
- args: ['focusout']
182
- }] } });
183
-
184
151
  /**
185
152
  * @hidden
186
153
  */
187
154
  class MessageBoxComponent {
188
155
  constructor() {
189
- this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
156
+ this.borderColor = 'inherit';
190
157
  this.sendMessage = new EventEmitter();
191
158
  /**
192
159
  * @hidden
193
160
  */
194
161
  this.sendIcon = paperPlaneIcon;
195
162
  }
196
- get messageBoxValue() {
197
- return this.type === 'textarea';
198
- }
199
163
  /**
200
164
  * @hidden
201
165
  */
202
166
  sendClick() {
203
- const input = this.messageBoxInput.nativeElement;
167
+ const input = this.messageBoxInput;
204
168
  const value = input.value;
205
169
  if (!value) {
206
170
  return;
@@ -238,7 +202,7 @@ class MessageBoxComponent {
238
202
  this.sendClick();
239
203
  }
240
204
  if (newLine) {
241
- this.messageBoxInput.nativeElement.value += `\r\n`;
205
+ this.messageBoxInput.value += `\r\n`;
242
206
  }
243
207
  }
244
208
  /**
@@ -249,101 +213,134 @@ class MessageBoxComponent {
249
213
  }
250
214
  }
251
215
  MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
252
- MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, 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: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
216
+ MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "style.border-color": "this.borderColor" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
253
217
  <ng-container *ngIf="!messageBoxTemplate">
254
- <input
218
+ <kendo-textbox
255
219
  *ngIf="type === 'textbox'"
256
220
  #messageBoxInput
257
- [attr.role]="'textbox'"
258
- kendoChatFocusedState
259
- type="text"
260
- class="k-textbox k-input k-input-md k-input-solid"
261
- [attr.aria-label]="textFor('messageBoxInputLabel')"
221
+ class="k-message-box"
222
+ [inputAttributes]="{
223
+ 'aria-label': textFor('messageBoxInputLabel')
224
+ }"
262
225
  [placeholder]="textFor('messagePlaceholder')"
263
226
  (keydown)="inputKeydown($event)"
264
- />
227
+ >
228
+ <ng-template kendoTextBoxSuffixTemplate>
229
+ <kendo-textbox-separator></kendo-textbox-separator>
230
+ <button
231
+ kendoButton
232
+ fillMode="flat"
233
+ class="k-chat-send"
234
+ icon="paper-plane"
235
+ [svgIcon]="sendIcon"
236
+ [tabindex]="0"
237
+ [attr.title]="textFor('send')"
238
+ (click)="sendClick()"
239
+ >
240
+ </button>
241
+ </ng-template>
242
+ </kendo-textbox>
265
243
 
266
- <textarea
244
+ <kendo-textarea
267
245
  *ngIf="type === 'textarea'"
268
246
  #messageBoxInput
269
- [attr.role]="'textbox'"
270
- kendoChatFocusedState
247
+ class="k-message-box !k-align-items-end"
248
+ resizable="none"
271
249
  [rows]="3"
272
- class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
273
- [attr.aria-label]="textFor('messageBoxInputLabel')"
250
+ [inputAttributes]="{
251
+ 'aria-label': textFor('messageBoxInputLabel')
252
+ }"
274
253
  [placeholder]="textFor('messagePlaceholder')"
254
+ [showSuffixSeparator]="true"
275
255
  (keydown)="textAreaKeydown($event)"
276
- ></textarea>
277
-
278
- <button
279
- kendoButton
280
- fillMode="flat"
281
- class="k-chat-send"
282
- icon="paper-plane"
283
- [svgIcon]="sendIcon"
284
- [tabindex]="0"
285
- [attr.title]="textFor('send')"
286
- (click)="sendClick()"
287
256
  >
288
- </button>
257
+ <kendo-textarea-suffix>
258
+ <button
259
+ kendoButton
260
+ fillMode="flat"
261
+ class="k-chat-send"
262
+ icon="paper-plane"
263
+ [svgIcon]="sendIcon"
264
+ [tabindex]="0"
265
+ [attr.title]="textFor('send')"
266
+ (click)="sendClick()"
267
+ >
268
+ </button>
269
+ </kendo-textarea-suffix>
270
+ </kendo-textarea>
289
271
  </ng-container>
290
272
 
291
273
  <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
292
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
274
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }] });
293
275
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, decorators: [{
294
276
  type: Component,
295
277
  args: [{
296
278
  selector: 'kendo-message-box',
297
279
  template: `
298
280
  <ng-container *ngIf="!messageBoxTemplate">
299
- <input
281
+ <kendo-textbox
300
282
  *ngIf="type === 'textbox'"
301
283
  #messageBoxInput
302
- [attr.role]="'textbox'"
303
- kendoChatFocusedState
304
- type="text"
305
- class="k-textbox k-input k-input-md k-input-solid"
306
- [attr.aria-label]="textFor('messageBoxInputLabel')"
284
+ class="k-message-box"
285
+ [inputAttributes]="{
286
+ 'aria-label': textFor('messageBoxInputLabel')
287
+ }"
307
288
  [placeholder]="textFor('messagePlaceholder')"
308
289
  (keydown)="inputKeydown($event)"
309
- />
290
+ >
291
+ <ng-template kendoTextBoxSuffixTemplate>
292
+ <kendo-textbox-separator></kendo-textbox-separator>
293
+ <button
294
+ kendoButton
295
+ fillMode="flat"
296
+ class="k-chat-send"
297
+ icon="paper-plane"
298
+ [svgIcon]="sendIcon"
299
+ [tabindex]="0"
300
+ [attr.title]="textFor('send')"
301
+ (click)="sendClick()"
302
+ >
303
+ </button>
304
+ </ng-template>
305
+ </kendo-textbox>
310
306
 
311
- <textarea
307
+ <kendo-textarea
312
308
  *ngIf="type === 'textarea'"
313
309
  #messageBoxInput
314
- [attr.role]="'textbox'"
315
- kendoChatFocusedState
310
+ class="k-message-box !k-align-items-end"
311
+ resizable="none"
316
312
  [rows]="3"
317
- class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
318
- [attr.aria-label]="textFor('messageBoxInputLabel')"
313
+ [inputAttributes]="{
314
+ 'aria-label': textFor('messageBoxInputLabel')
315
+ }"
319
316
  [placeholder]="textFor('messagePlaceholder')"
317
+ [showSuffixSeparator]="true"
320
318
  (keydown)="textAreaKeydown($event)"
321
- ></textarea>
322
-
323
- <button
324
- kendoButton
325
- fillMode="flat"
326
- class="k-chat-send"
327
- icon="paper-plane"
328
- [svgIcon]="sendIcon"
329
- [tabindex]="0"
330
- [attr.title]="textFor('send')"
331
- (click)="sendClick()"
332
319
  >
333
- </button>
320
+ <kendo-textarea-suffix>
321
+ <button
322
+ kendoButton
323
+ fillMode="flat"
324
+ class="k-chat-send"
325
+ icon="paper-plane"
326
+ [svgIcon]="sendIcon"
327
+ [tabindex]="0"
328
+ [attr.title]="textFor('send')"
329
+ (click)="sendClick()"
330
+ >
331
+ </button>
332
+ </kendo-textarea-suffix>
333
+ </kendo-textarea>
334
334
  </ng-container>
335
335
 
336
336
  <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
337
337
  `,
338
338
  standalone: true,
339
- imports: [NgIf, FocusedStateDirective, ButtonComponent, NgTemplateOutlet]
339
+ imports: [NgIf, ButtonComponent, NgTemplateOutlet, TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent]
340
340
  }]
341
- }], propDecorators: { hostClasses: [{
342
- type: HostBinding,
343
- args: ['class']
344
- }], messageBoxValue: [{
341
+ }], propDecorators: { borderColor: [{
345
342
  type: HostBinding,
346
- args: ['class.\!k-align-items-end']
343
+ args: ['style.border-color']
347
344
  }], messageBoxInput: [{
348
345
  type: ViewChild,
349
346
  args: ['messageBoxInput', { static: false }]
@@ -1585,7 +1582,7 @@ class ChatComponent {
1585
1582
  const handler = makeHandler(e.action);
1586
1583
  handler(e.action, this);
1587
1584
  if (!this.messageBoxTemplate) {
1588
- this.messageBox.messageBoxInput.nativeElement.focus();
1585
+ this.messageBox.messageBoxInput.focus();
1589
1586
  }
1590
1587
  }
1591
1588
  }
package/fesm2020/progress-kendo-angular-conversational-ui.mjs CHANGED
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { Directive, Optional, HostBinding, HostListener, EventEmitter, Component, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
6
+ import { Directive, Optional, EventEmitter, Component, HostBinding, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
7
7
  import * as i1$1 from '@progress/kendo-angular-l10n';
8
8
  import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
9
  import { validatePackage } from '@progress/kendo-licensing';
@@ -11,6 +11,7 @@ import { NgIf, NgTemplateOutlet, NgFor, NgSwitch, NgSwitchCase } from '@angular/
11
11
  import { Keys, ResizeSensorComponent, isPresent, focusableSelector, guid, ResizeBatchService } from '@progress/kendo-angular-common';
12
12
  import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon, sparklesIcon, commentIcon, moreHorizontalIcon, copyIcon, arrowRotateCwIcon, thumbUpOutlineIcon, thumbDownOutlineIcon, thumbUpIcon, thumbDownIcon, chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
13
13
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
14
+ import { TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent } from '@progress/kendo-angular-inputs';
14
15
  import * as i1 from '@progress/kendo-angular-intl';
15
16
  import { fromEvent, Subscription, Subject } from 'rxjs';
16
17
  import { debounceTime } from 'rxjs/operators';
@@ -18,7 +19,6 @@ import { IconsService } from '@progress/kendo-angular-icons';
18
19
  import { PopupService } from '@progress/kendo-angular-popup';
19
20
  import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
20
21
  import { PanelBarComponent } from '@progress/kendo-angular-layout';
21
- import { TextAreaComponent } from '@progress/kendo-angular-inputs';
22
22
 
23
23
  /**
24
24
  * Defines a template that will be used for displaying message attachments. To define an attachment
@@ -119,8 +119,8 @@ const packageMetadata = {
119
119
  name: '@progress/kendo-angular-conversational-ui',
120
120
  productName: 'Kendo UI for Angular',
121
121
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
122
- publishDate: 1727428539,
123
- version: '16.11.0-develop.3',
122
+ publishDate: 1727434220,
123
+ version: '16.11.0-develop.4',
124
124
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
125
125
  };
126
126
 
@@ -144,59 +144,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
144
144
  }]
145
145
  }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
146
146
 
147
- /**
148
- * @hidden
149
- */
150
- class FocusedStateDirective {
151
- constructor() {
152
- this.focused = false;
153
- }
154
- onFocus() {
155
- this.focused = true;
156
- }
157
- onBlur() {
158
- this.focused = false;
159
- }
160
- }
161
- FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
162
- FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusedStateDirective, isStandalone: true, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
163
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, decorators: [{
164
- type: Directive,
165
- args: [{
166
- selector: '[kendoChatFocusedState]',
167
- standalone: true
168
- }]
169
- }], propDecorators: { focused: [{
170
- type: HostBinding,
171
- args: ['class.k-focus']
172
- }], onFocus: [{
173
- type: HostListener,
174
- args: ['focusin']
175
- }], onBlur: [{
176
- type: HostListener,
177
- args: ['focusout']
178
- }] } });
179
-
180
147
  /**
181
148
  * @hidden
182
149
  */
183
150
  class MessageBoxComponent {
184
151
  constructor() {
185
- this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
152
+ this.borderColor = 'inherit';
186
153
  this.sendMessage = new EventEmitter();
187
154
  /**
188
155
  * @hidden
189
156
  */
190
157
  this.sendIcon = paperPlaneIcon;
191
158
  }
192
- get messageBoxValue() {
193
- return this.type === 'textarea';
194
- }
195
159
  /**
196
160
  * @hidden
197
161
  */
198
162
  sendClick() {
199
- const input = this.messageBoxInput.nativeElement;
163
+ const input = this.messageBoxInput;
200
164
  const value = input.value;
201
165
  if (!value) {
202
166
  return;
@@ -234,7 +198,7 @@ class MessageBoxComponent {
234
198
  this.sendClick();
235
199
  }
236
200
  if (newLine) {
237
- this.messageBoxInput.nativeElement.value += `\r\n`;
201
+ this.messageBoxInput.value += `\r\n`;
238
202
  }
239
203
  }
240
204
  /**
@@ -245,101 +209,134 @@ class MessageBoxComponent {
245
209
  }
246
210
  }
247
211
  MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
248
- MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, 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: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
212
+ MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "style.border-color": "this.borderColor" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
249
213
  <ng-container *ngIf="!messageBoxTemplate">
250
- <input
214
+ <kendo-textbox
251
215
  *ngIf="type === 'textbox'"
252
216
  #messageBoxInput
253
- [attr.role]="'textbox'"
254
- kendoChatFocusedState
255
- type="text"
256
- class="k-textbox k-input k-input-md k-input-solid"
257
- [attr.aria-label]="textFor('messageBoxInputLabel')"
217
+ class="k-message-box"
218
+ [inputAttributes]="{
219
+ 'aria-label': textFor('messageBoxInputLabel')
220
+ }"
258
221
  [placeholder]="textFor('messagePlaceholder')"
259
222
  (keydown)="inputKeydown($event)"
260
- />
223
+ >
224
+ <ng-template kendoTextBoxSuffixTemplate>
225
+ <kendo-textbox-separator></kendo-textbox-separator>
226
+ <button
227
+ kendoButton
228
+ fillMode="flat"
229
+ class="k-chat-send"
230
+ icon="paper-plane"
231
+ [svgIcon]="sendIcon"
232
+ [tabindex]="0"
233
+ [attr.title]="textFor('send')"
234
+ (click)="sendClick()"
235
+ >
236
+ </button>
237
+ </ng-template>
238
+ </kendo-textbox>
261
239
 
262
- <textarea
240
+ <kendo-textarea
263
241
  *ngIf="type === 'textarea'"
264
242
  #messageBoxInput
265
- [attr.role]="'textbox'"
266
- kendoChatFocusedState
243
+ class="k-message-box !k-align-items-end"
244
+ resizable="none"
267
245
  [rows]="3"
268
- class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
269
- [attr.aria-label]="textFor('messageBoxInputLabel')"
246
+ [inputAttributes]="{
247
+ 'aria-label': textFor('messageBoxInputLabel')
248
+ }"
270
249
  [placeholder]="textFor('messagePlaceholder')"
250
+ [showSuffixSeparator]="true"
271
251
  (keydown)="textAreaKeydown($event)"
272
- ></textarea>
273
-
274
- <button
275
- kendoButton
276
- fillMode="flat"
277
- class="k-chat-send"
278
- icon="paper-plane"
279
- [svgIcon]="sendIcon"
280
- [tabindex]="0"
281
- [attr.title]="textFor('send')"
282
- (click)="sendClick()"
283
252
  >
284
- </button>
253
+ <kendo-textarea-suffix>
254
+ <button
255
+ kendoButton
256
+ fillMode="flat"
257
+ class="k-chat-send"
258
+ icon="paper-plane"
259
+ [svgIcon]="sendIcon"
260
+ [tabindex]="0"
261
+ [attr.title]="textFor('send')"
262
+ (click)="sendClick()"
263
+ >
264
+ </button>
265
+ </kendo-textarea-suffix>
266
+ </kendo-textarea>
285
267
  </ng-container>
286
268
 
287
269
  <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
288
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
270
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }] });
289
271
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, decorators: [{
290
272
  type: Component,
291
273
  args: [{
292
274
  selector: 'kendo-message-box',
293
275
  template: `
294
276
  <ng-container *ngIf="!messageBoxTemplate">
295
- <input
277
+ <kendo-textbox
296
278
  *ngIf="type === 'textbox'"
297
279
  #messageBoxInput
298
- [attr.role]="'textbox'"
299
- kendoChatFocusedState
300
- type="text"
301
- class="k-textbox k-input k-input-md k-input-solid"
302
- [attr.aria-label]="textFor('messageBoxInputLabel')"
280
+ class="k-message-box"
281
+ [inputAttributes]="{
282
+ 'aria-label': textFor('messageBoxInputLabel')
283
+ }"
303
284
  [placeholder]="textFor('messagePlaceholder')"
304
285
  (keydown)="inputKeydown($event)"
305
- />
286
+ >
287
+ <ng-template kendoTextBoxSuffixTemplate>
288
+ <kendo-textbox-separator></kendo-textbox-separator>
289
+ <button
290
+ kendoButton
291
+ fillMode="flat"
292
+ class="k-chat-send"
293
+ icon="paper-plane"
294
+ [svgIcon]="sendIcon"
295
+ [tabindex]="0"
296
+ [attr.title]="textFor('send')"
297
+ (click)="sendClick()"
298
+ >
299
+ </button>
300
+ </ng-template>
301
+ </kendo-textbox>
306
302
 
307
- <textarea
303
+ <kendo-textarea
308
304
  *ngIf="type === 'textarea'"
309
305
  #messageBoxInput
310
- [attr.role]="'textbox'"
311
- kendoChatFocusedState
306
+ class="k-message-box !k-align-items-end"
307
+ resizable="none"
312
308
  [rows]="3"
313
- class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
314
- [attr.aria-label]="textFor('messageBoxInputLabel')"
309
+ [inputAttributes]="{
310
+ 'aria-label': textFor('messageBoxInputLabel')
311
+ }"
315
312
  [placeholder]="textFor('messagePlaceholder')"
313
+ [showSuffixSeparator]="true"
316
314
  (keydown)="textAreaKeydown($event)"
317
- ></textarea>
318
-
319
- <button
320
- kendoButton
321
- fillMode="flat"
322
- class="k-chat-send"
323
- icon="paper-plane"
324
- [svgIcon]="sendIcon"
325
- [tabindex]="0"
326
- [attr.title]="textFor('send')"
327
- (click)="sendClick()"
328
315
  >
329
- </button>
316
+ <kendo-textarea-suffix>
317
+ <button
318
+ kendoButton
319
+ fillMode="flat"
320
+ class="k-chat-send"
321
+ icon="paper-plane"
322
+ [svgIcon]="sendIcon"
323
+ [tabindex]="0"
324
+ [attr.title]="textFor('send')"
325
+ (click)="sendClick()"
326
+ >
327
+ </button>
328
+ </kendo-textarea-suffix>
329
+ </kendo-textarea>
330
330
  </ng-container>
331
331
 
332
332
  <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
333
333
  `,
334
334
  standalone: true,
335
- imports: [NgIf, FocusedStateDirective, ButtonComponent, NgTemplateOutlet]
335
+ imports: [NgIf, ButtonComponent, NgTemplateOutlet, TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent]
336
336
  }]
337
- }], propDecorators: { hostClasses: [{
338
- type: HostBinding,
339
- args: ['class']
340
- }], messageBoxValue: [{
337
+ }], propDecorators: { borderColor: [{
341
338
  type: HostBinding,
342
- args: ['class.\!k-align-items-end']
339
+ args: ['style.border-color']
343
340
  }], messageBoxInput: [{
344
341
  type: ViewChild,
345
342
  args: ['messageBoxInput', { static: false }]
@@ -1582,7 +1579,7 @@ class ChatComponent {
1582
1579
  const handler = makeHandler(e.action);
1583
1580
  handler(e.action, this);
1584
1581
  if (!this.messageBoxTemplate) {
1585
- this.messageBox.messageBoxInput.nativeElement.focus();
1582
+ this.messageBox.messageBoxInput.focus();
1586
1583
  }
1587
1584
  }
1588
1585
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-conversational-ui",
3
- "version": "16.11.0-develop.3",
3
+ "version": "16.11.0-develop.4",
4
4
  "description": "Kendo UI for Angular Conversational UI components",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -24,19 +24,19 @@
24
24
  "@angular/core": "15 - 18",
25
25
  "@angular/platform-browser": "15 - 18",
26
26
  "@progress/kendo-licensing": "^1.0.2",
27
- "@progress/kendo-angular-buttons": "16.11.0-develop.3",
28
- "@progress/kendo-angular-inputs": "16.11.0-develop.3",
29
- "@progress/kendo-angular-layout": "16.11.0-develop.3",
30
- "@progress/kendo-angular-icons": "16.11.0-develop.3",
31
- "@progress/kendo-angular-common": "16.11.0-develop.3",
32
- "@progress/kendo-angular-intl": "16.11.0-develop.3",
33
- "@progress/kendo-angular-l10n": "16.11.0-develop.3",
34
- "@progress/kendo-angular-popup": "16.11.0-develop.3",
27
+ "@progress/kendo-angular-buttons": "16.11.0-develop.4",
28
+ "@progress/kendo-angular-inputs": "16.11.0-develop.4",
29
+ "@progress/kendo-angular-layout": "16.11.0-develop.4",
30
+ "@progress/kendo-angular-icons": "16.11.0-develop.4",
31
+ "@progress/kendo-angular-common": "16.11.0-develop.4",
32
+ "@progress/kendo-angular-intl": "16.11.0-develop.4",
33
+ "@progress/kendo-angular-l10n": "16.11.0-develop.4",
34
+ "@progress/kendo-angular-popup": "16.11.0-develop.4",
35
35
  "rxjs": "^6.5.3 || ^7.0.0"
36
36
  },
37
37
  "dependencies": {
38
38
  "tslib": "^2.3.1",
39
- "@progress/kendo-angular-schematics": "16.11.0-develop.3"
39
+ "@progress/kendo-angular-schematics": "16.11.0-develop.4"
40
40
  },
41
41
  "schematics": "./schematics/collection.json",
42
42
  "module": "fesm2015/progress-kendo-angular-conversational-ui.mjs",
package/chat/common/focused-state.directive.d.ts DELETED
@@ -1,15 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import * as i0 from "@angular/core";
6
- /**
7
- * @hidden
8
- */
9
- export declare class FocusedStateDirective {
10
- focused: boolean;
11
- onFocus(): void;
12
- onBlur(): void;
13
- static ɵfac: i0.ɵɵFactoryDeclaration<FocusedStateDirective, never>;
14
- static ɵdir: i0.ɵɵDirectiveDeclaration<FocusedStateDirective, "[kendoChatFocusedState]", never, {}, {}, never, never, true, never>;
15
- }
package/esm2020/chat/common/focused-state.directive.mjs DELETED
@@ -1,38 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Directive, HostListener, HostBinding } from '@angular/core';
6
- import * as i0 from "@angular/core";
7
- /**
8
- * @hidden
9
- */
10
- export class FocusedStateDirective {
11
- constructor() {
12
- this.focused = false;
13
- }
14
- onFocus() {
15
- this.focused = true;
16
- }
17
- onBlur() {
18
- this.focused = false;
19
- }
20
- }
21
- FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
22
- FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusedStateDirective, isStandalone: true, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
23
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, decorators: [{
24
- type: Directive,
25
- args: [{
26
- selector: '[kendoChatFocusedState]',
27
- standalone: true
28
- }]
29
- }], propDecorators: { focused: [{
30
- type: HostBinding,
31
- args: ['class.k-focus']
32
- }], onFocus: [{
33
- type: HostListener,
34
- args: ['focusin']
35
- }], onBlur: [{
36
- type: HostListener,
37
- args: ['focusout']
38
- }] } });