@progress/kendo-angular-grid 19.3.0-develop.4 → 19.3.0-develop.40

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 (120) hide show
  1. package/columns/columns-container.d.ts +2 -0
  2. package/common/data-layout-mode.d.ts +21 -0
  3. package/common/grid-col-size.d.ts +13 -0
  4. package/common/provider.service.d.ts +2 -0
  5. package/common/toolbar-tool-base.directive.d.ts +1 -0
  6. package/data/data-mapping.service.d.ts +3 -1
  7. package/directives.d.ts +7 -4
  8. package/editing/toolbar-editing-tool-base.directive.d.ts +3 -2
  9. package/editing-directives/editing-directive-base.d.ts +3 -0
  10. package/editing-directives/in-cell-editing.directive.d.ts +1 -1
  11. package/editing-directives/reactive-editing.directive.d.ts +1 -1
  12. package/editing-directives/template-editing.directive.d.ts +1 -1
  13. package/esm2022/adaptiveness/adaptive-renderer.component.mjs +1 -2
  14. package/esm2022/column-menu/column-chooser.component.mjs +1 -1
  15. package/esm2022/column-menu/column-list.component.mjs +8 -7
  16. package/esm2022/column-menu/column-menu-item.directive.mjs +1 -1
  17. package/esm2022/column-menu/column-menu.component.mjs +1 -1
  18. package/esm2022/columns/column-base.mjs +4 -4
  19. package/esm2022/columns/column.component.mjs +1 -1
  20. package/esm2022/columns/columns-container.mjs +3 -0
  21. package/esm2022/common/column-info.service.mjs +1 -1
  22. package/esm2022/common/data-layout-mode.mjs +5 -0
  23. package/esm2022/common/grid-col-size.mjs +5 -0
  24. package/esm2022/common/provider.service.mjs +1 -0
  25. package/esm2022/common/toolbar-tool-base.directive.mjs +6 -2
  26. package/esm2022/data/data-mapping.service.mjs +14 -3
  27. package/esm2022/directives.mjs +8 -1
  28. package/esm2022/editing/form/form-formfield.component.mjs +2 -2
  29. package/esm2022/editing/toolbar-editing-tool-base.directive.mjs +5 -0
  30. package/esm2022/editing-directives/editing-directive-base.mjs +17 -2
  31. package/esm2022/editing-directives/in-cell-editing.directive.mjs +5 -3
  32. package/esm2022/editing-directives/reactive-editing.directive.mjs +1 -1
  33. package/esm2022/editing-directives/template-editing.directive.mjs +1 -1
  34. package/esm2022/filtering/cell/boolean-filter-cell.component.mjs +1 -1
  35. package/esm2022/filtering/cell/date-filter-cell.component.mjs +1 -1
  36. package/esm2022/filtering/cell/filter-cell-operators.component.mjs +3 -4
  37. package/esm2022/filtering/cell/numeric-filter-cell.component.mjs +1 -1
  38. package/esm2022/filtering/cell/string-filter-cell.component.mjs +1 -1
  39. package/esm2022/filtering/filter-row.component.mjs +6 -3
  40. package/esm2022/filtering/menu/boolean-filter-menu.component.mjs +1 -2
  41. package/esm2022/filtering/menu/date-filter-menu-input.component.mjs +1 -1
  42. package/esm2022/filtering/menu/date-filter-menu.component.mjs +1 -1
  43. package/esm2022/filtering/menu/filter-menu-dropdownlist.directive.mjs +1 -1
  44. package/esm2022/filtering/menu/filter-menu-input-wrapper.component.mjs +1 -1
  45. package/esm2022/filtering/menu/filter-menu.component.mjs +1 -1
  46. package/esm2022/filtering/menu/numeric-filter-menu-input.component.mjs +1 -1
  47. package/esm2022/filtering/menu/numeric-filter-menu.component.mjs +1 -1
  48. package/esm2022/filtering/menu/string-filter-menu-input.component.mjs +1 -1
  49. package/esm2022/filtering/menu/string-filter-menu.component.mjs +1 -1
  50. package/esm2022/grid.component.mjs +191 -39
  51. package/esm2022/grid.module.mjs +103 -100
  52. package/esm2022/grouping/group-header.component.mjs +39 -4
  53. package/esm2022/grouping/group-panel.component.mjs +13 -8
  54. package/esm2022/highlight/highlight-item.mjs +5 -0
  55. package/esm2022/highlight/highlight.directive.mjs +132 -0
  56. package/esm2022/index.mjs +4 -0
  57. package/esm2022/localization/messages.mjs +57 -3
  58. package/esm2022/navigation/navigation-cursor.mjs +7 -1
  59. package/esm2022/navigation/navigation-metadata.mjs +3 -1
  60. package/esm2022/navigation/navigation.service.mjs +162 -16
  61. package/esm2022/navigation/toolbar-tool-name.mjs +2 -1
  62. package/esm2022/package-metadata.mjs +2 -2
  63. package/esm2022/pdf/export-element.mjs +14 -5
  64. package/esm2022/pdf/pdf.component.mjs +3 -1
  65. package/esm2022/rendering/cell.component.mjs +466 -188
  66. package/esm2022/rendering/common/col-group.component.mjs +21 -7
  67. package/esm2022/rendering/details-expand.directive.mjs +5 -2
  68. package/esm2022/rendering/footer/footer.component.mjs +117 -54
  69. package/esm2022/rendering/header/header.component.mjs +13 -9
  70. package/esm2022/rendering/list.component.mjs +19 -12
  71. package/esm2022/rendering/loading-template.directive.mjs +1 -0
  72. package/esm2022/rendering/table-body.component.mjs +394 -174
  73. package/esm2022/rendering/toolbar/tools/ai-assistant/ai-assistant.component.mjs +300 -0
  74. package/esm2022/rendering/toolbar/tools/ai-assistant/ai-tool.directive.mjs +257 -0
  75. package/esm2022/rendering/toolbar/tools/ai-assistant/utils.mjs +74 -0
  76. package/esm2022/rendering/toolbar/tools/column-chooser-tool.directive.mjs +0 -3
  77. package/esm2022/rendering/toolbar/tools/group-toolbar-tool.component.mjs +11 -9
  78. package/esm2022/rendering/toolbar/tools/select-all-command-tool.directive.mjs +93 -0
  79. package/esm2022/row-reordering/row-reorder.service.mjs +2 -2
  80. package/esm2022/row-reordering/utils.mjs +6 -4
  81. package/esm2022/selection/cell-selection.service.mjs +6 -3
  82. package/esm2022/selection/pair-set.mjs +87 -10
  83. package/esm2022/selection/selection-checkbox.directive.mjs +1 -1
  84. package/esm2022/selection/selection.directive.mjs +1 -1
  85. package/esm2022/utils.mjs +0 -4
  86. package/fesm2022/progress-kendo-angular-grid.mjs +2551 -642
  87. package/filtering/filter-row.component.d.ts +1 -0
  88. package/grid.component.d.ts +29 -1
  89. package/grid.module.d.ts +102 -99
  90. package/grouping/group-header.component.d.ts +1 -0
  91. package/grouping/group-panel.component.d.ts +1 -1
  92. package/highlight/highlight-item.d.ts +17 -0
  93. package/highlight/highlight.directive.d.ts +56 -0
  94. package/index.d.ts +8 -1
  95. package/localization/messages.d.ts +39 -3
  96. package/navigation/focus-group.d.ts +1 -1
  97. package/navigation/navigation-metadata.d.ts +2 -1
  98. package/navigation/navigation.service.d.ts +6 -0
  99. package/navigation/toolbar-tool-name.d.ts +1 -0
  100. package/package.json +22 -21
  101. package/rendering/cell.component.d.ts +30 -15
  102. package/rendering/common/col-group.component.d.ts +5 -0
  103. package/rendering/details-expand.directive.d.ts +5 -2
  104. package/rendering/footer/footer.component.d.ts +4 -1
  105. package/rendering/header/header.component.d.ts +1 -0
  106. package/rendering/list.component.d.ts +4 -1
  107. package/rendering/loading-template.directive.d.ts +1 -0
  108. package/rendering/table-body.component.d.ts +3 -1
  109. package/rendering/toolbar/tools/ai-assistant/ai-assistant.component.d.ts +50 -0
  110. package/rendering/toolbar/tools/ai-assistant/ai-tool.directive.d.ts +108 -0
  111. package/rendering/toolbar/tools/ai-assistant/utils.d.ts +124 -0
  112. package/rendering/toolbar/tools/column-chooser-tool.directive.d.ts +0 -1
  113. package/rendering/toolbar/tools/select-all-command-tool.directive.d.ts +36 -0
  114. package/row-reordering/row-reorder.service.d.ts +1 -1
  115. package/row-reordering/utils.d.ts +1 -1
  116. package/schematics/ngAdd/index.js +4 -4
  117. package/selection/cell-selection.service.d.ts +1 -0
  118. package/selection/pair-set.d.ts +36 -8
  119. package/selection/selection.directive.d.ts +1 -1
  120. package/utils.d.ts +0 -4
