@progress/kendo-angular-grid 21.1.1-develop.1 → 21.2.0-develop.1
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.
- package/esm2022/adaptiveness/adaptive-renderer.component.mjs +850 -756
- package/esm2022/aggregates/status-bar.component.mjs +13 -11
- package/esm2022/column-menu/column-chooser-content.component.mjs +133 -123
- package/esm2022/column-menu/column-list.component.mjs +62 -59
- package/esm2022/column-menu/column-menu-autosize-all.component.mjs +12 -11
- package/esm2022/column-menu/column-menu-autosize.component.mjs +12 -11
- package/esm2022/column-menu/column-menu-item.component.mjs +221 -85
- package/esm2022/column-menu/column-menu-position.component.mjs +46 -43
- package/esm2022/column-menu/column-menu.component.mjs +401 -315
- package/esm2022/editing/add-command.directive.mjs +27 -17
- package/esm2022/editing/cancel-command.directive.mjs +27 -17
- package/esm2022/editing/edit-command.directive.mjs +27 -17
- package/esm2022/editing/form/form-formfield.component.mjs +97 -70
- package/esm2022/editing/form/form.component.mjs +77 -61
- package/esm2022/editing/remove-command.directive.mjs +27 -17
- package/esm2022/editing/save-command.directive.mjs +27 -17
- package/esm2022/excel/excel-command.directive.mjs +27 -17
- package/esm2022/filtering/cell/filter-cell-operators.component.mjs +20 -17
- package/esm2022/filtering/cell/filter-cell.component.mjs +35 -33
- package/esm2022/filtering/filter-row.component.mjs +37 -29
- package/esm2022/filtering/menu/boolean-filter-menu.component.mjs +34 -31
- package/esm2022/filtering/menu/date-filter-menu.component.mjs +52 -49
- package/esm2022/filtering/menu/filter-menu-container.component.mjs +97 -89
- package/esm2022/filtering/menu/numeric-filter-menu.component.mjs +50 -47
- package/esm2022/filtering/menu/string-filter-menu.component.mjs +36 -33
- package/esm2022/filtering/multicheckbox-filter.component.mjs +54 -43
- package/esm2022/grid.component.mjs +1579 -1483
- package/esm2022/grouping/group-header.component.mjs +113 -89
- package/esm2022/grouping/group-panel.component.mjs +82 -75
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/pdf/pdf-command.directive.mjs +27 -17
- package/esm2022/rendering/cell.component.mjs +411 -365
- package/esm2022/rendering/common/col-group.component.mjs +25 -15
- package/esm2022/rendering/common/loading.component.mjs +23 -19
- package/esm2022/rendering/details/detail-template.directive.mjs +6 -4
- package/esm2022/rendering/footer/footer.component.mjs +128 -112
- package/esm2022/rendering/header/header.component.mjs +412 -351
- package/esm2022/rendering/list.component.mjs +225 -202
- package/esm2022/rendering/table-body.component.mjs +553 -493
- package/esm2022/rendering/toolbar/toolbar.component.mjs +13 -11
- package/esm2022/rendering/toolbar/tools/ai-assistant/ai-assistant.component.mjs +86 -79
- package/esm2022/rendering/toolbar/tools/filter-toolbar-tool.component.mjs +54 -51
- package/esm2022/rendering/toolbar/tools/group-toolbar-tool.component.mjs +138 -115
- package/esm2022/rendering/toolbar/tools/sort-toolbar-tool.component.mjs +72 -65
- package/fesm2022/progress-kendo-angular-grid.mjs +6426 -5525
- package/package.json +24 -24
- package/rendering/details/detail-template.directive.d.ts +6 -4
- package/schematics/ngAdd/index.js +11 -7
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, ElementRef, EventEmitter, HostBinding, Output, Input, HostListener, ViewChildren, QueryList, NgZone } from '@angular/core';
|
|
6
|
-
import { NgFor, NgIf } from '@angular/common';
|
|
7
6
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
8
7
|
import { chevronUpIcon, chevronDownIcon, xCircleIcon, plusCircleIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
9
8
|
import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
|
|
@@ -230,179 +229,203 @@ export class GroupToolbarToolComponent {
|
|
|
230
229
|
}
|
|
231
230
|
}
|
|
232
231
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
234
|
-
|
|
235
|
-
|
|
232
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GroupToolbarToolComponent, isStandalone: true, selector: "kendo-group-toolbar-tool", inputs: { adaptive: "adaptive" }, outputs: { close: "close", groupClear: "groupClear" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-group-menu": "this.hostClass", "class.k-group-menu-lg": "this.lgClass", "class.k-group-menu-md": "this.mdClass" } }, viewQueries: [{ propertyName: "groupItems", predicate: ["groupItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
233
|
+
@if (groupedColumns.length) {
|
|
234
|
+
<div class="k-group-menu-item-wrap">
|
|
235
|
+
@for (column of groupedColumns; track column; let i = $index) {
|
|
236
|
+
<div
|
|
236
237
|
#groupItem
|
|
237
238
|
role="button"
|
|
238
239
|
class="k-group-menu-item"
|
|
239
240
|
tabindex="0"
|
|
240
241
|
(keydown)="handleGroupedKeydown(column, i, $event)"
|
|
241
242
|
(focus)="onItemFocus(i, 0)"
|
|
242
|
-
|
|
243
|
-
|
|
243
|
+
>
|
|
244
|
+
@if (groupedColumns.length > 1) {
|
|
245
|
+
<span class="k-group-menu-item-actions">
|
|
244
246
|
<span
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
247
|
+
class="k-group-menu-item-action k-group-menu-item-up-action"
|
|
248
|
+
(click)="moveGroupUp(column, $event)"
|
|
249
|
+
[attr.aria-disabled]="i === 0"
|
|
250
|
+
[class.k-disabled]="i === 0"
|
|
251
|
+
>
|
|
252
|
+
<kendo-icon-wrapper
|
|
253
|
+
name="arrow-chevron-up"
|
|
254
|
+
[svgIcon]="upIcon"
|
|
255
|
+
[size]="iconSize"
|
|
256
|
+
></kendo-icon-wrapper>
|
|
255
257
|
</span>
|
|
256
258
|
<span
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
259
|
+
class="k-group-menu-item-action k-group-menu-item-down-action"
|
|
260
|
+
(click)="moveGroupDown(column, $event)"
|
|
261
|
+
[attr.aria-disabled]="i === groupedColumns.length - 1"
|
|
262
|
+
[class.k-disabled]="i === groupedColumns.length - 1"
|
|
263
|
+
>
|
|
264
|
+
<kendo-icon-wrapper
|
|
265
|
+
name="arrow-chevron-down"
|
|
266
|
+
[svgIcon]="downIcon"
|
|
267
|
+
[size]="iconSize"
|
|
268
|
+
></kendo-icon-wrapper>
|
|
267
269
|
</span>
|
|
268
|
-
|
|
270
|
+
</span>
|
|
271
|
+
}
|
|
269
272
|
<span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
|
|
270
273
|
<span class="k-spacer"></span>
|
|
271
274
|
<span class="k-group-menu-item-actions">
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
275
|
+
<span class="k-group-menu-item-action k-group-menu-item-remove-action" (click)="removeGroup(column, $event)">
|
|
276
|
+
<kendo-icon-wrapper
|
|
277
|
+
name="x-circle"
|
|
278
|
+
[svgIcon]="removeIcon"
|
|
279
|
+
[size]="iconSize"
|
|
280
|
+
></kendo-icon-wrapper>
|
|
281
|
+
</span>
|
|
279
282
|
</span>
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
283
|
+
</div>
|
|
284
|
+
}
|
|
285
|
+
</div>
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
@if (ungroupedColumns.length) {
|
|
289
|
+
<div class="k-group-menu-item-wrap">
|
|
290
|
+
@for (column of ungroupedColumns; track column; let i = $index) {
|
|
291
|
+
<div
|
|
285
292
|
#groupItem
|
|
286
293
|
role="button"
|
|
287
294
|
class="k-group-menu-item"
|
|
288
295
|
tabindex="0"
|
|
289
296
|
(keydown)="handleUngroupedKeydown(column, i, $event)"
|
|
290
297
|
(focus)="onItemFocus(null, i)"
|
|
291
|
-
|
|
298
|
+
>
|
|
292
299
|
<span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
|
|
293
300
|
<span class="k-spacer"></span>
|
|
294
301
|
<span class="k-group-menu-item-actions">
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
+
<span class="k-group-menu-item-action k-group-menu-item-add-action" (click)="addGroup(column, $event)">
|
|
303
|
+
<kendo-icon-wrapper
|
|
304
|
+
name="plus-circle"
|
|
305
|
+
[svgIcon]="addIcon"
|
|
306
|
+
[size]="iconSize"
|
|
307
|
+
></kendo-icon-wrapper>
|
|
308
|
+
</span>
|
|
302
309
|
</span>
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
310
|
+
</div>
|
|
311
|
+
}
|
|
312
|
+
</div>
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
@if (!adaptive) {
|
|
316
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
|
|
307
317
|
<button kendoButton
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
318
|
+
[svgIcon]="clearIcon"
|
|
319
|
+
(click)="clear()"
|
|
320
|
+
icon="x"
|
|
321
|
+
>
|
|
322
|
+
{{ctx?.localization.get('groupClearButton')}}
|
|
313
323
|
</button>
|
|
314
|
-
|
|
315
|
-
|
|
324
|
+
</div>
|
|
325
|
+
}
|
|
326
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
316
327
|
}
|
|
317
328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GroupToolbarToolComponent, decorators: [{
|
|
318
329
|
type: Component,
|
|
319
330
|
args: [{
|
|
320
331
|
selector: 'kendo-group-toolbar-tool',
|
|
321
332
|
template: `
|
|
322
|
-
|
|
323
|
-
|
|
333
|
+
@if (groupedColumns.length) {
|
|
334
|
+
<div class="k-group-menu-item-wrap">
|
|
335
|
+
@for (column of groupedColumns; track column; let i = $index) {
|
|
336
|
+
<div
|
|
324
337
|
#groupItem
|
|
325
338
|
role="button"
|
|
326
339
|
class="k-group-menu-item"
|
|
327
340
|
tabindex="0"
|
|
328
341
|
(keydown)="handleGroupedKeydown(column, i, $event)"
|
|
329
342
|
(focus)="onItemFocus(i, 0)"
|
|
330
|
-
|
|
331
|
-
|
|
343
|
+
>
|
|
344
|
+
@if (groupedColumns.length > 1) {
|
|
345
|
+
<span class="k-group-menu-item-actions">
|
|
332
346
|
<span
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
347
|
+
class="k-group-menu-item-action k-group-menu-item-up-action"
|
|
348
|
+
(click)="moveGroupUp(column, $event)"
|
|
349
|
+
[attr.aria-disabled]="i === 0"
|
|
350
|
+
[class.k-disabled]="i === 0"
|
|
351
|
+
>
|
|
352
|
+
<kendo-icon-wrapper
|
|
353
|
+
name="arrow-chevron-up"
|
|
354
|
+
[svgIcon]="upIcon"
|
|
355
|
+
[size]="iconSize"
|
|
356
|
+
></kendo-icon-wrapper>
|
|
343
357
|
</span>
|
|
344
358
|
<span
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
359
|
+
class="k-group-menu-item-action k-group-menu-item-down-action"
|
|
360
|
+
(click)="moveGroupDown(column, $event)"
|
|
361
|
+
[attr.aria-disabled]="i === groupedColumns.length - 1"
|
|
362
|
+
[class.k-disabled]="i === groupedColumns.length - 1"
|
|
363
|
+
>
|
|
364
|
+
<kendo-icon-wrapper
|
|
365
|
+
name="arrow-chevron-down"
|
|
366
|
+
[svgIcon]="downIcon"
|
|
367
|
+
[size]="iconSize"
|
|
368
|
+
></kendo-icon-wrapper>
|
|
355
369
|
</span>
|
|
356
|
-
|
|
370
|
+
</span>
|
|
371
|
+
}
|
|
357
372
|
<span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
|
|
358
373
|
<span class="k-spacer"></span>
|
|
359
374
|
<span class="k-group-menu-item-actions">
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
375
|
+
<span class="k-group-menu-item-action k-group-menu-item-remove-action" (click)="removeGroup(column, $event)">
|
|
376
|
+
<kendo-icon-wrapper
|
|
377
|
+
name="x-circle"
|
|
378
|
+
[svgIcon]="removeIcon"
|
|
379
|
+
[size]="iconSize"
|
|
380
|
+
></kendo-icon-wrapper>
|
|
381
|
+
</span>
|
|
367
382
|
</span>
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
383
|
+
</div>
|
|
384
|
+
}
|
|
385
|
+
</div>
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
@if (ungroupedColumns.length) {
|
|
389
|
+
<div class="k-group-menu-item-wrap">
|
|
390
|
+
@for (column of ungroupedColumns; track column; let i = $index) {
|
|
391
|
+
<div
|
|
373
392
|
#groupItem
|
|
374
393
|
role="button"
|
|
375
394
|
class="k-group-menu-item"
|
|
376
395
|
tabindex="0"
|
|
377
396
|
(keydown)="handleUngroupedKeydown(column, i, $event)"
|
|
378
397
|
(focus)="onItemFocus(null, i)"
|
|
379
|
-
|
|
398
|
+
>
|
|
380
399
|
<span class="k-group-item-text">{{column.title || getColumnComponent(column).field}}</span>
|
|
381
400
|
<span class="k-spacer"></span>
|
|
382
401
|
<span class="k-group-menu-item-actions">
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
402
|
+
<span class="k-group-menu-item-action k-group-menu-item-add-action" (click)="addGroup(column, $event)">
|
|
403
|
+
<kendo-icon-wrapper
|
|
404
|
+
name="plus-circle"
|
|
405
|
+
[svgIcon]="addIcon"
|
|
406
|
+
[size]="iconSize"
|
|
407
|
+
></kendo-icon-wrapper>
|
|
408
|
+
</span>
|
|
390
409
|
</span>
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
410
|
+
</div>
|
|
411
|
+
}
|
|
412
|
+
</div>
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
@if (!adaptive) {
|
|
416
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
|
|
395
417
|
<button kendoButton
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
418
|
+
[svgIcon]="clearIcon"
|
|
419
|
+
(click)="clear()"
|
|
420
|
+
icon="x"
|
|
421
|
+
>
|
|
422
|
+
{{ctx?.localization.get('groupClearButton')}}
|
|
401
423
|
</button>
|
|
402
|
-
|
|
403
|
-
|
|
424
|
+
</div>
|
|
425
|
+
}
|
|
426
|
+
`,
|
|
404
427
|
standalone: true,
|
|
405
|
-
imports: [
|
|
428
|
+
imports: [IconWrapperComponent, KENDO_BUTTON]
|
|
406
429
|
}]
|
|
407
430
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { hostClass: [{
|
|
408
431
|
type: HostBinding,
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, ElementRef, EventEmitter, HostBinding, Output, HostListener, ViewChildren, QueryList, NgZone } from '@angular/core';
|
|
6
|
-
import { NgFor, NgIf } from '@angular/common';
|
|
7
6
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
8
7
|
import { sortAscSmallIcon, sortDescSmallIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
9
8
|
import { isPresent } from '@progress/kendo-angular-common';
|
|
@@ -137,43 +136,47 @@ export class SortToolbarToolComponent {
|
|
|
137
136
|
this.sortClear.emit();
|
|
138
137
|
}
|
|
139
138
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SortToolbarToolComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SortToolbarToolComponent, isStandalone: true, selector: "kendo-sort-toolbar-tool", outputs: { close: "close", sortClear: "sortClear" }, host: { listeners: { "keydown.escape": "onEscKeyDown($event)" }, properties: { "class.k-column-menu": "this.wrapperClasses", "class.k-column-menu-md": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "sortItems", predicate: ["sortItem"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
141
140
|
<div
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
141
|
+
class="k-column-menu-item-wrapper"
|
|
142
|
+
[style.max-height.px]="200"
|
|
143
|
+
[style.overflow-x]="'hidden'"
|
|
144
|
+
[style.overflow-y]="'auto'"
|
|
145
|
+
>
|
|
146
|
+
@for (column of columns; track column) {
|
|
147
|
+
<div
|
|
148
|
+
#sortItem
|
|
149
|
+
role="button"
|
|
150
|
+
class="k-columnmenu-item"
|
|
151
|
+
(click)="toggleSort(column, $event)"
|
|
152
|
+
(keydown.enter)="toggleSort(column, $event)"
|
|
153
|
+
[tabindex]="'0'"
|
|
154
|
+
>
|
|
155
|
+
{{column.title || getColumnComponent(column).field}}
|
|
156
|
+
<span class="k-columnmenu-indicators">
|
|
157
|
+
@if (sortDescriptor(getColumnComponent(column).field).dir) {
|
|
158
|
+
<kendo-icon-wrapper
|
|
159
|
+
name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
|
|
160
|
+
[svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
|
|
161
|
+
></kendo-icon-wrapper>
|
|
162
|
+
}
|
|
163
|
+
@if (showSortNumbering(getColumnComponent(column))) {
|
|
164
|
+
<span class="k-sort-index">{{sortOrder(getColumnComponent(column).field)}}</span>
|
|
165
|
+
}
|
|
166
|
+
</span>
|
|
165
167
|
</div>
|
|
168
|
+
}
|
|
166
169
|
</div>
|
|
167
|
-
|
|
170
|
+
|
|
168
171
|
<div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
172
|
+
<button kendoButton
|
|
173
|
+
[svgIcon]="clearIcon"
|
|
174
|
+
icon="x"
|
|
175
|
+
(click)="clearSorting()">
|
|
176
|
+
{{ctx?.localization.get('sortClearButton')}}
|
|
177
|
+
</button>
|
|
175
178
|
</div>
|
|
176
|
-
|
|
179
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
177
180
|
}
|
|
178
181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SortToolbarToolComponent, decorators: [{
|
|
179
182
|
type: Component,
|
|
@@ -181,43 +184,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
181
184
|
selector: 'kendo-sort-toolbar-tool',
|
|
182
185
|
template: `
|
|
183
186
|
<div
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
187
|
+
class="k-column-menu-item-wrapper"
|
|
188
|
+
[style.max-height.px]="200"
|
|
189
|
+
[style.overflow-x]="'hidden'"
|
|
190
|
+
[style.overflow-y]="'auto'"
|
|
191
|
+
>
|
|
192
|
+
@for (column of columns; track column) {
|
|
193
|
+
<div
|
|
194
|
+
#sortItem
|
|
195
|
+
role="button"
|
|
196
|
+
class="k-columnmenu-item"
|
|
197
|
+
(click)="toggleSort(column, $event)"
|
|
198
|
+
(keydown.enter)="toggleSort(column, $event)"
|
|
199
|
+
[tabindex]="'0'"
|
|
200
|
+
>
|
|
201
|
+
{{column.title || getColumnComponent(column).field}}
|
|
202
|
+
<span class="k-columnmenu-indicators">
|
|
203
|
+
@if (sortDescriptor(getColumnComponent(column).field).dir) {
|
|
204
|
+
<kendo-icon-wrapper
|
|
205
|
+
name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
|
|
206
|
+
[svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
|
|
207
|
+
></kendo-icon-wrapper>
|
|
208
|
+
}
|
|
209
|
+
@if (showSortNumbering(getColumnComponent(column))) {
|
|
210
|
+
<span class="k-sort-index">{{sortOrder(getColumnComponent(column).field)}}</span>
|
|
211
|
+
}
|
|
212
|
+
</span>
|
|
207
213
|
</div>
|
|
214
|
+
}
|
|
208
215
|
</div>
|
|
209
|
-
|
|
216
|
+
|
|
210
217
|
<div class="k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer">
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
218
|
+
<button kendoButton
|
|
219
|
+
[svgIcon]="clearIcon"
|
|
220
|
+
icon="x"
|
|
221
|
+
(click)="clearSorting()">
|
|
222
|
+
{{ctx?.localization.get('sortClearButton')}}
|
|
223
|
+
</button>
|
|
217
224
|
</div>
|
|
218
|
-
|
|
225
|
+
`,
|
|
219
226
|
standalone: true,
|
|
220
|
-
imports: [
|
|
227
|
+
imports: [IconWrapperComponent, KENDO_BUTTON]
|
|
221
228
|
}]
|
|
222
229
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { sortItems: [{
|
|
223
230
|
type: ViewChildren,
|