@progress/kendo-angular-pivotgrid 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/configurator/chip-menu/chip-menu-item.component.mjs +26 -20
- package/esm2022/configurator/chip-menu/chip-menu-reorder.component.mjs +40 -37
- package/esm2022/configurator/chip-menu/chip-menu.component.mjs +56 -57
- package/esm2022/configurator/configurator.component.mjs +211 -165
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/pivotgrid.component.mjs +296 -287
- package/esm2022/rendering/pivotgrid-cell.directive.mjs +53 -31
- package/esm2022/rendering/pivotgrid-table.component.mjs +144 -83
- package/fesm2022/progress-kendo-angular-pivotgrid.mjs +807 -658
- package/package.json +13 -13
- package/rendering/pivotgrid-table.component.d.ts +7 -0
- package/schematics/ngAdd/index.js +6 -2
|
@@ -18,7 +18,7 @@ import { ChipMenuComponent } from './chip-menu/chip-menu.component';
|
|
|
18
18
|
import { ChipKeyboardNavigationDirective } from './chip-kb-nav.directive';
|
|
19
19
|
import { DraggableChipDirective } from './draggable.directive';
|
|
20
20
|
import { DropTargetDirective } from './drop-target.directive';
|
|
21
|
-
import { NgClass, NgStyle,
|
|
21
|
+
import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
22
22
|
import { DraggableDirective } from '@progress/kendo-angular-common';
|
|
23
23
|
import * as i0 from "@angular/core";
|
|
24
24
|
import * as i1 from "../data-binding/pivotgrid-data.service";
|
|
@@ -312,12 +312,12 @@ export class PivotGridConfiguratorComponent {
|
|
|
312
312
|
this[`${targetCollectionName}sList`]?.chips.last.focus();
|
|
313
313
|
}
|
|
314
314
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PivotGridConfiguratorComponent, deps: [{ token: i1.PivotGridDataService }, { token: i2.LocalizationService }, { token: i3.ConfiguratorService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
315
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
315
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PivotGridConfiguratorComponent, isStandalone: true, selector: "kendo-pivotgrid-configurator", inputs: { orientation: "orientation", sort: "sort", filter: "filter", navigation: "navigation" }, outputs: { close: "close" }, host: { properties: { "class.k-pivotgrid-configurator": "this.hostClass", "attr.role": "this.hostAriaRole", "attr.aria-labelledby": "this.headerTextId" } }, providers: [
|
|
316
316
|
ConfiguratorService,
|
|
317
317
|
DropCueService,
|
|
318
318
|
SinglePopupService
|
|
319
319
|
], viewQueries: [{ propertyName: "treeView", first: true, predicate: TreeViewComponent, descendants: true }, { propertyName: "columnsList", first: true, predicate: ["columnsChiplist"], descendants: true }, { propertyName: "rowsList", first: true, predicate: ["rowsChiplist"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
320
|
-
<div
|
|
320
|
+
<div
|
|
321
321
|
class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
|
|
322
322
|
[ngClass]="{
|
|
323
323
|
'k-pivotgrid-configurator-horizontal': isHorizontal,
|
|
@@ -326,7 +326,7 @@ export class PivotGridConfiguratorComponent {
|
|
|
326
326
|
>
|
|
327
327
|
<div class="k-pivotgrid-configurator-header">
|
|
328
328
|
<div
|
|
329
|
-
[id]="headerTextId"
|
|
329
|
+
[id]="headerTextId"
|
|
330
330
|
class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
|
|
331
331
|
</div>
|
|
332
332
|
|
|
@@ -360,17 +360,21 @@ export class PivotGridConfiguratorComponent {
|
|
|
360
360
|
</div>
|
|
361
361
|
</div>
|
|
362
362
|
|
|
363
|
-
|
|
363
|
+
@if (isHorizontal) {
|
|
364
|
+
<div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
|
|
365
|
+
<ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
|
|
366
|
+
</div>
|
|
367
|
+
} @else {
|
|
364
368
|
<ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
|
|
365
|
-
|
|
369
|
+
}
|
|
366
370
|
|
|
367
371
|
<ng-template #verticalTemplate>
|
|
368
372
|
<div class="k-form-field" kendoDropTarget axes="columnAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
|
|
369
373
|
<span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
370
374
|
</div>
|
|
371
375
|
|
|
372
|
-
|
|
373
|
-
|
|
376
|
+
@if (state.columnAxes && state.columnAxes.length) {
|
|
377
|
+
<kendo-chiplist
|
|
374
378
|
[navigable]="false"
|
|
375
379
|
#columnsChiplist
|
|
376
380
|
kendoDropTarget
|
|
@@ -380,30 +384,35 @@ export class PivotGridConfiguratorComponent {
|
|
|
380
384
|
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
|
|
381
385
|
[ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
|
|
382
386
|
>
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
387
|
+
@for (item of state.columnAxes; track item.name) {
|
|
388
|
+
@if (item.name.length === 1) {
|
|
389
|
+
<kendo-chip
|
|
390
|
+
#chip
|
|
391
|
+
kendoChipDraggable
|
|
392
|
+
kendoDraggable
|
|
393
|
+
kendoDropTarget
|
|
394
|
+
kendoChipKeyboardNavigation
|
|
395
|
+
[item]="item"
|
|
396
|
+
[label]="getName(item.name)"
|
|
397
|
+
axes="columnAxes"
|
|
398
|
+
[removable]="true"
|
|
399
|
+
[hasMenu]="true"
|
|
400
|
+
(menuToggle)="chipMenuColumns.toggle($event)"
|
|
401
|
+
(remove)="onChipRemove($event, item, 'column')"
|
|
402
|
+
(reorder)="onReorder($event, 'column', item)"
|
|
403
|
+
>
|
|
404
|
+
<kendo-pivot-chip-menu
|
|
405
|
+
#chipMenuColumns
|
|
406
|
+
[chip]="item"
|
|
407
|
+
[anchor]="chip"
|
|
408
|
+
></kendo-pivot-chip-menu>
|
|
409
|
+
</kendo-chip>
|
|
410
|
+
}
|
|
411
|
+
}
|
|
406
412
|
</kendo-chiplist>
|
|
413
|
+
} @else {
|
|
414
|
+
<div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
|
|
415
|
+
}
|
|
407
416
|
|
|
408
417
|
<ng-template #noColumnAxes>
|
|
409
418
|
<div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
|
|
@@ -413,8 +422,8 @@ export class PivotGridConfiguratorComponent {
|
|
|
413
422
|
<span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
414
423
|
</div>
|
|
415
424
|
|
|
416
|
-
|
|
417
|
-
|
|
425
|
+
@if (state.rowAxes && state.rowAxes.length) {
|
|
426
|
+
<kendo-chiplist
|
|
418
427
|
[navigable]="false"
|
|
419
428
|
#rowsChiplist
|
|
420
429
|
kendoDropTarget
|
|
@@ -424,47 +433,56 @@ export class PivotGridConfiguratorComponent {
|
|
|
424
433
|
[ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
|
|
425
434
|
[style.width.%]="100"
|
|
426
435
|
>
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
436
|
+
@for (item of state.rowAxes; track item.name) {
|
|
437
|
+
@if (item.name.length === 1) {
|
|
438
|
+
<kendo-chip
|
|
439
|
+
#chip
|
|
440
|
+
kendoChipDraggable
|
|
441
|
+
kendoDraggable
|
|
442
|
+
kendoDropTarget
|
|
443
|
+
kendoChipKeyboardNavigation
|
|
444
|
+
[item]="item"
|
|
445
|
+
[label]="getName(item.name)"
|
|
446
|
+
axes="rowAxes"
|
|
447
|
+
[removable]="true"
|
|
448
|
+
[hasMenu]="true"
|
|
449
|
+
(menuToggle)="chipMenuRows.toggle($event)"
|
|
450
|
+
(remove)="onChipRemove($event, item, 'row')"
|
|
451
|
+
(reorder)="onReorder($event, 'row', item)"
|
|
452
|
+
>
|
|
453
|
+
<kendo-pivot-chip-menu
|
|
454
|
+
#chipMenuRows
|
|
455
|
+
[chip]="item"
|
|
456
|
+
[anchor]="chip"
|
|
457
|
+
></kendo-pivot-chip-menu>
|
|
458
|
+
</kendo-chip>
|
|
459
|
+
}
|
|
460
|
+
}
|
|
450
461
|
</kendo-chiplist>
|
|
462
|
+
} @else {
|
|
463
|
+
<div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
|
|
464
|
+
}
|
|
451
465
|
|
|
452
466
|
<ng-template #noRowAxes>
|
|
453
467
|
<div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
|
|
454
468
|
</ng-template>
|
|
455
469
|
</ng-template>
|
|
456
470
|
|
|
457
|
-
|
|
471
|
+
@if (isHorizontal) {
|
|
472
|
+
<div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null" >
|
|
473
|
+
<ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
|
|
474
|
+
</div>
|
|
475
|
+
} @else {
|
|
458
476
|
<ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
|
|
459
|
-
|
|
477
|
+
}
|
|
460
478
|
|
|
461
479
|
<ng-template #verticalMeasuresTemplate>
|
|
462
480
|
<div class="k-form-field" kendoDropTarget axes="measureAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
|
|
463
481
|
<span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
464
482
|
</div>
|
|
465
483
|
|
|
466
|
-
|
|
467
|
-
|
|
484
|
+
@if (state.measureAxes && state.measureAxes.length) {
|
|
485
|
+
<kendo-chiplist
|
|
468
486
|
[navigable]="false"
|
|
469
487
|
kendoDropTarget
|
|
470
488
|
class="k-filter-fields"
|
|
@@ -473,34 +491,39 @@ export class PivotGridConfiguratorComponent {
|
|
|
473
491
|
[ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
|
|
474
492
|
[style.width.%]="100"
|
|
475
493
|
>
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
494
|
+
@for (item of state.measureAxes; track item.name) {
|
|
495
|
+
<kendo-chip
|
|
496
|
+
#chip
|
|
497
|
+
kendoChipDraggable
|
|
498
|
+
kendoDraggable
|
|
499
|
+
kendoDropTarget
|
|
500
|
+
kendoChipKeyboardNavigation
|
|
501
|
+
[item]="item"
|
|
502
|
+
[label]="getName(item.name)"
|
|
503
|
+
axes="measureAxes"
|
|
504
|
+
[removable]="true"
|
|
505
|
+
[hasMenu]="true"
|
|
506
|
+
(menuToggle)="chipMenuValues.toggle($event)"
|
|
507
|
+
(remove)="onChipRemove($event, item, 'measure')"
|
|
508
|
+
(reorder)="onReorder($event, 'measure', item)"
|
|
509
|
+
>
|
|
510
|
+
<kendo-pivot-chip-menu
|
|
511
|
+
#chipMenuValues
|
|
512
|
+
[chip]="item"
|
|
513
|
+
[anchor]="chip"
|
|
514
|
+
></kendo-pivot-chip-menu>
|
|
515
|
+
</kendo-chip>
|
|
516
|
+
}
|
|
497
517
|
</kendo-chiplist>
|
|
518
|
+
} @else {
|
|
519
|
+
<div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
|
|
520
|
+
}
|
|
498
521
|
|
|
499
522
|
<ng-template #noMeasureAxes>
|
|
500
523
|
<div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
|
|
501
524
|
</ng-template>
|
|
502
525
|
</ng-template>
|
|
503
|
-
|
|
526
|
+
|
|
504
527
|
</div>
|
|
505
528
|
</div>
|
|
506
529
|
<div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
|
|
@@ -508,7 +531,7 @@ export class PivotGridConfiguratorComponent {
|
|
|
508
531
|
<button kendoButton themeColor="primary" type="button" (click)="handleSubmit()">{{messageFor('configuratorApplyButtonText')}}</button>
|
|
509
532
|
</div>
|
|
510
533
|
</div>
|
|
511
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { kind: "directive", type:
|
|
534
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: CheckDirective, selector: "[kendoTreeViewCheckable]", inputs: ["isChecked", "checkBy", "checkedKeys", "kendoTreeViewCheckable"], outputs: ["checkedKeysChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["item", "axes"] }, { kind: "component", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: ["orientation", "selection", "size", "role", "navigable"], outputs: ["selectedChange", "remove"] }, { kind: "component", type: ChipComponent, selector: "kendo-chip", inputs: ["label", "icon", "svgIcon", "iconClass", "avatarSettings", "selected", "removable", "removeIcon", "removeSvgIcon", "hasMenu", "menuIcon", "menuSvgIcon", "disabled", "size", "rounded", "fillMode", "themeColor"], outputs: ["remove", "menuToggle", "contentClick"] }, { kind: "directive", type: DraggableChipDirective, selector: "[kendoChipDraggable]", inputs: ["item"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: ChipKeyboardNavigationDirective, selector: "[kendoChipKeyboardNavigation]", outputs: ["reorder"] }, { kind: "component", type: ChipMenuComponent, selector: "kendo-pivot-chip-menu", inputs: ["chip", "tabIndex", "isMeasureField", "anchor"] }, { 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"] }] });
|
|
512
535
|
}
|
|
513
536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PivotGridConfiguratorComponent, decorators: [{
|
|
514
537
|
type: Component,
|
|
@@ -520,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
520
543
|
SinglePopupService
|
|
521
544
|
],
|
|
522
545
|
template: `
|
|
523
|
-
<div
|
|
546
|
+
<div
|
|
524
547
|
class="k-pivotgrid-configurator-panel k-pivotgrid-configurator-push"
|
|
525
548
|
[ngClass]="{
|
|
526
549
|
'k-pivotgrid-configurator-horizontal': isHorizontal,
|
|
@@ -529,7 +552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
529
552
|
>
|
|
530
553
|
<div class="k-pivotgrid-configurator-header">
|
|
531
554
|
<div
|
|
532
|
-
[id]="headerTextId"
|
|
555
|
+
[id]="headerTextId"
|
|
533
556
|
class="k-pivotgrid-configurator-header-text">{{messageFor('configuratorHeaderText')}}</div>
|
|
534
557
|
</div>
|
|
535
558
|
|
|
@@ -563,17 +586,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
563
586
|
</div>
|
|
564
587
|
</div>
|
|
565
588
|
|
|
566
|
-
|
|
589
|
+
@if (isHorizontal) {
|
|
590
|
+
<div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null">
|
|
591
|
+
<ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
|
|
592
|
+
</div>
|
|
593
|
+
} @else {
|
|
567
594
|
<ng-container *ngTemplateOutlet="verticalTemplate"></ng-container>
|
|
568
|
-
|
|
595
|
+
}
|
|
569
596
|
|
|
570
597
|
<ng-template #verticalTemplate>
|
|
571
598
|
<div class="k-form-field" kendoDropTarget axes="columnAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
|
|
572
599
|
<span [id]="contentLabelId('columns')" class="k-label">{{messageFor('configuratorColumnsText')}}</span>
|
|
573
600
|
</div>
|
|
574
601
|
|
|
575
|
-
|
|
576
|
-
|
|
602
|
+
@if (state.columnAxes && state.columnAxes.length) {
|
|
603
|
+
<kendo-chiplist
|
|
577
604
|
[navigable]="false"
|
|
578
605
|
#columnsChiplist
|
|
579
606
|
kendoDropTarget
|
|
@@ -583,30 +610,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
583
610
|
[attr.aria-labelledby]="headerTextId + ' ' + contentLabelId('columns')"
|
|
584
611
|
[ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
|
|
585
612
|
>
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
613
|
+
@for (item of state.columnAxes; track item.name) {
|
|
614
|
+
@if (item.name.length === 1) {
|
|
615
|
+
<kendo-chip
|
|
616
|
+
#chip
|
|
617
|
+
kendoChipDraggable
|
|
618
|
+
kendoDraggable
|
|
619
|
+
kendoDropTarget
|
|
620
|
+
kendoChipKeyboardNavigation
|
|
621
|
+
[item]="item"
|
|
622
|
+
[label]="getName(item.name)"
|
|
623
|
+
axes="columnAxes"
|
|
624
|
+
[removable]="true"
|
|
625
|
+
[hasMenu]="true"
|
|
626
|
+
(menuToggle)="chipMenuColumns.toggle($event)"
|
|
627
|
+
(remove)="onChipRemove($event, item, 'column')"
|
|
628
|
+
(reorder)="onReorder($event, 'column', item)"
|
|
629
|
+
>
|
|
630
|
+
<kendo-pivot-chip-menu
|
|
631
|
+
#chipMenuColumns
|
|
632
|
+
[chip]="item"
|
|
633
|
+
[anchor]="chip"
|
|
634
|
+
></kendo-pivot-chip-menu>
|
|
635
|
+
</kendo-chip>
|
|
636
|
+
}
|
|
637
|
+
}
|
|
609
638
|
</kendo-chiplist>
|
|
639
|
+
} @else {
|
|
640
|
+
<div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
|
|
641
|
+
}
|
|
610
642
|
|
|
611
643
|
<ng-template #noColumnAxes>
|
|
612
644
|
<div class="k-settings-description" kendoDropTarget axes="columnAxes">{{messageFor('configuratorEmptyColumnsText')}}</div>
|
|
@@ -616,8 +648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
616
648
|
<span [id]="contentLabelId('rows')" class="k-label">{{messageFor('configuratorRowsText')}}</span>
|
|
617
649
|
</div>
|
|
618
650
|
|
|
619
|
-
|
|
620
|
-
|
|
651
|
+
@if (state.rowAxes && state.rowAxes.length) {
|
|
652
|
+
<kendo-chiplist
|
|
621
653
|
[navigable]="false"
|
|
622
654
|
#rowsChiplist
|
|
623
655
|
kendoDropTarget
|
|
@@ -627,47 +659,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
627
659
|
[ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
|
|
628
660
|
[style.width.%]="100"
|
|
629
661
|
>
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
662
|
+
@for (item of state.rowAxes; track item.name) {
|
|
663
|
+
@if (item.name.length === 1) {
|
|
664
|
+
<kendo-chip
|
|
665
|
+
#chip
|
|
666
|
+
kendoChipDraggable
|
|
667
|
+
kendoDraggable
|
|
668
|
+
kendoDropTarget
|
|
669
|
+
kendoChipKeyboardNavigation
|
|
670
|
+
[item]="item"
|
|
671
|
+
[label]="getName(item.name)"
|
|
672
|
+
axes="rowAxes"
|
|
673
|
+
[removable]="true"
|
|
674
|
+
[hasMenu]="true"
|
|
675
|
+
(menuToggle)="chipMenuRows.toggle($event)"
|
|
676
|
+
(remove)="onChipRemove($event, item, 'row')"
|
|
677
|
+
(reorder)="onReorder($event, 'row', item)"
|
|
678
|
+
>
|
|
679
|
+
<kendo-pivot-chip-menu
|
|
680
|
+
#chipMenuRows
|
|
681
|
+
[chip]="item"
|
|
682
|
+
[anchor]="chip"
|
|
683
|
+
></kendo-pivot-chip-menu>
|
|
684
|
+
</kendo-chip>
|
|
685
|
+
}
|
|
686
|
+
}
|
|
653
687
|
</kendo-chiplist>
|
|
688
|
+
} @else {
|
|
689
|
+
<div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
|
|
690
|
+
}
|
|
654
691
|
|
|
655
692
|
<ng-template #noRowAxes>
|
|
656
693
|
<div class="k-settings-description" kendoDropTarget axes="rowAxes">{{messageFor('configuratorEmptyRowsText')}}</div>
|
|
657
694
|
</ng-template>
|
|
658
695
|
</ng-template>
|
|
659
696
|
|
|
660
|
-
|
|
697
|
+
@if (isHorizontal) {
|
|
698
|
+
<div class="k-form-field-wrapper" [ngStyle]="isHorizontal ? {'padding-left': 0 } : null" >
|
|
699
|
+
<ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
|
|
700
|
+
</div>
|
|
701
|
+
} @else {
|
|
661
702
|
<ng-container *ngTemplateOutlet="verticalMeasuresTemplate"></ng-container>
|
|
662
|
-
|
|
703
|
+
}
|
|
663
704
|
|
|
664
705
|
<ng-template #verticalMeasuresTemplate>
|
|
665
706
|
<div class="k-form-field" kendoDropTarget axes="measureAxes" [style]="'padding-top: 1em; margin-top: 0;'" [ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null">
|
|
666
707
|
<span [id]="contentLabelId('values')" class="k-label">{{messageFor('configuratorValuesText')}}</span>
|
|
667
708
|
</div>
|
|
668
709
|
|
|
669
|
-
|
|
670
|
-
|
|
710
|
+
@if (state.measureAxes && state.measureAxes.length) {
|
|
711
|
+
<kendo-chiplist
|
|
671
712
|
[navigable]="false"
|
|
672
713
|
kendoDropTarget
|
|
673
714
|
class="k-filter-fields"
|
|
@@ -676,34 +717,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
676
717
|
[ngStyle]="isHorizontal ? {'padding-top': 0, 'padding-left': '16px' } : null"
|
|
677
718
|
[style.width.%]="100"
|
|
678
719
|
>
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
720
|
+
@for (item of state.measureAxes; track item.name) {
|
|
721
|
+
<kendo-chip
|
|
722
|
+
#chip
|
|
723
|
+
kendoChipDraggable
|
|
724
|
+
kendoDraggable
|
|
725
|
+
kendoDropTarget
|
|
726
|
+
kendoChipKeyboardNavigation
|
|
727
|
+
[item]="item"
|
|
728
|
+
[label]="getName(item.name)"
|
|
729
|
+
axes="measureAxes"
|
|
730
|
+
[removable]="true"
|
|
731
|
+
[hasMenu]="true"
|
|
732
|
+
(menuToggle)="chipMenuValues.toggle($event)"
|
|
733
|
+
(remove)="onChipRemove($event, item, 'measure')"
|
|
734
|
+
(reorder)="onReorder($event, 'measure', item)"
|
|
735
|
+
>
|
|
736
|
+
<kendo-pivot-chip-menu
|
|
737
|
+
#chipMenuValues
|
|
738
|
+
[chip]="item"
|
|
739
|
+
[anchor]="chip"
|
|
740
|
+
></kendo-pivot-chip-menu>
|
|
741
|
+
</kendo-chip>
|
|
742
|
+
}
|
|
700
743
|
</kendo-chiplist>
|
|
744
|
+
} @else {
|
|
745
|
+
<div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
|
|
746
|
+
}
|
|
701
747
|
|
|
702
748
|
<ng-template #noMeasureAxes>
|
|
703
749
|
<div class="k-settings-description" kendoDropTarget axes="measureAxes">{{messageFor('configuratorEmptyMeasuresText')}}</div>
|
|
704
750
|
</ng-template>
|
|
705
751
|
</ng-template>
|
|
706
|
-
|
|
752
|
+
|
|
707
753
|
</div>
|
|
708
754
|
</div>
|
|
709
755
|
<div class="k-pivotgrid-configurator-actions k-actions k-actions-end k-actions-horizontal">
|
|
@@ -714,8 +760,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
714
760
|
`,
|
|
715
761
|
standalone: true,
|
|
716
762
|
imports: [
|
|
717
|
-
NgClass, NgStyle, TreeViewComponent, ExpandDirective, CheckDirective,
|
|
718
|
-
NgTemplateOutlet, DropTargetDirective, ChipListComponent,
|
|
763
|
+
NgClass, NgStyle, TreeViewComponent, ExpandDirective, CheckDirective,
|
|
764
|
+
NgTemplateOutlet, DropTargetDirective, ChipListComponent, ChipComponent, DraggableChipDirective,
|
|
719
765
|
DraggableDirective, ChipKeyboardNavigationDirective, ChipMenuComponent, ButtonComponent
|
|
720
766
|
]
|
|
721
767
|
}]
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.
|
|
13
|
+
publishDate: 1763998482,
|
|
14
|
+
version: '21.2.0-develop.1',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
16
16
|
};
|