@@ -0,0 +1,300 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Component, ViewChild } from '@angular/core';
6
+ import { AIPromptComponent, OutputViewComponent, PromptViewComponent, AIPromptCustomMessagesComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective } from '@progress/kendo-angular-conversational-ui';
7
+ import { HttpClient, HttpRequest } from '@angular/common/http';
8
+ import { ContextService } from './../../../../common/provider.service';
9
+ import { ColumnInfoService } from './../../../../common/column-info.service';
10
+ import { convertDateStringsInFilter, GridToolbarAIResponseSuccessEvent, GridToolbarAIResponseErrorEvent } from './utils';
11
+ import { NgIf } from '@angular/common';
12
+ import * as i0 from "@angular/core";
13
+ import * as i1 from "@angular/common/http";
14
+ import * as i2 from "./../../../../common/provider.service";
15
+ import * as i3 from "./../../../../common/column-info.service";
16
+ /**
17
+ * @hidden
18
+ */
19
+ export class AiAssistantComponent {
20
+ http;
21
+ ctx;
22
+ columnInfoService;
23
+ aiPrompt;
24
+ activeView = 0;
25
+ promptOutputs = [];
26
+ requestUrl;
27
+ requestOptions;
28
+ aiPromptSettings;
29
+ aiToolDirective;
30
+ streaming = false;
31
+ disabledGenerateButton = false;
32
+ lastMessage;
33
+ requestData;
34
+ currentRequestSubscription = null;
35
+ //Remove this when the AI Assistant has a built-in loading indicator
36
+ loadingOutput = { id: 'k-loading-item', output: '', prompt: '' };
37
+ columns = [];
38
+ idCounter = 0;
39
+ constructor(http, ctx, columnInfoService) {
40
+ this.http = http;
41
+ this.ctx = ctx;
42
+ this.columnInfoService = columnInfoService;
43
+ }
44
+ ngAfterViewInit() {
45
+ this.columns = this.columnInfoService.leafNamedColumns.map((col) => ({
46
+ field: col.field,
47
+ title: col.title || col.field
48
+ }));
49
+ }
50
+ ngOnDestroy() {
51
+ this.unsubscribeCurrentRequest();
52
+ }
53
+ message(message) {
54
+ return this.ctx.localization.get(message);
55
+ }
56
+ cancelRequest() {
57
+ this.aiToolDirective.cancelRequest.emit();
58
+ this.unsubscribeCurrentRequest();
59
+ this.streaming = false;
60
+ }
61
+ onPromptRequest(ev) {
62
+ if (this.promptOutputs.length === 0) {
63
+ this.promptOutputs.push(this.loadingOutput);
64
+ }
65
+ this.unsubscribeCurrentRequest();
66
+ this.streaming = true;
67
+ this.activeView = 1;
68
+ if (ev.prompt) {
69
+ this.lastMessage = ev.prompt;
70
+ }
71
+ this.requestData = {
72
+ columns: this.columns,
73
+ promptMessage: ev.prompt,
74
+ url: this.requestUrl,
75
+ requestOptions: {
76
+ ...this.requestOptions
77
+ }
78
+ };
79
+ if (!this.requestOptions.body) {
80
+ const requestBody = {
81
+ role: this.requestData.requestOptions.role,
82
+ contents: [
83
+ {
84
+ text: this.requestData.promptMessage
85
+ }
86
+ ],
87
+ columns: this.requestData.columns
88
+ };
89
+ this.requestData.requestOptions.body = requestBody;
90
+ }
91
+ this.aiToolDirective.promptRequest.emit({ requestData: this.requestData, isRetry: ev.isRetry });
92
+ if (!this.requestUrl) {
93
+ return;
94
+ }
95
+ this.currentRequestSubscription = this.sendPromptRequest().subscribe((res) => {
96
+ if (res.body) {
97
+ this.processResponse(res);
98
+ this.streaming = false;
99
+ }
100
+ this.currentRequestSubscription = null;
101
+ }, (error) => {
102
+ this.handleError(error);
103
+ this.streaming = false;
104
+ this.currentRequestSubscription = null;
105
+ });
106
+ }
107
+ sendPromptRequest() {
108
+ const request = new HttpRequest(this.requestData.requestOptions.method, this.requestData.url, this.requestData.requestOptions.body, this.requestData.requestOptions);
109
+ return this.http.request(request);
110
+ }
111
+ processResponse(response) {
112
+ const responseBody = response.body;
113
+ const responseSuccessEvent = new GridToolbarAIResponseSuccessEvent(response);
114
+ this.aiToolDirective.responseSuccess.emit(responseSuccessEvent);
115
+ if (responseSuccessEvent.isDefaultPrevented()) {
116
+ this.deleteLoadingOutput();
117
+ return;
118
+ }
119
+ const isFilterable = Boolean(this.ctx.grid.filterable);
120
+ const isSortable = Boolean(this.ctx.grid.sortable);
121
+ const isGroupable = Boolean(this.ctx.grid.groupable);
122
+ if (isFilterable && responseBody.filter) {
123
+ this.processFilterResponse(responseBody.filter);
124
+ }
125
+ if (isSortable && responseBody.sort) {
126
+ this.processArrayResponse(responseBody.sort, this.ctx.grid.currentState.sort || [], (item) => item.field, (mergedArray) => this.ctx.grid.sortChange.next(mergedArray));
127
+ }
128
+ if (isGroupable && responseBody.group) {
129
+ this.processArrayResponse(responseBody.group, this.ctx.grid.currentState.group || [], (item) => item.field, (mergedArray) => this.ctx.grid.groupChange.next(mergedArray));
130
+ }
131
+ const responseContentStart = [`${this.ctx.localization.get('aiAssistantOutputCardBodyContent')} \n`];
132
+ const responseContentBody = responseBody.messages
133
+ .map((output, idx) => `${idx + 1} ${output}`)
134
+ .join('\n');
135
+ const output = {
136
+ id: this.idCounter++,
137
+ title: this.ctx.localization.get('aiAssistantOutputCardTitle'),
138
+ prompt: this.lastMessage,
139
+ output: responseContentStart.concat(responseContentBody).join(''),
140
+ };
141
+ this.deleteLoadingOutput();
142
+ this.promptOutputs.unshift(output);
143
+ }
144
+ handleError(error) {
145
+ const responseErrorEvent = new GridToolbarAIResponseErrorEvent(error);
146
+ this.aiToolDirective.responseError.emit(responseErrorEvent);
147
+ if (responseErrorEvent.isDefaultPrevented()) {
148
+ this.deleteLoadingOutput();
149
+ return;
150
+ }
151
+ const output = {
152
+ id: this.idCounter++,
153
+ prompt: this.lastMessage,
154
+ output: error.message
155
+ };
156
+ this.deleteLoadingOutput();
157
+ this.promptOutputs.unshift(output);
158
+ }
159
+ deleteLoadingOutput() {
160
+ if (this.promptOutputs[0].id === this.loadingOutput.id) {
161
+ this.promptOutputs.splice(0, 1);
162
+ }
163
+ }
164
+ unsubscribeCurrentRequest() {
165
+ if (this.currentRequestSubscription) {
166
+ this.currentRequestSubscription.unsubscribe();
167
+ this.currentRequestSubscription = null;
168
+ }
169
+ }
170
+ processArrayResponse(newItems, currentItems, getField, updateGrid) {
171
+ if (newItems?.length === 0) {
172
+ updateGrid([]);
173
+ }
174
+ else if (newItems?.length) {
175
+ let mergedArray = [...newItems];
176
+ const newFields = newItems.map(getField);
177
+ const existingItemsToKeep = currentItems.filter(item => !newFields.includes(getField(item)));
178
+ mergedArray = [...mergedArray, ...existingItemsToKeep];
179
+ updateGrid(mergedArray);
180
+ }
181
+ }
182
+ processFilterResponse(filter) {
183
+ const processedFilter = convertDateStringsInFilter(filter, this.columnInfoService.leafNamedColumns);
184
+ const clearFilter = Object.keys(processedFilter).length === 0;
185
+ if (clearFilter) {
186
+ this.ctx.grid.filterChange.next(undefined);
187
+ }
188
+ else if (processedFilter?.filters.length) {
189
+ const currentFilter = this.ctx.grid.currentState.filter;
190
+ let mergedFilter = processedFilter;
191
+ if (currentFilter && currentFilter.filters?.length > 0) {
192
+ mergedFilter = {
193
+ logic: 'and',
194
+ filters: [
195
+ currentFilter,
196
+ processedFilter
197
+ ]
198
+ };
199
+ }
200
+ this.ctx.grid.filterChange.next(mergedFilter);
201
+ }
202
+ }
203
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiAssistantComponent, deps: [{ token: i1.HttpClient }, { token: i2.ContextService }, { token: i3.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
204
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AiAssistantComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "aiPrompt", first: true, predicate: AIPromptComponent, descendants: true }], ngImport: i0, template: `
205
+ <kendo-aiprompt
206
+ #aiPrompt
207
+ [promptSuggestions]="aiPromptSettings?.promptSuggestions"
208
+ [showOutputRating]="aiPromptSettings?.showOutputRating"
209
+ [streaming]="streaming"
210
+ [speechToTextButton]="aiPromptSettings?.speechToTextButton"
211
+ [(activeView)]="activeView"
212
+ [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
213
+ [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
214
+ [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
215
+ [promptOutputs]="aiPromptSettings?.promptOutputs || promptOutputs"
216
+ (promptRequest)="onPromptRequest($event)"
217
+ (promptRequestCancel)="cancelRequest()"
218
+ >
219
+ <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
220
+ <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
221
+ <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
222
+ <div class="k-card">
223
+ <div class="k-card-header">
224
+ <div class="k-card-title">
225
+ <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
226
+ </div>
227
+ <div class="k-card-subtitle">
228
+ <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
229
+ </div>
230
+ </div>
231
+ <div class="k-card-body">
232
+ <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
233
+ </div>
234
+ <div class="k-card-actions">
235
+ <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
236
+ </div>
237
+ </div>
238
+ </ng-template>
239
+ <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
240
+ <p>{{output.output}}</p>
241
+ </ng-template>
242
+ <kendo-aiprompt-messages
243
+ [generateOutput]="message('aiAssistantApplyButtonText')"
244
+ ></kendo-aiprompt-messages>
245
+ </kendo-aiprompt>
246
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AIPromptComponent, selector: "kendo-aiprompt", inputs: ["activeView", "promptCommands", "promptSuggestions", "promptOutputs", "showOutputRating", "streaming", "speechToTextButton", "textAreaSettings", "generateButtonSVGIcon", "generateButtonIcon", "disabledGenerateButton"], outputs: ["activeViewChange", "promptRequest", "commandExecute", "outputCopy", "outputRatingChange", "promptRequestCancel"], exportAs: ["kendoAIPrompt"] }, { kind: "component", type: AIPromptCustomMessagesComponent, selector: "kendo-aiprompt-messages" }, { kind: "component", type: PromptViewComponent, selector: "kendo-aiprompt-prompt-view" }, { kind: "component", type: OutputViewComponent, selector: "kendo-aiprompt-output-view" }, { kind: "directive", type: AIPromptOutputTemplateDirective, selector: "[kendoAIPromptOutputTemplate]" }, { kind: "directive", type: AIPromptOutputBodyTemplateDirective, selector: "[kendoAIPromptOutputBodyTemplate]" }] });
247
+ }
248
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AiAssistantComponent, decorators: [{
249
+ type: Component,
250
+ args: [{
251
+ standalone: true,
252
+ imports: [NgIf, AIPromptComponent, AIPromptCustomMessagesComponent, PromptViewComponent, OutputViewComponent, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective],
253
+ template: `
254
+ <kendo-aiprompt
255
+ #aiPrompt
256
+ [promptSuggestions]="aiPromptSettings?.promptSuggestions"
257
+ [showOutputRating]="aiPromptSettings?.showOutputRating"
258
+ [streaming]="streaming"
259
+ [speechToTextButton]="aiPromptSettings?.speechToTextButton"
260
+ [(activeView)]="activeView"
261
+ [generateButtonSVGIcon]="aiPromptSettings?.generateButtonSVGIcon"
262
+ [generateButtonIcon]="aiPromptSettings?.generateButtonIcon"
263
+ [disabledGenerateButton]="disabledGenerateButton || promptView.textAreaValue?.length === 0"
264
+ [promptOutputs]="aiPromptSettings?.promptOutputs || promptOutputs"
265
+ (promptRequest)="onPromptRequest($event)"
266
+ (promptRequestCancel)="cancelRequest()"
267
+ >
268
+ <kendo-aiprompt-prompt-view #promptView></kendo-aiprompt-prompt-view>
269
+ <kendo-aiprompt-output-view></kendo-aiprompt-output-view>
270
+ <ng-template *ngIf="streaming && aiPrompt.streaming" kendoAIPromptOutputTemplate let-output>
271
+ <div class="k-card">
272
+ <div class="k-card-header">
273
+ <div class="k-card-title">
274
+ <span class="k-skeleton k-skeleton-text k-skeleton-pulse" [style.width.px]="200"></span>
275
+ </div>
276
+ <div class="k-card-subtitle">
277
+ <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
278
+ </div>
279
+ </div>
280
+ <div class="k-card-body">
281
+ <span class="k-skeleton k-skeleton-rect k-skeleton-pulse" style="height: 80px;"></span>
282
+ </div>
283
+ <div class="k-card-actions">
284
+ <span class="k-skeleton k-skeleton-text k-skeleton-pulse" style="width: 100%;"></span>
285
+ </div>
286
+ </div>
287
+ </ng-template>
288
+ <ng-template *ngIf="!(streaming && aiPrompt.streaming)" kendoAIPromptOutputBodyTemplate let-output>
289
+ <p>{{output.output}}</p>
290
+ </ng-template>
291
+ <kendo-aiprompt-messages
292
+ [generateOutput]="message('aiAssistantApplyButtonText')"
293
+ ></kendo-aiprompt-messages>
294
+ </kendo-aiprompt>
295
+ `
296
+ }]
297
+ }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i2.ContextService }, { type: i3.ColumnInfoService }]; }, propDecorators: { aiPrompt: [{
298
+ type: ViewChild,
299
+ args: [AIPromptComponent]
300
+ }] } });
@@ -0,0 +1,257 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2025 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, NgZone, ChangeDetectorRef, Input, Output, EventEmitter } from '@angular/core';
6
+ import { RefreshService, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
7
+ import { isPresent } from '@progress/kendo-angular-common';
8
+ import { Subscription } from 'rxjs';
9
+ import { sparklesIcon, tableWizardIcon } from '@progress/kendo-svg-icons';
10
+ import { ContextService } from '../../../../common/provider.service';
11
+ import { filter, take } from 'rxjs/operators';
12
+ import { ToolbarToolBase } from '../../../../common/toolbar-tool-base.directive';
13
+ import { ToolbarToolName } from '../../../../navigation/toolbar-tool-name';
14
+ import { WindowService } from '@progress/kendo-angular-dialog';
15
+ import { AiAssistantComponent } from './ai-assistant.component';
16
+ import { DEFAULT_AI_REQUEST_OPTIONS } from './utils';
17
+ import * as i0 from "@angular/core";
18
+ import * as i1 from "@progress/kendo-angular-dialog";
19
+ import * as i2 from "@progress/kendo-angular-toolbar";
20
+ import * as i3 from "../../../../common/provider.service";
21
+ /**
22
+ * Represents an AI Assistant tool of the Grid.
23
+ * Use this directive on any `kendo-toolbar-button` inside a ToolbarComponent in the Grid.
24
+ *
25
+ * @example
26
+ * ```html-no-run
27
+ * <kendo-grid>
28
+ * <kendo-toolbar>
29
+ * <kendo-toolbar-button kendoGridAIAssistantTool></kendo-toolbar-button>
30
+ * </kendo-toolbar>
31
+ * </kendo-grid>
32
+ * ```
33
+ * @remarks
34
+ * Applied to: {@link ToolBarButtonComponent}.
35
+ */
36
+ export class AIAssistantToolbarDirective extends ToolbarToolBase {
37
+ windowService;
38
+ host;
39
+ ctx;
40
+ zone;
41
+ refresh;
42
+ /**
43
+ * The URL to which the AI Assistant tool sends the AI request.
44
+ * - When you set this property, the AI Assistant tool sends and handles an HTTP request to the provided `requestUrl`. You can handle the `promptRequest` event to modify the request options before the tool sends it.
45
+ * - When you do not set this property, the AI Assistant tool does not send an HTTP request. You should handle the `promptRequest` event to send and handle a custom HTTP request.
46
+ */
47
+ requestUrl;
48
+ /**
49
+ * Configures the request options that the AI Assistant tool sends with the AI request.
50
+ *
51
+ * @default { headers: new HttpHeaders({ 'Content-Type': 'application/json' }), role: 'user', method: 'POST', responseType: 'json', withCredentials: false }
52
+ */
53
+ requestOptions;
54
+ /**
55
+ * Configures the settings for the AI Assistant Window.
56
+ */
57
+ aiWindowSettings;
58
+ /**
59
+ * Configures the settings for the AI prompt component that the AI Assistant Window component uses.
60
+ */
61
+ aiPromptSettings;
62
+ /**
63
+ * Emits an event before the AI Assistant tool sends the AI request.
64
+ * - When you provide a `requestUrl`, you can handle the event to modify the request options.
65
+ * - When you do not provide a `requestUrl`, you can handle the event to perform an entirely custom request.
66
+ */
67
+ promptRequest = new EventEmitter();
68
+ /**
69
+ * Emits an event when the user clicks the cancel button.
70
+ */
71
+ cancelRequest = new EventEmitter();
72
+ /**
73
+ * Emits an event when the AI Assistant tool completes the AI request successfully.
74
+ * The event contains the response from the AI service and is preventable to allow stopping the default response handling.
75
+ */
76
+ responseSuccess = new EventEmitter();
77
+ /**
78
+ * Emits an event when the AI Assistant tool completes the AI request with an error.
79
+ * The event contains the error response from the AI service and is preventable to allow stopping the default error handling.
80
+ */
81
+ responseError = new EventEmitter();
82
+ /**
83
+ * Emits an event when the AI Assistant tool closes.
84
+ */
85
+ close = new EventEmitter();
86
+ /**
87
+ * Emits an event when the AI Assistant tool opens.
88
+ * The event contains the window instance and the AI prompt instance.
89
+ */
90
+ open = new EventEmitter();
91
+ tableWizardIcon = tableWizardIcon;
92
+ windowRef;
93
+ subs = new Subscription();
94
+ actionSheetCloseSub;
95
+ emitOpenClose = false;
96
+ defaultAiPromptSettings = {
97
+ speechToTextButton: true,
98
+ generateButtonSVGIcon: this.tableWizardIcon,
99
+ generateButtonIcon: 'table-wizard'
100
+ };
101
+ constructor(windowService, host, ctx, zone, refresh, cdr) {
102
+ super(host, ToolbarToolName.aiAssistant, ctx, zone, cdr);
103
+ this.windowService = windowService;
104
+ this.host = host;
105
+ this.ctx = ctx;
106
+ this.zone = zone;
107
+ this.refresh = refresh;
108
+ this.host.rounded = 'full';
109
+ this.host.themeColor = 'primary';
110
+ this.host.showText = 'never';
111
+ }
112
+ ngOnInit() {
113
+ this.subs.add(this.host.click.subscribe(() => this.onClick()));
114
+ const hasToolbarIcon = isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
115
+ const hasOverflowIcon = isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
116
+ const hasIcon = hasToolbarIcon && hasOverflowIcon;
117
+ const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
118
+ if (!hasIcon) {
119
+ this.host.icon = 'sparkles';
120
+ }
121
+ if (!hasSvgIcon) {
122
+ this.host.svgIcon = sparklesIcon;
123
+ }
124
+ this.requestOptions = { ...DEFAULT_AI_REQUEST_OPTIONS, ...this.requestOptions };
125
+ }
126
+ ngAfterViewInit() {
127
+ super.ngAfterViewInit();
128
+ this.zone.onStable.pipe(take(1)).subscribe(() => {
129
+ this.buttonElement?.setAttribute('aria-haspopup', 'dialog');
130
+ this.buttonElement?.setAttribute('aria-expanded', 'false');
131
+ const needsTitle = this.host.showText !== 'always' && this.host.showText !== 'toolbar';
132
+ if (needsTitle && !this.host.title) {
133
+ this.buttonElement?.setAttribute('title', this.ctx.localization.get('aiAssistantToolbarToolText'));
134
+ }
135
+ });
136
+ this.subs.add(this.refresh.onRefresh.pipe(filter((tool) => tool === this.host)).subscribe((tool) => {
137
+ if (tool.overflows && this.windowRef) {
138
+ this.windowRef.close();
139
+ }
140
+ }));
141
+ }
142
+ ngOnDestroy() {
143
+ super.ngOnDestroy();
144
+ this.subs.unsubscribe();
145
+ if (this.actionSheetCloseSub) {
146
+ this.actionSheetCloseSub.unsubscribe();
147
+ this.actionSheetCloseSub = null;
148
+ }
149
+ }
150
+ /**
151
+ * @hidden
152
+ */
153
+ onClick() {
154
+ this.emitOpenClose = true;
155
+ this.toggleWindow();
156
+ }
157
+ /**
158
+ * Toggles the AI Assistant window.
159
+ */
160
+ toggleWindow() {
161
+ if (!this.windowRef) {
162
+ this.openWindow();
163
+ }
164
+ else {
165
+ this.closeWindow();
166
+ }
167
+ }
168
+ openWindow() {
169
+ const defaultWindowWidth = 437;
170
+ const rtl = this.ctx.localization.rtl;
171
+ const defaultWindowSettings = {
172
+ left: rtl ? this.buttonElement.offsetLeft - (this.aiWindowSettings.width || defaultWindowWidth) : this.buttonElement.offsetLeft + this.buttonElement.offsetWidth,
173
+ top: this.buttonElement.offsetTop + this.buttonElement.offsetHeight,
174
+ width: defaultWindowWidth,
175
+ title: this.ctx.localization.get('aiAssistantWindowTitle'),
176
+ cssClass: 'k-grid-assistant-window',
177
+ content: AiAssistantComponent,
178
+ autoFocusedElement: '.k-input-inner',
179
+ appendTo: this.ctx.grid.windowContainer
180
+ };
181
+ this.aiWindowSettings = {
182
+ ...defaultWindowSettings,
183
+ ...this.aiWindowSettings
184
+ };
185
+ this.windowRef = this.windowService.open(this.aiWindowSettings);
186
+ this.windowRef.window.instance.messages = {
187
+ closeTitle: this.ctx.localization.get('aiAssistantWindowCloseTitle'),
188
+ maximizeTitle: this.ctx.localization.get('aiAssistantWindowMaximizeTitle'),
189
+ minimizeTitle: this.ctx.localization.get('aiAssistantWindowMinimizeTitle'),
190
+ restoreTitle: this.ctx.localization.get('aiAssistantWindowRestoreTitle')
191
+ };
192
+ const aiPrompt = this.windowRef.content.instance;
193
+ aiPrompt.requestUrl = this.requestUrl;
194
+ aiPrompt.requestOptions = this.requestOptions;
195
+ aiPrompt.aiToolDirective = this;
196
+ aiPrompt.disabledGenerateButton = this.aiPromptSettings?.disabledGenerateButton;
197
+ aiPrompt.streaming = this.aiPromptSettings?.streaming || false;
198
+ aiPrompt.activeView = this.aiPromptSettings?.activeView || 0;
199
+ aiPrompt.aiPromptSettings = { ...this.defaultAiPromptSettings, ...this.aiPromptSettings };
200
+ if (this.emitOpenClose) {
201
+ this.zone.onStable.pipe(take(1)).subscribe(() => {
202
+ const event = {
203
+ aiWindow: this.windowRef.window.instance,
204
+ aiPrompt: this.windowRef.content.instance.aiPrompt
205
+ };
206
+ this.open.emit(event);
207
+ this.emitOpenClose = false;
208
+ });
209
+ }
210
+ this.subs.add(this.windowRef.window.instance.close.subscribe(() => {
211
+ this.emitOpenClose = true;
212
+ this.closeWindow(true);
213
+ }));
214
+ this.host.selected = true;
215
+ }
216
+ closeWindow(focusAnchor = false) {
217
+ this.windowRef.close();
218
+ if (this.emitOpenClose) {
219
+ this.close.emit();
220
+ this.emitOpenClose = false;
221
+ }
222
+ this.windowRef = null;
223
+ this.buttonElement?.setAttribute('aria-expanded', 'false');
224
+ this.buttonElement?.removeAttribute('aria-controls');
225
+ this.host.selected = false;
226
+ focusAnchor && this.buttonElement?.focus();
227
+ }
228
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, deps: [{ token: i1.WindowService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i2.RefreshService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
229
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIAssistantToolbarDirective, isStandalone: true, selector: "[kendoGridAIAssistantTool]", inputs: { requestUrl: "requestUrl", requestOptions: "requestOptions", aiWindowSettings: "aiWindowSettings", aiPromptSettings: "aiPromptSettings" }, outputs: { promptRequest: "promptRequest", cancelRequest: "cancelRequest", responseSuccess: "responseSuccess", responseError: "responseError", close: "close", open: "open" }, usesInheritance: true, ngImport: i0 });
230
+ }
231
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIAssistantToolbarDirective, decorators: [{
232
+ type: Directive,
233
+ args: [{
234
+ selector: '[kendoGridAIAssistantTool]',
235
+ standalone: true
236
+ }]
237
+ }], ctorParameters: function () { return [{ type: i1.WindowService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i2.RefreshService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { requestUrl: [{
238
+ type: Input
239
+ }], requestOptions: [{
240
+ type: Input
241
+ }], aiWindowSettings: [{
242
+ type: Input
243
+ }], aiPromptSettings: [{
244
+ type: Input
245
+ }], promptRequest: [{
246
+ type: Output
247
+ }], cancelRequest: [{
248
+ type: Output
249
+ }], responseSuccess: [{
250
+ type: Output
251
+ }], responseError: [{
252
+ type: Output
253
+ }], close: [{
254
+ type: Output
255
+ }], open: [{
256
+ type: Output
257
+ }] } });
@@ -0,0 +1,74 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { HttpHeaders } from "@angular/common/http";
6
+ import { PreventableEvent } from "@progress/kendo-angular-common";
7
+ /**
8
+ * @hidden
9
+ */
10
+ export const DEFAULT_AI_REQUEST_OPTIONS = {
11
+ headers: new HttpHeaders({
12
+ 'Content-Type': 'application/json'
13
+ }),
14
+ role: 'user',
15
+ method: 'POST',
16
+ responseType: 'json'
17
+ };
18
+ /**
19
+ * @hidden
20
+ */
21
+ export const convertDateStringsInFilter = (filter, columns) => {
22
+ if (!filter) {
23
+ return filter;
24
+ }
25
+ if (filter.filters && Array.isArray(filter.filters)) {
26
+ return {
27
+ ...filter,
28
+ filters: filter.filters.map(f => convertDateStringsInFilter(f, columns))
29
+ };
30
+ }
31
+ if (filter.field && filter.value !== undefined) {
32
+ const column = columns.find(col => col.field === filter.field);
33
+ if (column && isDateField(filter.field, columns)) {
34
+ return {
35
+ ...filter,
36
+ value: new Date(filter.value)
37
+ };
38
+ }
39
+ }
40
+ return filter;
41
+ };
42
+ /**
43
+ * @hidden
44
+ */
45
+ export const isDateField = (fieldName, columns) => {
46
+ const column = columns.find((col) => col.field === fieldName);
47
+ return column?.filter === 'date' || column?.editor === 'date';
48
+ };
49
+ /**
50
+ * Represents the event data when the AI Assistant request completes successfully.
51
+ */
52
+ export class GridToolbarAIResponseSuccessEvent extends PreventableEvent {
53
+ /**
54
+ * The HTTP response from the AI service.
55
+ */
56
+ response;
57
+ constructor(response) {
58
+ super();
59
+ this.response = response;
60
+ }
61
+ }
62
+ /**
63
+ * Represents the event data when the AI Assistant request completes with an error.
64
+ */
65
+ export class GridToolbarAIResponseErrorEvent extends PreventableEvent {
66
+ /**
67
+ * The HTTP error response from the AI service.
68
+ */
69
+ error;
70
+ constructor(error) {
71
+ super();
72
+ this.error = error;
73
+ }
74
+ }
@@ -192,9 +192,6 @@ export class ColumnChooserToolbarDirective extends ToolbarToolBase {
192
192
  this.host.selected = false;
193
193
  focusAnchor && this.buttonElement?.focus();
194
194
  }
195
- get buttonElement() {
196
- return this.host.getButton();
197
- }
198
195
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i1.PopupService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i2.RefreshService }, { token: i4.AdaptiveGridService }, { token: i5.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
199
196
  static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, usesInheritance: true, ngImport: i0 });
200
197
  }