@progress/kendo-angular-conversational-ui 14.3.0-develop.12 → 14.3.0-develop.14

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 (7) hide show
  1. package/chat/message-attachments.component.d.ts +6 -2
  2. package/esm2020/chat/message-attachments.component.mjs +23 -14
  3. package/esm2020/chat/message-list.component.mjs +1 -1
  4. package/esm2020/package-metadata.mjs +2 -2
  5. package/fesm2015/progress-kendo-angular-conversational-ui.mjs +33 -24
  6. package/fesm2020/progress-kendo-angular-conversational-ui.mjs +21 -13
  7. package/package.json +7 -7
package/chat/message-attachments.component.d.ts CHANGED
@@ -14,6 +14,7 @@ import * as i0 from "@angular/core";
14
14
  */
15
15
  export declare class MessageAttachmentsComponent extends ChatItem implements AfterViewInit, OnDestroy {
16
16
  private zone;
17
+ private localizationService;
17
18
  /**
18
19
  * @hidden
19
20
  */
@@ -30,12 +31,15 @@ export declare class MessageAttachmentsComponent extends ChatItem implements Aft
30
31
  get carousel(): boolean;
31
32
  deck: ElementRef;
32
33
  items: QueryList<ElementRef>;
33
- scrollPosition: number;
34
+ private scrollPosition;
34
35
  private selectedIndex;
35
36
  private scrollSubscription;
37
+ private direction;
38
+ get showLeftArrow(): boolean;
39
+ get showRightArrow(): boolean;
36
40
  private carouselKeyHandlers;
37
41
  private listKeyHandlers;
38
- constructor(zone: NgZone);
42
+ constructor(zone: NgZone, localizationService: LocalizationService);
39
43
  ngAfterViewInit(): void;
40
44
  ngOnDestroy(): void;
41
45
  isSelected(index: number): boolean;
package/esm2020/chat/message-attachments.component.mjs CHANGED
@@ -12,17 +12,19 @@ import { AttachmentTemplateDirective } from './attachment-template.directive';
12
12
  import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
13
13
  import { LocalizationService } from '@progress/kendo-angular-l10n';
14
14
  import * as i0 from "@angular/core";
15
- import * as i1 from "@progress/kendo-angular-buttons";
16
- import * as i2 from "./attachment.component";
17
- import * as i3 from "@angular/common";
15
+ import * as i1 from "@progress/kendo-angular-l10n";
16
+ import * as i2 from "@progress/kendo-angular-buttons";
17
+ import * as i3 from "./attachment.component";
18
+ import * as i4 from "@angular/common";
18
19
  // eslint-disable no-forward-ref
19
20
  /**
20
21
  * @hidden
21
22
  */
22
23
  export class MessageAttachmentsComponent extends ChatItem {
23
- constructor(zone) {
24
+ constructor(zone, localizationService) {
24
25
  super();
25
26
  this.zone = zone;
27
+ this.localizationService = localizationService;
26
28
  /**
27
29
  * @hidden
28
30
  */
@@ -34,17 +36,24 @@ export class MessageAttachmentsComponent extends ChatItem {
34
36
  this.scrollPosition = 0;
35
37
  this.selectedIndex = 0;
36
38
  this.carouselKeyHandlers = {
37
- [Keys.ArrowLeft]: (e) => this.navigateTo(e, -1),
38
- [Keys.ArrowRight]: (e) => this.navigateTo(e, 1)
39
+ [Keys.ArrowLeft]: (e) => this.navigateTo(e, this.direction === 'rtl' ? 1 : -1),
40
+ [Keys.ArrowRight]: (e) => this.navigateTo(e, this.direction === 'rtl' ? -1 : 1)
39
41
  };
40
42
  this.listKeyHandlers = {
41
43
  [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
42
44
  [Keys.ArrowDown]: (e) => this.navigateTo(e, 1)
43
45
  };
46
+ this.direction = this.localizationService.rtl ? 'rtl' : 'ltr';
44
47
  }
45
48
  get carousel() {
46
49
  return this.layout !== 'list';
47
50
  }
51
+ get showLeftArrow() {
52
+ return this.carousel && this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0;
53
+ }
54
+ get showRightArrow() {
55
+ return this.carousel && this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1;
56
+ }
48
57
  ngAfterViewInit() {
49
58
  this.zone.runOutsideAngular(() => {
50
59
  const scrollDebounceTime = 100;
@@ -78,7 +87,7 @@ export class MessageAttachmentsComponent extends ChatItem {
78
87
  const scrollStep = el.scrollWidth / this.items.length;
79
88
  const max = el.scrollWidth - el.offsetWidth;
80
89
  const pos = el.scrollLeft + scrollStep * dir;
81
- el.scrollLeft = Math.max(0, Math.min(max, pos));
90
+ el.scrollLeft = this.direction === 'rtl' ? Math.min(0, max, pos) : Math.max(0, Math.min(max, pos));
82
91
  }
83
92
  select(index) {
84
93
  this.selectedIndex = index;
@@ -114,13 +123,13 @@ export class MessageAttachmentsComponent extends ChatItem {
114
123
  return this.localization.get(key);
115
124
  }
116
125
  }
117
- MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
126
+ MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
118
127
  MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
119
128
  provide: ChatItem,
120
129
  useExisting: forwardRef(() => MessageAttachmentsComponent)
121
130
  }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
122
131
  <button
123
- *ngIf="carousel && scrollPosition > 0"
132
+ *ngIf="showLeftArrow"
124
133
  (click)="scrollTo(-1)"
125
134
  kendoButton
126
135
  tabindex="-1"
@@ -150,7 +159,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
150
159
  </kendo-chat-attachment>
151
160
  </div>
152
161
  <button
153
- *ngIf="carousel && scrollPosition < 1"
162
+ *ngIf="showRightArrow"
154
163
  (click)="scrollTo(1)"
155
164
  kendoButton
156
165
  tabindex="-1"
@@ -159,7 +168,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
159
168
  icon="chevron-right"
160
169
  >
161
170
  </button>
162
- `, isInline: true, components: [{ type: i1.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"] }, { type: i2.AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
171
+ `, isInline: true, components: [{ type: i2.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"] }, { type: i3.AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
163
172
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
164
173
  type: Component,
165
174
  args: [{
@@ -170,7 +179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
170
179
  selector: 'kendo-chat-message-attachments',
171
180
  template: `
172
181
  <button
173
- *ngIf="carousel && scrollPosition > 0"
182
+ *ngIf="showLeftArrow"
174
183
  (click)="scrollTo(-1)"
175
184
  kendoButton
176
185
  tabindex="-1"
@@ -200,7 +209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
200
209
  </kendo-chat-attachment>
201
210
  </div>
202
211
  <button
203
- *ngIf="carousel && scrollPosition < 1"
212
+ *ngIf="showRightArrow"
204
213
  (click)="scrollTo(1)"
205
214
  kendoButton
206
215
  tabindex="-1"
@@ -211,7 +220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
211
220
  </button>
212
221
  `
213
222
  }]
214
- }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { attachments: [{
223
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { attachments: [{
215
224
  type: Input
216
225
  }], layout: [{
217
226
  type: Input
package/esm2020/chat/message-list.component.mjs CHANGED
@@ -140,7 +140,7 @@ export class MessageListComponent {
140
140
  const isNextItemQuickReply = nextItem instanceof SuggestedActionsComponent;
141
141
  if (nextItem !== prevItem) {
142
142
  if (isNextItemQuickReply) {
143
- nextItem.items.toArray()[0].nativeElement.focus();
143
+ nextItem.items.toArray()[0]?.nativeElement.focus();
144
144
  }
145
145
  this.select(nextItem);
146
146
  nextItem.focus();
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: 1702380685,
13
- version: '14.3.0-develop.12',
12
+ publishDate: 1702631715,
13
+ version: '14.3.0-develop.14',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/fesm2015/progress-kendo-angular-conversational-ui.mjs CHANGED
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
6
  import { Directive, Optional, isDevMode, EventEmitter, forwardRef, Component, Input, Output, HostBinding, ViewChildren, ElementRef, ViewChild, HostListener, ContentChild, NgModule } from '@angular/core';
7
- import * as i1$2 from '@progress/kendo-angular-l10n';
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';
10
10
  import * as i6 from '@progress/kendo-angular-common';
@@ -15,7 +15,7 @@ import { CommonModule } from '@angular/common';
15
15
  import * as i1 from '@progress/kendo-angular-intl';
16
16
  import { debounceTime } from 'rxjs/operators';
17
17
  import { chevronLeftIcon, chevronRightIcon, paperPlaneIcon } from '@progress/kendo-svg-icons';
18
- import * as i1$1 from '@progress/kendo-angular-buttons';
18
+ import * as i1$2 from '@progress/kendo-angular-buttons';
19
19
  import { ButtonModule } from '@progress/kendo-angular-buttons';
20
20
 
21
21
  /**
@@ -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: 1702380685,
123
- version: '14.3.0-develop.12',
122
+ publishDate: 1702631715,
123
+ version: '14.3.0-develop.14',
124
124
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
125
125
  };
126
126
 
@@ -588,9 +588,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
588
588
  * @hidden
589
589
  */
590
590
  class MessageAttachmentsComponent extends ChatItem {
591
- constructor(zone) {
591
+ constructor(zone, localizationService) {
592
592
  super();
593
593
  this.zone = zone;
594
+ this.localizationService = localizationService;
594
595
  /**
595
596
  * @hidden
596
597
  */
@@ -602,17 +603,24 @@ class MessageAttachmentsComponent extends ChatItem {
602
603
  this.scrollPosition = 0;
603
604
  this.selectedIndex = 0;
604
605
  this.carouselKeyHandlers = {
605
- [Keys.ArrowLeft]: (e) => this.navigateTo(e, -1),
606
- [Keys.ArrowRight]: (e) => this.navigateTo(e, 1)
606
+ [Keys.ArrowLeft]: (e) => this.navigateTo(e, this.direction === 'rtl' ? 1 : -1),
607
+ [Keys.ArrowRight]: (e) => this.navigateTo(e, this.direction === 'rtl' ? -1 : 1)
607
608
  };
608
609
  this.listKeyHandlers = {
609
610
  [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
610
611
  [Keys.ArrowDown]: (e) => this.navigateTo(e, 1)
611
612
  };
613
+ this.direction = this.localizationService.rtl ? 'rtl' : 'ltr';
612
614
  }
613
615
  get carousel() {
614
616
  return this.layout !== 'list';
615
617
  }
618
+ get showLeftArrow() {
619
+ return this.carousel && this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0;
620
+ }
621
+ get showRightArrow() {
622
+ return this.carousel && this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1;
623
+ }
616
624
  ngAfterViewInit() {
617
625
  this.zone.runOutsideAngular(() => {
618
626
  const scrollDebounceTime = 100;
@@ -646,7 +654,7 @@ class MessageAttachmentsComponent extends ChatItem {
646
654
  const scrollStep = el.scrollWidth / this.items.length;
647
655
  const max = el.scrollWidth - el.offsetWidth;
648
656
  const pos = el.scrollLeft + scrollStep * dir;
649
- el.scrollLeft = Math.max(0, Math.min(max, pos));
657
+ el.scrollLeft = this.direction === 'rtl' ? Math.min(0, max, pos) : Math.max(0, Math.min(max, pos));
650
658
  }
651
659
  select(index) {
652
660
  this.selectedIndex = index;
@@ -682,13 +690,13 @@ class MessageAttachmentsComponent extends ChatItem {
682
690
  return this.localization.get(key);
683
691
  }
684
692
  }
685
- MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
693
+ MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
686
694
  MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
687
695
  provide: ChatItem,
688
696
  useExisting: forwardRef(() => MessageAttachmentsComponent)
689
697
  }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
690
698
  <button
691
- *ngIf="carousel && scrollPosition > 0"
699
+ *ngIf="showLeftArrow"
692
700
  (click)="scrollTo(-1)"
693
701
  kendoButton
694
702
  tabindex="-1"
@@ -718,7 +726,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
718
726
  </kendo-chat-attachment>
719
727
  </div>
720
728
  <button
721
- *ngIf="carousel && scrollPosition < 1"
729
+ *ngIf="showRightArrow"
722
730
  (click)="scrollTo(1)"
723
731
  kendoButton
724
732
  tabindex="-1"
@@ -727,7 +735,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
727
735
  icon="chevron-right"
728
736
  >
729
737
  </button>
730
- `, isInline: true, components: [{ type: i1$1.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"] }, { type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
738
+ `, isInline: true, components: [{ type: i1$2.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"] }, { type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
731
739
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
732
740
  type: Component,
733
741
  args: [{
@@ -738,7 +746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
738
746
  selector: 'kendo-chat-message-attachments',
739
747
  template: `
740
748
  <button
741
- *ngIf="carousel && scrollPosition > 0"
749
+ *ngIf="showLeftArrow"
742
750
  (click)="scrollTo(-1)"
743
751
  kendoButton
744
752
  tabindex="-1"
@@ -768,7 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
768
776
  </kendo-chat-attachment>
769
777
  </div>
770
778
  <button
771
- *ngIf="carousel && scrollPosition < 1"
779
+ *ngIf="showRightArrow"
772
780
  (click)="scrollTo(1)"
773
781
  kendoButton
774
782
  tabindex="-1"
@@ -779,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
779
787
  </button>
780
788
  `
781
789
  }]
782
- }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { attachments: [{
790
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }]; }, propDecorators: { attachments: [{
783
791
  type: Input
784
792
  }], layout: [{
785
793
  type: Input
@@ -908,6 +916,7 @@ class MessageListComponent {
908
916
  }
909
917
  }
910
918
  navigateTo(e, offset) {
919
+ var _a;
911
920
  const items = this.items.toArray();
912
921
  const prevItem = this.selectedItem;
913
922
  const prevIndex = items.indexOf(prevItem);
@@ -916,7 +925,7 @@ class MessageListComponent {
916
925
  const isNextItemQuickReply = nextItem instanceof SuggestedActionsComponent;
917
926
  if (nextItem !== prevItem) {
918
927
  if (isNextItemQuickReply) {
919
- nextItem.items.toArray()[0].nativeElement.focus();
928
+ (_a = nextItem.items.toArray()[0]) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
920
929
  }
921
930
  this.select(nextItem);
922
931
  nextItem.focus();
@@ -1269,7 +1278,7 @@ MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
1269
1278
  </ng-container>
1270
1279
 
1271
1280
  <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
1272
- `, isInline: true, components: [{ type: i1$1.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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
1281
+ `, isInline: true, components: [{ type: i1$2.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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
1273
1282
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
1274
1283
  type: Component,
1275
1284
  args: [{
@@ -1378,7 +1387,7 @@ class LocalizedMessagesDirective extends Messages {
1378
1387
  this.service = service;
1379
1388
  }
1380
1389
  }
1381
- LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
1390
+ LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
1382
1391
  LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]", providers: [
1383
1392
  {
1384
1393
  provide: Messages,
@@ -1396,7 +1405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1396
1405
  ],
1397
1406
  selector: '[kendoChatLocalizedMessages]'
1398
1407
  }]
1399
- }], ctorParameters: function () { return [{ type: i1$2.LocalizationService }]; } });
1408
+ }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
1400
1409
 
1401
1410
  // Consider scroll to be at the bottom when within this number of pixels from the container height.
1402
1411
  const maxDelta = 2;
@@ -1563,7 +1572,7 @@ class ChatComponent {
1563
1572
  return this.localization.get(key);
1564
1573
  }
1565
1574
  }
1566
- ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, deps: [{ token: i1$2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
1575
+ ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
1567
1576
  ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChatComponent, 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: [
1568
1577
  LocalizationService,
1569
1578
  {
@@ -1698,7 +1707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1698
1707
  </kendo-message-box>
1699
1708
  `
1700
1709
  }]
1701
- }], ctorParameters: function () { return [{ type: i1$2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
1710
+ }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
1702
1711
  type: Input
1703
1712
  }], user: [{
1704
1713
  type: Input
@@ -1745,7 +1754,7 @@ class CustomMessagesComponent extends Messages {
1745
1754
  return true;
1746
1755
  }
1747
1756
  }
1748
- CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
1757
+ CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
1749
1758
  CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
1750
1759
  {
1751
1760
  provide: Messages,
@@ -1764,7 +1773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1764
1773
  selector: 'kendo-chat-messages',
1765
1774
  template: ``
1766
1775
  }]
1767
- }], ctorParameters: function () { return [{ type: i1$2.LocalizationService }]; } });
1776
+ }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
1768
1777
 
1769
1778
  /**
1770
1779
  * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
@@ -1805,7 +1814,7 @@ HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
1805
1814
  </button>
1806
1815
  </span>
1807
1816
  </div>
1808
- `, isInline: true, components: [{ type: i1$1.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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1817
+ `, isInline: true, components: [{ type: i1$2.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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1809
1818
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, decorators: [{
1810
1819
  type: Component,
1811
1820
  args: [{
package/fesm2020/progress-kendo-angular-conversational-ui.mjs CHANGED
@@ -115,8 +115,8 @@ const packageMetadata = {
115
115
  name: '@progress/kendo-angular-conversational-ui',
116
116
  productName: 'Kendo UI for Angular',
117
117
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
118
- publishDate: 1702380685,
119
- version: '14.3.0-develop.12',
118
+ publishDate: 1702631715,
119
+ version: '14.3.0-develop.14',
120
120
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
121
121
  };
122
122
 
@@ -796,9 +796,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
796
796
  * @hidden
797
797
  */
798
798
  class MessageAttachmentsComponent extends ChatItem {
799
- constructor(zone) {
799
+ constructor(zone, localizationService) {
800
800
  super();
801
801
  this.zone = zone;
802
+ this.localizationService = localizationService;
802
803
  /**
803
804
  * @hidden
804
805
  */
@@ -810,17 +811,24 @@ class MessageAttachmentsComponent extends ChatItem {
810
811
  this.scrollPosition = 0;
811
812
  this.selectedIndex = 0;
812
813
  this.carouselKeyHandlers = {
813
- [Keys.ArrowLeft]: (e) => this.navigateTo(e, -1),
814
- [Keys.ArrowRight]: (e) => this.navigateTo(e, 1)
814
+ [Keys.ArrowLeft]: (e) => this.navigateTo(e, this.direction === 'rtl' ? 1 : -1),
815
+ [Keys.ArrowRight]: (e) => this.navigateTo(e, this.direction === 'rtl' ? -1 : 1)
815
816
  };
816
817
  this.listKeyHandlers = {
817
818
  [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
818
819
  [Keys.ArrowDown]: (e) => this.navigateTo(e, 1)
819
820
  };
821
+ this.direction = this.localizationService.rtl ? 'rtl' : 'ltr';
820
822
  }
821
823
  get carousel() {
822
824
  return this.layout !== 'list';
823
825
  }
826
+ get showLeftArrow() {
827
+ return this.carousel && this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0;
828
+ }
829
+ get showRightArrow() {
830
+ return this.carousel && this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1;
831
+ }
824
832
  ngAfterViewInit() {
825
833
  this.zone.runOutsideAngular(() => {
826
834
  const scrollDebounceTime = 100;
@@ -854,7 +862,7 @@ class MessageAttachmentsComponent extends ChatItem {
854
862
  const scrollStep = el.scrollWidth / this.items.length;
855
863
  const max = el.scrollWidth - el.offsetWidth;
856
864
  const pos = el.scrollLeft + scrollStep * dir;
857
- el.scrollLeft = Math.max(0, Math.min(max, pos));
865
+ el.scrollLeft = this.direction === 'rtl' ? Math.min(0, max, pos) : Math.max(0, Math.min(max, pos));
858
866
  }
859
867
  select(index) {
860
868
  this.selectedIndex = index;
@@ -890,13 +898,13 @@ class MessageAttachmentsComponent extends ChatItem {
890
898
  return this.localization.get(key);
891
899
  }
892
900
  }
893
- MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
901
+ MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
894
902
  MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
895
903
  provide: ChatItem,
896
904
  useExisting: forwardRef(() => MessageAttachmentsComponent)
897
905
  }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
898
906
  <button
899
- *ngIf="carousel && scrollPosition > 0"
907
+ *ngIf="showLeftArrow"
900
908
  (click)="scrollTo(-1)"
901
909
  kendoButton
902
910
  tabindex="-1"
@@ -926,7 +934,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
926
934
  </kendo-chat-attachment>
927
935
  </div>
928
936
  <button
929
- *ngIf="carousel && scrollPosition < 1"
937
+ *ngIf="showRightArrow"
930
938
  (click)="scrollTo(1)"
931
939
  kendoButton
932
940
  tabindex="-1"
@@ -946,7 +954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
946
954
  selector: 'kendo-chat-message-attachments',
947
955
  template: `
948
956
  <button
949
- *ngIf="carousel && scrollPosition > 0"
957
+ *ngIf="showLeftArrow"
950
958
  (click)="scrollTo(-1)"
951
959
  kendoButton
952
960
  tabindex="-1"
@@ -976,7 +984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
976
984
  </kendo-chat-attachment>
977
985
  </div>
978
986
  <button
979
- *ngIf="carousel && scrollPosition < 1"
987
+ *ngIf="showRightArrow"
980
988
  (click)="scrollTo(1)"
981
989
  kendoButton
982
990
  tabindex="-1"
@@ -987,7 +995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
987
995
  </button>
988
996
  `
989
997
  }]
990
- }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { attachments: [{
998
+ }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$2.LocalizationService }]; }, propDecorators: { attachments: [{
991
999
  type: Input
992
1000
  }], layout: [{
993
1001
  type: Input
@@ -1124,7 +1132,7 @@ class MessageListComponent {
1124
1132
  const isNextItemQuickReply = nextItem instanceof SuggestedActionsComponent;
1125
1133
  if (nextItem !== prevItem) {
1126
1134
  if (isNextItemQuickReply) {
1127
- nextItem.items.toArray()[0].nativeElement.focus();
1135
+ nextItem.items.toArray()[0]?.nativeElement.focus();
1128
1136
  }
1129
1137
  this.select(nextItem);
1130
1138
  nextItem.focus();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-conversational-ui",
3
- "version": "14.3.0-develop.12",
3
+ "version": "14.3.0-develop.14",
4
4
  "description": "Kendo UI for Angular Conversational UI components",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -24,16 +24,16 @@
24
24
  "@angular/core": "13 - 17",
25
25
  "@angular/platform-browser": "13 - 17",
26
26
  "@progress/kendo-licensing": "^1.0.2",
27
- "@progress/kendo-angular-buttons": "14.3.0-develop.12",
28
- "@progress/kendo-angular-common": "14.3.0-develop.12",
29
- "@progress/kendo-angular-intl": "14.3.0-develop.12",
30
- "@progress/kendo-angular-l10n": "14.3.0-develop.12",
31
- "@progress/kendo-angular-popup": "14.3.0-develop.12",
27
+ "@progress/kendo-angular-buttons": "14.3.0-develop.14",
28
+ "@progress/kendo-angular-common": "14.3.0-develop.14",
29
+ "@progress/kendo-angular-intl": "14.3.0-develop.14",
30
+ "@progress/kendo-angular-l10n": "14.3.0-develop.14",
31
+ "@progress/kendo-angular-popup": "14.3.0-develop.14",
32
32
  "rxjs": "^6.5.3 || ^7.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "tslib": "^2.3.1",
36
- "@progress/kendo-angular-schematics": "14.3.0-develop.12"
36
+ "@progress/kendo-angular-schematics": "14.3.0-develop.14"
37
37
  },
38
38
  "schematics": "./schematics/collection.json",
39
39
  "module": "fesm2015/progress-kendo-angular-conversational-ui.mjs",