@progress/kendo-angular-treeview 24.2.0-develop.1 → 24.2.0-develop.3

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 (5) hide show
  1. package/fesm2022/progress-kendo-angular-treeview.mjs +52 -19
  2. package/loading-indicator.directive.d.ts +5 -2
  3. package/package-metadata.mjs +2 -2
  4. package/package.json +7 -7
  5. package/schematics/ngAdd/index.js +4 -4
package/fesm2022/progress-kendo-angular-treeview.mjs CHANGED
@@ -7,7 +7,7 @@ import { EventEmitter, Injectable, Optional, Directive, Input, HostBinding, Comp
7
7
  import { isDocumentAvailable, Keys, normalizeKeys, anyChanged, hasObservers, KENDO_WEBMCP_HOST, isChanged, guid, ResizeBatchService } from '@progress/kendo-angular-common';
8
8
  import * as i1 from '@progress/kendo-angular-l10n';
9
9
  import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
10
- import { Subject, Subscription, of, EMPTY, BehaviorSubject, merge } from 'rxjs';
10
+ import { Subject, Subscription, of, merge, EMPTY, BehaviorSubject } from 'rxjs';
11
11
  import { validatePackage } from '@progress/kendo-licensing';
12
12
  import { getter, setter } from '@progress/kendo-common';
13
13
  import { chevronDownIcon, chevronRightIcon, chevronLeftIcon, searchIcon, cancelIcon, insertMiddleIcon, insertBottomIcon, insertTopIcon, plusIcon } from '@progress/kendo-svg-icons';
@@ -28,8 +28,8 @@ const packageMetadata = {
28
28
  productName: 'Kendo UI for Angular',
29
29
  productCode: 'KENDOUIANGULAR',
30
30
  productCodes: ['KENDOUIANGULAR'],
31
- publishDate: 1781868435,
32
- version: '24.2.0-develop.1',
31
+ publishDate: 1781882378,
32
+ version: '24.2.0-develop.3',
33
33
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
34
34
  };
35
35
 
@@ -1153,8 +1153,22 @@ class LoadingIndicatorDirective {
1153
1153
  this._loading = value;
1154
1154
  this.cd.markForCheck();
1155
1155
  }
1156
- index;
1156
+ set index(value) {
1157
+ // Cancel any pending loading timer when the node's index shifts (e.g., after drag-and-drop reorder)
1158
+ if (this._index !== undefined && this._index !== value) {
1159
+ this.cancelLoading$.next();
1160
+ if (this.loading) {
1161
+ this.loading = false;
1162
+ }
1163
+ }
1164
+ this._index = value;
1165
+ }
1166
+ get index() {
1167
+ return this._index;
1168
+ }
1169
+ _index;
1157
1170
  _loading = false;
1171
+ cancelLoading$ = new Subject();
1158
1172
  subscription;
1159
1173
  constructor(expandService, loadingService, cd) {
1160
1174
  this.expandService = expandService;
@@ -1171,7 +1185,7 @@ class LoadingIndicatorDirective {
1171
1185
  if (!expand && this.loading) {
1172
1186
  this.loading = false;
1173
1187
  }
1174
- }), filter(({ expand }) => expand), switchMap(x => of(x).pipe(delay(100), takeUntil(loadingNotifications))))
1188
+ }), filter(({ expand }) => expand), switchMap(x => of(x).pipe(delay(100), takeUntil(merge(loadingNotifications, this.cancelLoading$)))))
1175
1189
  .subscribe(() => this.loading = true);
1176
1190
  this.subscription.add(loadingNotifications.subscribe(() => this.loading = false));
1177
1191
  }
@@ -1181,18 +1195,16 @@ class LoadingIndicatorDirective {
1181
1195
  }
1182
1196
  }
1183
1197
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LoadingIndicatorDirective, deps: [{ token: ExpandStateService }, { token: LoadingNotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
1184
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: LoadingIndicatorDirective, isStandalone: true, selector: "[kendoTreeViewLoading]", inputs: { index: ["kendoTreeViewLoading", "index"] }, host: { properties: { "class.k-i-loading": "this.loading" } }, ngImport: i0 });
1198
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: LoadingIndicatorDirective, isStandalone: true, selector: "[kendoTreeViewLoading]", inputs: { index: ["kendoTreeViewLoading", "index"] }, exportAs: ["kendoTreeViewLoading"], ngImport: i0 });
1185
1199
  }
1186
1200
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: LoadingIndicatorDirective, decorators: [{
1187
1201
  type: Directive,
1188
1202
  args: [{
1189
1203
  selector: '[kendoTreeViewLoading]',
1204
+ exportAs: 'kendoTreeViewLoading',
1190
1205
  standalone: true
1191
1206
  }]
1192
- }], ctorParameters: () => [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: i0.ChangeDetectorRef }], propDecorators: { loading: [{
1193
- type: HostBinding,
1194
- args: ["class.k-i-loading"]
1195
- }], index: [{
1207
+ }], ctorParameters: () => [{ type: ExpandStateService }, { type: LoadingNotificationService }, { type: i0.ChangeDetectorRef }], propDecorators: { index: [{
1196
1208
  type: Input,
1197
1209
  args: ["kendoTreeViewLoading"]
1198
1210
  }] } });
