@progress/kendo-angular-grid 21.1.1-develop.2 → 21.2.0-develop.2

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 (48) hide show
  1. package/esm2022/adaptiveness/adaptive-renderer.component.mjs +850 -756
  2. package/esm2022/aggregates/status-bar.component.mjs +13 -11
  3. package/esm2022/column-menu/column-chooser-content.component.mjs +133 -123
  4. package/esm2022/column-menu/column-list.component.mjs +62 -59
  5. package/esm2022/column-menu/column-menu-autosize-all.component.mjs +12 -11
  6. package/esm2022/column-menu/column-menu-autosize.component.mjs +12 -11
  7. package/esm2022/column-menu/column-menu-item.component.mjs +221 -85
  8. package/esm2022/column-menu/column-menu-position.component.mjs +46 -43
  9. package/esm2022/column-menu/column-menu.component.mjs +401 -315
  10. package/esm2022/editing/add-command.directive.mjs +27 -17
  11. package/esm2022/editing/cancel-command.directive.mjs +27 -17
  12. package/esm2022/editing/edit-command.directive.mjs +27 -17
  13. package/esm2022/editing/form/form-formfield.component.mjs +97 -70
  14. package/esm2022/editing/form/form.component.mjs +77 -61
  15. package/esm2022/editing/remove-command.directive.mjs +27 -17
  16. package/esm2022/editing/save-command.directive.mjs +27 -17
  17. package/esm2022/excel/excel-command.directive.mjs +27 -17
  18. package/esm2022/filtering/cell/filter-cell-operators.component.mjs +20 -17
  19. package/esm2022/filtering/cell/filter-cell.component.mjs +35 -33
  20. package/esm2022/filtering/filter-row.component.mjs +37 -29
  21. package/esm2022/filtering/menu/boolean-filter-menu.component.mjs +34 -31
  22. package/esm2022/filtering/menu/date-filter-menu.component.mjs +52 -49
  23. package/esm2022/filtering/menu/filter-menu-container.component.mjs +97 -89
  24. package/esm2022/filtering/menu/numeric-filter-menu.component.mjs +50 -47
  25. package/esm2022/filtering/menu/string-filter-menu.component.mjs +36 -33
  26. package/esm2022/filtering/multicheckbox-filter.component.mjs +54 -43
  27. package/esm2022/grid.component.mjs +1579 -1483
  28. package/esm2022/grouping/group-header.component.mjs +113 -89
  29. package/esm2022/grouping/group-panel.component.mjs +82 -75
  30. package/esm2022/package-metadata.mjs +2 -2
  31. package/esm2022/pdf/pdf-command.directive.mjs +27 -17
  32. package/esm2022/rendering/cell.component.mjs +411 -365
  33. package/esm2022/rendering/common/col-group.component.mjs +25 -15
  34. package/esm2022/rendering/common/loading.component.mjs +23 -19
  35. package/esm2022/rendering/details/detail-template.directive.mjs +6 -4
  36. package/esm2022/rendering/footer/footer.component.mjs +128 -112
  37. package/esm2022/rendering/header/header.component.mjs +412 -351
  38. package/esm2022/rendering/list.component.mjs +225 -202
  39. package/esm2022/rendering/table-body.component.mjs +553 -493
  40. package/esm2022/rendering/toolbar/toolbar.component.mjs +13 -11
  41. package/esm2022/rendering/toolbar/tools/ai-assistant/ai-assistant.component.mjs +86 -79
  42. package/esm2022/rendering/toolbar/tools/filter-toolbar-tool.component.mjs +54 -51
  43. package/esm2022/rendering/toolbar/tools/group-toolbar-tool.component.mjs +138 -115
  44. package/esm2022/rendering/toolbar/tools/sort-toolbar-tool.component.mjs +72 -65
  45. package/fesm2022/progress-kendo-angular-grid.mjs +6426 -5525
  46. package/package.json +24 -24
  47. package/rendering/details/detail-template.directive.d.ts +6 -4
  48. package/schematics/ngAdd/index.js +7 -7
package/esm2022/rendering/cell.component.mjs CHANGED
@@ -18,7 +18,7 @@ import { FieldAccessorPipe } from './common/field-accessor.pipe';
18
18
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
19
19
  import { SelectionCheckboxDirective } from '../selection/selection-checkbox.directive';
20
20
  import { FocusableDirective } from '../navigation/focusable.directive';
21
- import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, NgSwitchDefault, NgClass, NgStyle } from '@angular/common';
21
+ import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
22
22
  import { CheckBoxComponent, NumericTextBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
23
23
  import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
24
24
  import { TemplateContextDirective } from '@progress/kendo-angular-common';
@@ -214,420 +214,466 @@ export class CellComponent {
214
214
  }
215
215
  }
216
216
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.IdService }, { token: i3.ContextService }, { token: i4.DetailsService }, { token: i5.LocalizationService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
217
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columns: "columns", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", detailTemplate: "detailTemplate", item: "item", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
218
- <ng-container *ngIf="isStackedLayoutMode">
217
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columns: "columns", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", detailTemplate: "detailTemplate", item: "item", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
218
+ @if (isStackedLayoutMode) {
219
219
  <div class="k-grid-stack-row"
220
220
  [ngClass]="stackedRowClass"
221
221
  [ngStyle]="stackedRowStyle">
222
- <div class="k-grid-stack-cell" *ngFor="let col of columns"
223
- [class.k-grid-stack-edit-cell]="isEdited(col)"
224
- [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
225
- [class.k-command-cell]="isCommand(col)"
226
- [kendoGridFocusable]="!isCommand(col)">
227
- <div class="k-grid-stack-header">
228
- <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
229
- {{col.displayTitle}}
230
- </ng-container>
231
-
232
- <ng-template #headerTemplate
233
- [templateContext]="{
234
- templateRef: col.headerTemplateRef,
235
- columnIndex: col.leafIndex,
236
- column: col,
237
- $implicit: col
238
- }">
239
- </ng-template>
240
- </div>
241
- <div class="k-grid-stack-content">
242
- <ng-container *ngIf="!isEdited(col)">
243
- <ng-container *ngIf="!col.templateRef; else template">
244
- <ng-container *ngIf="isBoundColumn(col)">{{ dataItem | valueOf: col.field: col.format}}</ng-container>
245
- <ng-container *ngIf="isCheckboxColumn(col) && !isNew">
246
- <ng-container *ngIf="isRowSelectable(col); else nonSelectableRow">
247
- <kendo-checkbox
248
- [kendoGridSelectionCheckbox]="rowIndex"
249
- [attr.id]="selectionCheckboxId"
250
- [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
251
- [title]="selectionCheckboxLabel">
252
- </kendo-checkbox>
253
- </ng-container>
254
- <ng-template #nonSelectableRow>
255
- <kendo-checkbox *ngIf="col.showDisabledCheckbox"
256
- [kendoGridSelectionCheckbox]="rowIndex"
257
- [attr.id]="selectionCheckboxId"
258
- [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
259
- [title]="selectionCheckboxLabel"
260
- [disabled]="true"
261
- ></kendo-checkbox>
222
+ @for (col of columns; track $index) {
223
+ <div class="k-grid-stack-cell"
224
+ [class.k-grid-stack-edit-cell]="isEdited(col)"
225
+ [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
226
+ [class.k-command-cell]="isCommand(col)"
227
+ [kendoGridFocusable]="!isCommand(col)">
228
+ <div class="k-grid-stack-header">
229
+ @if (!col.headerTemplateRef) {
230
+ {{col.displayTitle}}
231
+ } @else {
232
+ <ng-template #headerTemplate
233
+ [templateContext]="{
234
+ templateRef: col.headerTemplateRef,
235
+ columnIndex: col.leafIndex,
236
+ column: col,
237
+ $implicit: col
238
+ }">
239
+ </ng-template>
240
+ }
241
+ </div>
242
+ <div class="k-grid-stack-content">
243
+ @if (!isEdited(col)) {
244
+ @if (!col.templateRef) {
245
+ @if (isBoundColumn(col)) {{{ dataItem | valueOf: col.field: col.format}}}
246
+ @if (isCheckboxColumn(col) && !isNew) {
247
+ @if (isRowSelectable(col)) {
248
+ <kendo-checkbox
249
+ [kendoGridSelectionCheckbox]="rowIndex"
250
+ [attr.id]="selectionCheckboxId"
251
+ [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
252
+ [title]="selectionCheckboxLabel">
253
+ </kendo-checkbox>
254
+ } @else {
255
+ @if (col.showDisabledCheckbox) {
256
+ <kendo-checkbox
257
+ [kendoGridSelectionCheckbox]="rowIndex"
258
+ [attr.id]="selectionCheckboxId"
259
+ [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
260
+ [title]="selectionCheckboxLabel"
261
+ [disabled]="true"
262
+ ></kendo-checkbox>
263
+ }
264
+ }
265
+ }
266
+ @if (isRowReorderColumn(col) && !isNew) {
267
+ @if (!col.dragHandleTemplate?.first) {
268
+ <kendo-icon-wrapper
269
+ name="reorder"
270
+ [svgIcon]="reorderIcon">
271
+ </kendo-icon-wrapper>
272
+ } @else {
273
+ <ng-template
274
+ [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
275
+ [ngTemplateOutletContext]="rowReorderTemplateContext">
276
+ </ng-template>
277
+ }
278
+ }
279
+ } @else {
280
+ <ng-template #template
281
+ [ngTemplateOutlet]="col.templateRef"
282
+ [ngTemplateOutletContext]="getTemplateContext(col)">
262
283
  </ng-template>
263
- </ng-container>
264
- <ng-container *ngIf="isRowReorderColumn(col) && !isNew">
265
- <kendo-icon-wrapper *ngIf="!col.dragHandleTemplate?.first"
266
- name="reorder"
267
- [svgIcon]="reorderIcon">
268
- </kendo-icon-wrapper>
269
- <ng-template *ngIf="col.dragHandleTemplate?.first"
270
- [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
271
- [ngTemplateOutletContext]="rowReorderTemplateContext">
284
+ }
285
+ }
286
+ @if (isEdited(col)) {
287
+ @if (!col.editTemplateRef) {
288
+ @switch (col.editor) {
289
+ @case ('numeric') {
290
+ <kendo-numerictextbox
291
+ [format]="format"
292
+ [formControl]="$any(formGroup.get(col.field))"
293
+ kendoGridFocusable
294
+ ></kendo-numerictextbox>
295
+ }
296
+ @case ('date') {
297
+ <kendo-datepicker
298
+ [format]="format"
299
+ [formControl]="$any(formGroup.get(col.field))"
300
+ kendoGridFocusable
301
+ ></kendo-datepicker>
302
+ }
303
+ @case ('boolean') {
304
+ <kendo-checkbox
305
+ [formControl]="$any(formGroup.get(col.field))"
306
+ kendoGridFocusable
307
+ ></kendo-checkbox>
308
+ }
309
+ @default {
310
+ <kendo-textbox
311
+ [formControl]="$any(formGroup.get(col.field))"
312
+ kendoGridFocusable
313
+ ></kendo-textbox>
314
+ }
315
+ }
316
+ } @else {
317
+ <ng-template
318
+ [ngTemplateOutlet]="col.editTemplateRef"
319
+ [ngTemplateOutletContext]="getEditTemplateContext(col)">
272
320
  </ng-template>
273
- </ng-container>
274
- </ng-container>
275
- <ng-template #template
276
- [ngTemplateOutlet]="col.templateRef"
277
- [ngTemplateOutletContext]="getTemplateContext(col)">
321
+ }
322
+ }
323
+ </div>
324
+ </div>
325
+ }
326
+ @if (detailTemplate?.showIf(item.data, $any(item).index)) {
327
+ <div class="k-grid-stack-cell" [attr.aria-expanded]="item.isExpanded">
328
+ <div class="k-grid-stack-content">
329
+ <button kendoButton
330
+ fillMode="flat"
331
+ themeColor="primary"
332
+ [icon]="detailButtonIconName(item)"
333
+ [svgIcon]="detailButtonSvgIcon(item)"
334
+ (click)="toggleRow($any(item).index, item.data)">
335
+ {{ detailButtonText(item) }}
336
+ </button>
337
+ </div>
338
+ </div>
339
+ }
340
+ </div>
341
+ }
342
+
343
+ @if (!isStackedLayoutMode) {
344
+ @switch (isEdited()) {
345
+ @case (false) {
346
+ @if (!showLoading) {
347
+ @if (column.templateRef) {
348
+ <ng-template
349
+ [ngTemplateOutlet]="column.templateRef"
350
+ [ngTemplateOutletContext]="getTemplateContext()">
351
+ </ng-template>
352
+ }
353
+ @if (isSpanColumn) {
354
+ @for (childColumn of children; track $index) {
355
+ {{ dataItem | valueOf: childColumn.field: childColumn.format}}
356
+ }
357
+ }
358
+ @if (isBoundColumn()) {{{ dataItem | valueOf: column.field: column.format}}}
359
+ @if (isCheckboxColumn() && !isNew) {
360
+ @if (isRowSelectable()) {
361
+ <kendo-checkbox
362
+ [kendoGridSelectionCheckbox]="rowIndex"
363
+ [attr.id]="selectionCheckboxId"
364
+ [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
365
+ [title]="selectionCheckboxLabel">
366
+ </kendo-checkbox>
367
+ } @else {
368
+ @if (column.showDisabledCheckbox) {
369
+ <kendo-checkbox
370
+ [kendoGridSelectionCheckbox]="rowIndex"
371
+ [attr.id]="selectionCheckboxId"
372
+ [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
373
+ [title]="selectionCheckboxLabel"
374
+ [disabled]="true"
375
+ ></kendo-checkbox>
376
+ }
377
+ }
378
+ }
379
+ @if (isRowReorderColumn() && !isNew) {
380
+ @if (!column.dragHandleTemplate?.first) {
381
+ <kendo-icon-wrapper
382
+ name="reorder"
383
+ [svgIcon]="reorderIcon">
384
+ </kendo-icon-wrapper>
385
+ } @else {
386
+ <ng-template
387
+ [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
388
+ [ngTemplateOutletContext]="rowReorderTemplateContext">
389
+ </ng-template>
390
+ }
391
+ }
392
+ } @else {
393
+ @if (loadingTemplate) {
394
+ <ng-template
395
+ [ngTemplateOutlet]="loadingTemplate"
396
+ [ngTemplateOutletContext]="{$implicit: column}">
278
397
  </ng-template>
279
- </ng-container>
280
- <ng-container *ngIf="isEdited(col)">
281
- <ng-container [ngSwitch]="col.editor" *ngIf="!col.editTemplateRef">
398
+ } @else {
399
+ <div class="k-skeleton-text k-skeleton"></div>
400
+ }
401
+ }
402
+ }
403
+ @case (true) {
404
+ @if (column.editTemplateRef) {
405
+ <ng-template
406
+ [ngTemplateOutlet]="column.editTemplateRef"
407
+ [ngTemplateOutletContext]="getEditTemplateContext()">
408
+ </ng-template>
409
+ } @else {
410
+ @switch (column.editor) {
411
+ @case ('numeric') {
282
412
  <kendo-numerictextbox
283
- *ngSwitchCase="'numeric'"
284
413
  [format]="format"
285
- [formControl]="$any(formGroup.get(col.field))"
414
+ [formControl]="$any(formGroup.get(column.field))"
286
415
  kendoGridFocusable
287
416
  ></kendo-numerictextbox>
288
-
417
+ }
418
+ @case ('date') {
289
419
  <kendo-datepicker
290
- *ngSwitchCase="'date'"
291
420
  [format]="format"
292
- [formControl]="$any(formGroup.get(col.field))"
421
+ [formControl]="$any(formGroup.get(column.field))"
293
422
  kendoGridFocusable
294
423
  ></kendo-datepicker>
295
-
424
+ }
425
+ @case ('boolean') {
296
426
  <kendo-checkbox
297
- *ngSwitchCase="'boolean'"
298
- [formControl]="$any(formGroup.get(col.field))"
427
+ [formControl]="$any(formGroup.get(column.field))"
299
428
  kendoGridFocusable
300
429
  ></kendo-checkbox>
301
-
430
+ }
431
+ @default {
302
432
  <kendo-textbox
303
- *ngSwitchDefault
304
- [formControl]="$any(formGroup.get(col.field))"
433
+ [formControl]="$any(formGroup.get(column.field))"
305
434
  kendoGridFocusable
306
435
  ></kendo-textbox>
307
- </ng-container>
308
- <ng-template *ngIf="col.editTemplateRef"
309
- [ngTemplateOutlet]="col.editTemplateRef"
310
- [ngTemplateOutletContext]="getEditTemplateContext(col)">
311
- </ng-template>
312
- </ng-container>
436
+ }
437
+ }
438
+ }
439
+ }
440
+ }
441
+ }
442
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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"] }] });
443
+ }
444
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellComponent, decorators: [{
445
+ type: Component,
446
+ args: [{
447
+ selector: '[kendoGridCell]',
448
+ template: `
449
+ @if (isStackedLayoutMode) {
450
+ <div class="k-grid-stack-row"
451
+ [ngClass]="stackedRowClass"
452
+ [ngStyle]="stackedRowStyle">
453
+ @for (col of columns; track $index) {
454
+ <div class="k-grid-stack-cell"
455
+ [class.k-grid-stack-edit-cell]="isEdited(col)"
456
+ [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
457
+ [class.k-command-cell]="isCommand(col)"
458
+ [kendoGridFocusable]="!isCommand(col)">
459
+ <div class="k-grid-stack-header">
460
+ @if (!col.headerTemplateRef) {
461
+ {{col.displayTitle}}
462
+ } @else {
463
+ <ng-template #headerTemplate
464
+ [templateContext]="{
465
+ templateRef: col.headerTemplateRef,
466
+ columnIndex: col.leafIndex,
467
+ column: col,
468
+ $implicit: col
469
+ }">
470
+ </ng-template>
471
+ }
472
+ </div>
473
+ <div class="k-grid-stack-content">
474
+ @if (!isEdited(col)) {
475
+ @if (!col.templateRef) {
476
+ @if (isBoundColumn(col)) {{{ dataItem | valueOf: col.field: col.format}}}
477
+ @if (isCheckboxColumn(col) && !isNew) {
478
+ @if (isRowSelectable(col)) {
479
+ <kendo-checkbox
480
+ [kendoGridSelectionCheckbox]="rowIndex"
481
+ [attr.id]="selectionCheckboxId"
482
+ [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
483
+ [title]="selectionCheckboxLabel">
484
+ </kendo-checkbox>
485
+ } @else {
486
+ @if (col.showDisabledCheckbox) {
487
+ <kendo-checkbox
488
+ [kendoGridSelectionCheckbox]="rowIndex"
489
+ [attr.id]="selectionCheckboxId"
490
+ [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
491
+ [title]="selectionCheckboxLabel"
492
+ [disabled]="true"
493
+ ></kendo-checkbox>
494
+ }
495
+ }
496
+ }
497
+ @if (isRowReorderColumn(col) && !isNew) {
498
+ @if (!col.dragHandleTemplate?.first) {
499
+ <kendo-icon-wrapper
500
+ name="reorder"
501
+ [svgIcon]="reorderIcon">
502
+ </kendo-icon-wrapper>
503
+ } @else {
504
+ <ng-template
505
+ [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
506
+ [ngTemplateOutletContext]="rowReorderTemplateContext">
507
+ </ng-template>
508
+ }
509
+ }
510
+ } @else {
511
+ <ng-template #template
512
+ [ngTemplateOutlet]="col.templateRef"
513
+ [ngTemplateOutletContext]="getTemplateContext(col)">
514
+ </ng-template>
515
+ }
516
+ }
517
+ @if (isEdited(col)) {
518
+ @if (!col.editTemplateRef) {
519
+ @switch (col.editor) {
520
+ @case ('numeric') {
521
+ <kendo-numerictextbox
522
+ [format]="format"
523
+ [formControl]="$any(formGroup.get(col.field))"
524
+ kendoGridFocusable
525
+ ></kendo-numerictextbox>
526
+ }
527
+ @case ('date') {
528
+ <kendo-datepicker
529
+ [format]="format"
530
+ [formControl]="$any(formGroup.get(col.field))"
531
+ kendoGridFocusable
532
+ ></kendo-datepicker>
533
+ }
534
+ @case ('boolean') {
535
+ <kendo-checkbox
536
+ [formControl]="$any(formGroup.get(col.field))"
537
+ kendoGridFocusable
538
+ ></kendo-checkbox>
539
+ }
540
+ @default {
541
+ <kendo-textbox
542
+ [formControl]="$any(formGroup.get(col.field))"
543
+ kendoGridFocusable
544
+ ></kendo-textbox>
545
+ }
546
+ }
547
+ } @else {
548
+ <ng-template
549
+ [ngTemplateOutlet]="col.editTemplateRef"
550
+ [ngTemplateOutletContext]="getEditTemplateContext(col)">
551
+ </ng-template>
552
+ }
553
+ }
554
+ </div>
313
555
  </div>
314
- </div>
315
- <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)" [attr.aria-expanded]="item.isExpanded">
316
- <div class="k-grid-stack-content">
317
- <button kendoButton
318
- fillMode="flat"
319
- themeColor="primary"
320
- [icon]="detailButtonIconName(item)"
321
- [svgIcon]="detailButtonSvgIcon(item)"
322
- (click)="toggleRow($any(item).index, item.data)">
323
- {{ detailButtonText(item) }}
324
- </button>
556
+ }
557
+ @if (detailTemplate?.showIf(item.data, $any(item).index)) {
558
+ <div class="k-grid-stack-cell" [attr.aria-expanded]="item.isExpanded">
559
+ <div class="k-grid-stack-content">
560
+ <button kendoButton
561
+ fillMode="flat"
562
+ themeColor="primary"
563
+ [icon]="detailButtonIconName(item)"
564
+ [svgIcon]="detailButtonSvgIcon(item)"
565
+ (click)="toggleRow($any(item).index, item.data)">
566
+ {{ detailButtonText(item) }}
567
+ </button>
568
+ </div>
325
569
  </div>
326
- </div>
570
+ }
327
571
  </div>
328
- </ng-container>
572
+ }
329
573
 
330
- <ng-container *ngIf="!isStackedLayoutMode">
331
- <ng-container [ngSwitch]="isEdited()">
332
- <ng-container *ngSwitchCase="false">
333
- <ng-container *ngIf="!showLoading; else loading">
334
- <ng-template *ngIf="column.templateRef"
335
- [ngTemplateOutlet]="column.templateRef"
336
- [ngTemplateOutletContext]="getTemplateContext()">
337
- </ng-template>
338
- <ng-container *ngIf="isSpanColumn">
339
- <ng-container *ngFor="let childColumn of children">
574
+ @if (!isStackedLayoutMode) {
575
+ @switch (isEdited()) {
576
+ @case (false) {
577
+ @if (!showLoading) {
578
+ @if (column.templateRef) {
579
+ <ng-template
580
+ [ngTemplateOutlet]="column.templateRef"
581
+ [ngTemplateOutletContext]="getTemplateContext()">
582
+ </ng-template>
583
+ }
584
+ @if (isSpanColumn) {
585
+ @for (childColumn of children; track $index) {
340
586
  {{ dataItem | valueOf: childColumn.field: childColumn.format}}
341
- </ng-container>
342
- </ng-container>
343
- <ng-container *ngIf="isBoundColumn()">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
344
- <ng-container *ngIf="isCheckboxColumn() && !isNew">
345
- <ng-container *ngIf="isRowSelectable(); else nonSelectableRow">
587
+ }
588
+ }
589
+ @if (isBoundColumn()) {{{ dataItem | valueOf: column.field: column.format}}}
590
+ @if (isCheckboxColumn() && !isNew) {
591
+ @if (isRowSelectable()) {
346
592
  <kendo-checkbox
347
593
  [kendoGridSelectionCheckbox]="rowIndex"
348
594
  [attr.id]="selectionCheckboxId"
349
595
  [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
350
596
  [title]="selectionCheckboxLabel">
351
597
  </kendo-checkbox>
352
- </ng-container>
353
- <ng-template #nonSelectableRow>
354
- <kendo-checkbox *ngIf="column.showDisabledCheckbox"
355
- [kendoGridSelectionCheckbox]="rowIndex"
356
- [attr.id]="selectionCheckboxId"
357
- [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
358
- [title]="selectionCheckboxLabel"
359
- [disabled]="true"
360
- ></kendo-checkbox>
361
- </ng-template>
362
- </ng-container>
363
- <ng-container *ngIf="isRowReorderColumn() && !isNew">
364
- <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
365
- name="reorder"
366
- [svgIcon]="reorderIcon">
367
- </kendo-icon-wrapper>
368
- <ng-template *ngIf="column.dragHandleTemplate?.first"
369
- [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
370
- [ngTemplateOutletContext]="rowReorderTemplateContext">
598
+ } @else {
599
+ @if (column.showDisabledCheckbox) {
600
+ <kendo-checkbox
601
+ [kendoGridSelectionCheckbox]="rowIndex"
602
+ [attr.id]="selectionCheckboxId"
603
+ [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
604
+ [title]="selectionCheckboxLabel"
605
+ [disabled]="true"
606
+ ></kendo-checkbox>
607
+ }
608
+ }
609
+ }
610
+ @if (isRowReorderColumn() && !isNew) {
611
+ @if (!column.dragHandleTemplate?.first) {
612
+ <kendo-icon-wrapper
613
+ name="reorder"
614
+ [svgIcon]="reorderIcon">
615
+ </kendo-icon-wrapper>
616
+ } @else {
617
+ <ng-template
618
+ [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
619
+ [ngTemplateOutletContext]="rowReorderTemplateContext">
620
+ </ng-template>
621
+ }
622
+ }
623
+ } @else {
624
+ @if (loadingTemplate) {
625
+ <ng-template
626
+ [ngTemplateOutlet]="loadingTemplate"
627
+ [ngTemplateOutletContext]="{$implicit: column}">
371
628
  </ng-template>
372
- </ng-container>
373
- </ng-container>
374
- <ng-template #loading>
629
+ } @else {
630
+ <div class="k-skeleton-text k-skeleton"></div>
631
+ }
632
+ }
633
+ }
634
+ @case (true) {
635
+ @if (column.editTemplateRef) {
375
636
  <ng-template
376
- *ngIf="loadingTemplate"
377
- [ngTemplateOutlet]="loadingTemplate"
378
- [ngTemplateOutletContext]="{$implicit: column}">
379
- </ng-template>
380
- <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
381
- </ng-template>
382
- </ng-container>
383
- <ng-container *ngSwitchCase="true">
384
- <ng-template
385
- *ngIf="column.editTemplateRef"
386
- [ngTemplateOutlet]="column.editTemplateRef"
387
- [ngTemplateOutletContext]="getEditTemplateContext()">
388
- </ng-template>
389
- <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
390
- <kendo-numerictextbox
391
- *ngSwitchCase="'numeric'"
392
- [format]="format"
393
- [formControl]="$any(formGroup.get(column.field))"
394
- kendoGridFocusable
395
- ></kendo-numerictextbox>
396
-
397
- <kendo-datepicker
398
- *ngSwitchCase="'date'"
399
- [format]="format"
400
- [formControl]="$any(formGroup.get(column.field))"
401
- kendoGridFocusable
402
- ></kendo-datepicker>
403
-
404
- <kendo-checkbox
405
- *ngSwitchCase="'boolean'"
406
- [formControl]="$any(formGroup.get(column.field))"
407
- kendoGridFocusable
408
- ></kendo-checkbox>
409
-
410
- <kendo-textbox
411
- *ngSwitchDefault
412
- [formControl]="$any(formGroup.get(column.field))"
413
- kendoGridFocusable
414
- ></kendo-textbox>
415
- </ng-container>
416
- </ng-container>
417
- </ng-container>
418
- </ng-container>
419
- `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: 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"] }] });
420
- }
421
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CellComponent, decorators: [{
422
- type: Component,
423
- args: [{
424
- selector: '[kendoGridCell]',
425
- template: `
426
- <ng-container *ngIf="isStackedLayoutMode">
427
- <div class="k-grid-stack-row"
428
- [ngClass]="stackedRowClass"
429
- [ngStyle]="stackedRowStyle">
430
- <div class="k-grid-stack-cell" *ngFor="let col of columns"
431
- [class.k-grid-stack-edit-cell]="isEdited(col)"
432
- [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
433
- [class.k-command-cell]="isCommand(col)"
434
- [kendoGridFocusable]="!isCommand(col)">
435
- <div class="k-grid-stack-header">
436
- <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
437
- {{col.displayTitle}}
438
- </ng-container>
439
-
440
- <ng-template #headerTemplate
441
- [templateContext]="{
442
- templateRef: col.headerTemplateRef,
443
- columnIndex: col.leafIndex,
444
- column: col,
445
- $implicit: col
446
- }">
637
+ [ngTemplateOutlet]="column.editTemplateRef"
638
+ [ngTemplateOutletContext]="getEditTemplateContext()">
447
639
  </ng-template>
448
- </div>
449
- <div class="k-grid-stack-content">
450
- <ng-container *ngIf="!isEdited(col)">
451
- <ng-container *ngIf="!col.templateRef; else template">
452
- <ng-container *ngIf="isBoundColumn(col)">{{ dataItem | valueOf: col.field: col.format}}</ng-container>
453
- <ng-container *ngIf="isCheckboxColumn(col) && !isNew">
454
- <ng-container *ngIf="isRowSelectable(col); else nonSelectableRow">
455
- <kendo-checkbox
456
- [kendoGridSelectionCheckbox]="rowIndex"
457
- [attr.id]="selectionCheckboxId"
458
- [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
459
- [title]="selectionCheckboxLabel">
460
- </kendo-checkbox>
461
- </ng-container>
462
- <ng-template #nonSelectableRow>
463
- <kendo-checkbox *ngIf="col.showDisabledCheckbox"
464
- [kendoGridSelectionCheckbox]="rowIndex"
465
- [attr.id]="selectionCheckboxId"
466
- [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
467
- [title]="selectionCheckboxLabel"
468
- [disabled]="true"
469
- ></kendo-checkbox>
470
- </ng-template>
471
- </ng-container>
472
- <ng-container *ngIf="isRowReorderColumn(col) && !isNew">
473
- <kendo-icon-wrapper *ngIf="!col.dragHandleTemplate?.first"
474
- name="reorder"
475
- [svgIcon]="reorderIcon">
476
- </kendo-icon-wrapper>
477
- <ng-template *ngIf="col.dragHandleTemplate?.first"
478
- [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
479
- [ngTemplateOutletContext]="rowReorderTemplateContext">
480
- </ng-template>
481
- </ng-container>
482
- </ng-container>
483
- <ng-template #template
484
- [ngTemplateOutlet]="col.templateRef"
485
- [ngTemplateOutletContext]="getTemplateContext(col)">
486
- </ng-template>
487
- </ng-container>
488
- <ng-container *ngIf="isEdited(col)">
489
- <ng-container [ngSwitch]="col.editor" *ngIf="!col.editTemplateRef">
640
+ } @else {
641
+ @switch (column.editor) {
642
+ @case ('numeric') {
490
643
  <kendo-numerictextbox
491
- *ngSwitchCase="'numeric'"
492
644
  [format]="format"
493
- [formControl]="$any(formGroup.get(col.field))"
645
+ [formControl]="$any(formGroup.get(column.field))"
494
646
  kendoGridFocusable
495
647
  ></kendo-numerictextbox>
496
-
648
+ }
649
+ @case ('date') {
497
650
  <kendo-datepicker
498
- *ngSwitchCase="'date'"
499
651
  [format]="format"
500
- [formControl]="$any(formGroup.get(col.field))"
652
+ [formControl]="$any(formGroup.get(column.field))"
501
653
  kendoGridFocusable
502
654
  ></kendo-datepicker>
503
-
655
+ }
656
+ @case ('boolean') {
504
657
  <kendo-checkbox
505
- *ngSwitchCase="'boolean'"
506
- [formControl]="$any(formGroup.get(col.field))"
658
+ [formControl]="$any(formGroup.get(column.field))"
507
659
  kendoGridFocusable
508
660
  ></kendo-checkbox>
509
-
661
+ }
662
+ @default {
510
663
  <kendo-textbox
511
- *ngSwitchDefault
512
- [formControl]="$any(formGroup.get(col.field))"
664
+ [formControl]="$any(formGroup.get(column.field))"
513
665
  kendoGridFocusable
514
666
  ></kendo-textbox>
515
- </ng-container>
516
- <ng-template *ngIf="col.editTemplateRef"
517
- [ngTemplateOutlet]="col.editTemplateRef"
518
- [ngTemplateOutletContext]="getEditTemplateContext(col)">
519
- </ng-template>
520
- </ng-container>
521
- </div>
522
- </div>
523
- <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)" [attr.aria-expanded]="item.isExpanded">
524
- <div class="k-grid-stack-content">
525
- <button kendoButton
526
- fillMode="flat"
527
- themeColor="primary"
528
- [icon]="detailButtonIconName(item)"
529
- [svgIcon]="detailButtonSvgIcon(item)"
530
- (click)="toggleRow($any(item).index, item.data)">
531
- {{ detailButtonText(item) }}
532
- </button>
533
- </div>
534
- </div>
535
- </div>
536
- </ng-container>
537
-
538
- <ng-container *ngIf="!isStackedLayoutMode">
539
- <ng-container [ngSwitch]="isEdited()">
540
- <ng-container *ngSwitchCase="false">
541
- <ng-container *ngIf="!showLoading; else loading">
542
- <ng-template *ngIf="column.templateRef"
543
- [ngTemplateOutlet]="column.templateRef"
544
- [ngTemplateOutletContext]="getTemplateContext()">
545
- </ng-template>
546
- <ng-container *ngIf="isSpanColumn">
547
- <ng-container *ngFor="let childColumn of children">
548
- {{ dataItem | valueOf: childColumn.field: childColumn.format}}
549
- </ng-container>
550
- </ng-container>
551
- <ng-container *ngIf="isBoundColumn()">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
552
- <ng-container *ngIf="isCheckboxColumn() && !isNew">
553
- <ng-container *ngIf="isRowSelectable(); else nonSelectableRow">
554
- <kendo-checkbox
555
- [kendoGridSelectionCheckbox]="rowIndex"
556
- [attr.id]="selectionCheckboxId"
557
- [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
558
- [title]="selectionCheckboxLabel">
559
- </kendo-checkbox>
560
- </ng-container>
561
- <ng-template #nonSelectableRow>
562
- <kendo-checkbox *ngIf="column.showDisabledCheckbox"
563
- [kendoGridSelectionCheckbox]="rowIndex"
564
- [attr.id]="selectionCheckboxId"
565
- [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
566
- [title]="selectionCheckboxLabel"
567
- [disabled]="true"
568
- ></kendo-checkbox>
569
- </ng-template>
570
- </ng-container>
571
- <ng-container *ngIf="isRowReorderColumn() && !isNew">
572
- <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
573
- name="reorder"
574
- [svgIcon]="reorderIcon">
575
- </kendo-icon-wrapper>
576
- <ng-template *ngIf="column.dragHandleTemplate?.first"
577
- [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
578
- [ngTemplateOutletContext]="rowReorderTemplateContext">
579
- </ng-template>
580
- </ng-container>
581
- </ng-container>
582
- <ng-template #loading>
583
- <ng-template
584
- *ngIf="loadingTemplate"
585
- [ngTemplateOutlet]="loadingTemplate"
586
- [ngTemplateOutletContext]="{$implicit: column}">
587
- </ng-template>
588
- <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
589
- </ng-template>
590
- </ng-container>
591
- <ng-container *ngSwitchCase="true">
592
- <ng-template
593
- *ngIf="column.editTemplateRef"
594
- [ngTemplateOutlet]="column.editTemplateRef"
595
- [ngTemplateOutletContext]="getEditTemplateContext()">
596
- </ng-template>
597
- <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
598
- <kendo-numerictextbox
599
- *ngSwitchCase="'numeric'"
600
- [format]="format"
601
- [formControl]="$any(formGroup.get(column.field))"
602
- kendoGridFocusable
603
- ></kendo-numerictextbox>
604
-
605
- <kendo-datepicker
606
- *ngSwitchCase="'date'"
607
- [format]="format"
608
- [formControl]="$any(formGroup.get(column.field))"
609
- kendoGridFocusable
610
- ></kendo-datepicker>
611
-
612
- <kendo-checkbox
613
- *ngSwitchCase="'boolean'"
614
- [formControl]="$any(formGroup.get(column.field))"
615
- kendoGridFocusable
616
- ></kendo-checkbox>
617
-
618
- <kendo-textbox
619
- *ngSwitchDefault
620
- [formControl]="$any(formGroup.get(column.field))"
621
- kendoGridFocusable
622
- ></kendo-textbox>
623
- </ng-container>
624
- </ng-container>
625
- </ng-container>
626
- </ng-container>
667
+ }
668
+ }
669
+ }
670
+ }
671
+ }
672
+ }
627
673
  `,
628
674
  standalone: true,
629
- imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, FocusableDirective, SelectionCheckboxDirective, TemplateContextDirective,
630
- IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent, NgClass, NgStyle, ButtonComponent]
675
+ imports: [NgTemplateOutlet, FocusableDirective, SelectionCheckboxDirective, TemplateContextDirective,
676
+ IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent, NgClass, NgStyle, ButtonComponent]
631
677
  }]
632
678
  }], ctorParameters: () => [{ type: i1.EditService }, { type: i2.IdService }, { type: i3.ContextService }, { type: i4.DetailsService }, { type: i5.LocalizationService }, { type: undefined, decorators: [{
633
679
  type: Optional