@@ -1774,12 +1786,17 @@ class TreeViewGroupComponent {
1774
1786
  <span
1775
1787
  class="k-treeview-toggle"
1776
1788
  [kendoTreeViewLoading]="nodeIndex(index)"
1789
+ #loadingIndicator="kendoTreeViewLoading"
1777
1790
  (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
1778
1791
  >
1779
- <kendo-icon-wrapper
1780
- [name]="getFontIcon(node, nodeIndex(index))"
1781
- [svgIcon]="getSvgIcon(node, nodeIndex(index))">
1782
- </kendo-icon-wrapper>
1792
+ @if (loadingIndicator.loading) {
1793
+ <span class="k-icon k-i-loading"></span>
1794
+ } @else {
1795
+ <kendo-icon-wrapper
1796
+ [name]="getFontIcon(node, nodeIndex(index))"
1797
+ [svgIcon]="getSvgIcon(node, nodeIndex(index))">
1798
+ </kendo-icon-wrapper>
1799
+ }
1783
1800
  </span>
1784
1801
  }
1785
1802
  @if (checkboxes && hasCheckbox(node, nodeIndex(index))) {
@@ -1899,7 +1916,7 @@ class TreeViewGroupComponent {
1899
1916
  </div>
1900
1917
  </li>
1901
1918
  }
1902
- `, isInline: true, dependencies: [{ kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentWrapperDirective, selector: "[kendoTreeViewItemContentWrapper]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
1919
+ `, isInline: true, dependencies: [{ kind: "component", type: TreeViewGroupComponent, selector: "[kendoTreeViewGroup]", inputs: ["checkboxes", "expandIcons", "disabled", "selectable", "touchActions", "disableParentNodesOnly", "loadOnDemand", "trackBy", "nodes", "textField", "parentDataItem", "parentIndex", "nodeTemplateRef", "loadMoreButtonTemplateRef", "loadMoreService", "size", "expandDisabledNodes", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isVisible", "isSelected", "children", "hasChildren"] }, { kind: "directive", type: TreeViewItemDirective, selector: "[kendoTreeViewItem]", inputs: ["dataItem", "index", "parentDataItem", "parentIndex", "role", "loadOnDemand", "checkable", "selectable", "expandable", "isChecked", "isDisabled", "isVisible", "isExpanded", "isSelected"] }, { kind: "directive", type: LoadingIndicatorDirective, selector: "[kendoTreeViewLoading]", inputs: ["kendoTreeViewLoading"], exportAs: ["kendoTreeViewLoading"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: TreeViewItemContentWrapperDirective, selector: "[kendoTreeViewItemContentWrapper]", inputs: ["dataItem", "index", "initialSelection", "isSelected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
1903
1920
  trigger('toggle', [
1904
1921
  transition('void => *', [
1905
1922
  style({ height: 0 }),
@@ -1962,12 +1979,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
1962
1979
  <span
1963
1980
  class="k-treeview-toggle"
1964
1981
  [kendoTreeViewLoading]="nodeIndex(index)"
1982
+ #loadingIndicator="kendoTreeViewLoading"
1965
1983
  (click)="expandNode(nodeIndex(index), node, !isExpanded(node, nodeIndex(index)))"
1966
1984
  >
1967
- <kendo-icon-wrapper
1968
- [name]="getFontIcon(node, nodeIndex(index))"
1969
- [svgIcon]="getSvgIcon(node, nodeIndex(index))">
1970
- </kendo-icon-wrapper>
1985
+ @if (loadingIndicator.loading) {
1986
+ <span class="k-icon k-i-loading"></span>
1987
+ } @else {
1988
+ <kendo-icon-wrapper
1989
+ [name]="getFontIcon(node, nodeIndex(index))"
1990
+ [svgIcon]="getSvgIcon(node, nodeIndex(index))">
1991
+ </kendo-icon-wrapper>
1992
+ }
1971
1993
  </span>
1972
1994
  }
1973
1995
  @if (checkboxes && hasCheckbox(node, nodeIndex(index))) {
@@ -2634,6 +2656,17 @@ class TreeViewComponent {
2634
2656
  if (document.activeElement === target) {
2635
2657
  target.blur();
2636
2658
  }
2659
+ else if (this.navigationService.isActive(nodeIndex(this.navigationService.focusableItem))) {
2660
+ // Deactivate navigation focus when the item has visual focus but no DOM focus
2661
+ // (e.g., an initially selected item that was never DOM-focused via focus())
2662
+ this.navigationService.deactivate();
2663
+ this.navigationService.isTreeViewActive = false;
2664
+ if (hasObservers(this.onBlur)) {
2665
+ this.ngZone.run(() => {
2666
+ this.onBlur.emit();
2667
+ });
2668
+ }
2669
+ }
2637
2670
  }
2638
2671
  /**
2639
2672
  * Focuses the first focusable item in the TreeView if no hierarchical index is provided.
package/loading-indicator.directive.d.ts CHANGED
@@ -15,12 +15,15 @@ export declare class LoadingIndicatorDirective implements OnInit, OnDestroy {
15
15
  protected cd: ChangeDetectorRef;
16
16
  get loading(): boolean;
17
17
  set loading(value: boolean);
18
- index: string;
18
+ set index(value: string);
19
+ get index(): string;
20
+ private _index;
19
21
  private _loading;
22
+ private cancelLoading$;
20
23
  private subscription;
21
24
  constructor(expandService: ExpandStateService, loadingService: LoadingNotificationService, cd: ChangeDetectorRef);
22
25
  ngOnInit(): void;
23
26
  ngOnDestroy(): void;
24
27
  static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIndicatorDirective, never>;
25
- static ɵdir: i0.ɵɵDirectiveDeclaration<LoadingIndicatorDirective, "[kendoTreeViewLoading]", never, { "index": { "alias": "kendoTreeViewLoading"; "required": false; }; }, {}, never, never, true, never>;
28
+ static ɵdir: i0.ɵɵDirectiveDeclaration<LoadingIndicatorDirective, "[kendoTreeViewLoading]", ["kendoTreeViewLoading"], { "index": { "alias": "kendoTreeViewLoading"; "required": false; }; }, {}, never, never, true, never>;
26
29
  }
package/package-metadata.mjs CHANGED
@@ -7,7 +7,7 @@ export const packageMetadata = {
7
7
  "productCodes": [
8
8
  "KENDOUIANGULAR"
9
9
  ],
10
- "publishDate": 1781868435,
11
- "version": "24.2.0-develop.1",
10
+ "publishDate": 1781882378,
11
+ "version": "24.2.0-develop.3",
12
12
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
13
13
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-treeview",
3
- "version": "24.2.0-develop.1",
3
+ "version": "24.2.0-develop.3",
4
4
  "description": "Kendo UI TreeView for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -34,7 +34,7 @@
34
34
  "package": {
35
35
  "productName": "Kendo UI for Angular",
36
36
  "productCode": "KENDOUIANGULAR",
37
- "publishDate": 1781868435,
37
+ "publishDate": 1781882378,
38
38
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
39
39
  }
40
40
  },
@@ -44,15 +44,15 @@
44
44
  "@angular/core": "19 - 22",
45
45
  "@angular/platform-browser": "19 - 22",
46
46
  "@progress/kendo-licensing": "^1.11.0",
47
- "@progress/kendo-angular-common": "24.2.0-develop.1",
48
- "@progress/kendo-angular-inputs": "24.2.0-develop.1",
49
- "@progress/kendo-angular-icons": "24.2.0-develop.1",
50
- "@progress/kendo-angular-l10n": "24.2.0-develop.1",
47
+ "@progress/kendo-angular-common": "24.2.0-develop.3",
48
+ "@progress/kendo-angular-inputs": "24.2.0-develop.3",
49
+ "@progress/kendo-angular-icons": "24.2.0-develop.3",
50
+ "@progress/kendo-angular-l10n": "24.2.0-develop.3",
51
51
  "rxjs": "^6.5.3 || ^7.0.0"
52
52
  },
53
53
  "dependencies": {
54
54
  "tslib": "^2.3.1",
55
- "@progress/kendo-angular-schematics": "24.2.0-develop.1",
55
+ "@progress/kendo-angular-schematics": "24.2.0-develop.3",
56
56
  "@progress/kendo-common": "^1.0.1",
57
57
  "@progress/kendo-draggable": "^3.0.2"
58
58
  },
package/schematics/ngAdd/index.js CHANGED
@@ -9,10 +9,10 @@ const schematics_1 = require("@angular-devkit/schematics");
9
9
  function default_1(options) {
10
10
  const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'TreeViewModule', package: 'treeview', peerDependencies: {
11
11
  // Peers of kendo-angular-inputs
12
- '@progress/kendo-angular-buttons': '24.2.0-develop.1',
13
- '@progress/kendo-angular-dialog': '24.2.0-develop.1',
14
- '@progress/kendo-angular-intl': '24.2.0-develop.1',
15
- '@progress/kendo-angular-popup': '24.2.0-develop.1',
12
+ '@progress/kendo-angular-buttons': '24.2.0-develop.3',
13
+ '@progress/kendo-angular-dialog': '24.2.0-develop.3',
14
+ '@progress/kendo-angular-intl': '24.2.0-develop.3',
15
+ '@progress/kendo-angular-popup': '24.2.0-develop.3',
16
16
  '@progress/kendo-drawing': '^1.9.3',
17
17
  // Peer dependency of icons
18
18
  '@progress/kendo-svg-icons': '^4.0.0'