@progress/kendo-angular-treeview 5.4.3-dev.202111250955 → 6.0.0-dev.202201190736

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 (58) hide show
  1. package/LICENSE.md +1 -1
  2. package/NOTICE.txt +119 -79
  3. package/README.md +1 -1
  4. package/dist/cdn/js/kendo-angular-treeview.js +18 -18
  5. package/dist/cdn/main.js +1 -1
  6. package/dist/es/check.directive.js +30 -39
  7. package/dist/es/checkbox/checkbox.component.js +17 -1
  8. package/dist/es/drag-and-drop/drag-and-drop-utils.js +3 -3
  9. package/dist/es/drag-and-drop/drag-and-drop.directive.js +2 -2
  10. package/dist/es/expand.directive.js +40 -41
  11. package/dist/es/package-metadata.js +1 -1
  12. package/dist/es/selection/select.directive.js +22 -28
  13. package/dist/es/size.js +4 -0
  14. package/dist/es/treeview-group.component.js +7 -2
  15. package/dist/es/treeview-item-content.directive.js +2 -2
  16. package/dist/es/treeview-item.directive.js +1 -1
  17. package/dist/es/treeview.component.js +36 -4
  18. package/dist/es/utils.js +21 -11
  19. package/dist/es2015/check.directive.d.ts +8 -1
  20. package/dist/es2015/check.directive.js +30 -35
  21. package/dist/es2015/checkbox/checkbox.component.d.ts +6 -0
  22. package/dist/es2015/checkbox/checkbox.component.js +13 -1
  23. package/dist/es2015/drag-and-drop/drag-and-drop-utils.js +3 -3
  24. package/dist/es2015/drag-and-drop/drag-and-drop.directive.js +2 -2
  25. package/dist/es2015/expand.directive.d.ts +12 -3
  26. package/dist/es2015/expand.directive.js +39 -36
  27. package/dist/es2015/index.metadata.json +1 -1
  28. package/dist/es2015/package-metadata.js +1 -1
  29. package/dist/es2015/selection/select.directive.d.ts +11 -3
  30. package/dist/es2015/selection/select.directive.js +22 -24
  31. package/dist/es2015/size.d.ts +14 -0
  32. package/dist/es2015/size.js +4 -0
  33. package/dist/es2015/treeview-filter-settings.d.ts +2 -0
  34. package/dist/es2015/treeview-group.component.d.ts +2 -0
  35. package/dist/es2015/treeview-group.component.js +49 -35
  36. package/dist/es2015/treeview-item-content.directive.js +2 -2
  37. package/dist/es2015/treeview-item.directive.js +1 -1
  38. package/dist/es2015/treeview.component.d.ts +13 -0
  39. package/dist/es2015/treeview.component.js +46 -13
  40. package/dist/es2015/utils.d.ts +9 -4
  41. package/dist/es2015/utils.js +21 -11
  42. package/dist/fesm2015/index.js +224 -163
  43. package/dist/fesm5/index.js +177 -134
  44. package/dist/npm/check.directive.js +30 -39
  45. package/dist/npm/checkbox/checkbox.component.js +17 -1
  46. package/dist/npm/drag-and-drop/drag-and-drop-utils.js +3 -3
  47. package/dist/npm/drag-and-drop/drag-and-drop.directive.js +2 -2
  48. package/dist/npm/expand.directive.js +40 -41
  49. package/dist/npm/package-metadata.js +1 -1
  50. package/dist/npm/selection/select.directive.js +22 -28
  51. package/dist/npm/size.js +6 -0
  52. package/dist/npm/treeview-group.component.js +7 -2
  53. package/dist/npm/treeview-item-content.directive.js +2 -2
  54. package/dist/npm/treeview-item.directive.js +1 -1
  55. package/dist/npm/treeview.component.js +35 -3
  56. package/dist/npm/utils.js +21 -11
  57. package/dist/systemjs/kendo-angular-treeview.js +1 -1
  58. package/package.json +9 -8
@@ -22,7 +22,7 @@ import { DataBoundComponent } from './data-bound-component';
22
22
  import { ExpandableComponent } from './expandable-component';
23
23
  import { SelectionService } from './selection/selection.service';
24
24
  import { TreeViewLookupService } from './treeview-lookup.service';
25
- import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem } from './utils';
25
+ import { closestNode, focusableNode, hasParent, isContent, isFocusable, match, nodeId, isLoadMoreButton, isPresent, nodeIndex, buildTreeItem, getSizeClass } from './utils';
26
26
  var LOAD_MORE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
27
27
  var providers = [
28
28
  ExpandStateService,
@@ -230,6 +230,7 @@ var TreeViewComponent = /** @class */ (function () {
230
230
  this.isActive = false;
231
231
  this.data = new BehaviorSubject([]);
232
232
  this._animate = true;
233
+ this._size = 'medium';
233
234
  this.subscriptions = new Subscription();
234
235
  this.domSubscriptions = [];
235
236
  validatePackage(packageMetadata);
@@ -361,6 +362,30 @@ var TreeViewComponent = /** @class */ (function () {
361
362
  enumerable: true,
362
363
  configurable: true
363
364
  });
365
+ Object.defineProperty(TreeViewComponent.prototype, "size", {
366
+ get: function () {
367
+ return this._size;
368
+ },
369
+ /**
370
+ * Sets the size of the component.
371
+ *
372
+ * The possible values are:
373
+ * * `'small'`
374
+ * * `'medium'` (default)
375
+ * * `'large'`
376
+ * * `null`
377
+ *
378
+ */
379
+ set: function (size) {
380
+ this.renderer.removeClass(this.element.nativeElement, getSizeClass('treeview', this.size));
381
+ if (size) {
382
+ this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', size));
383
+ }
384
+ this._size = size;
385
+ },
386
+ enumerable: true,
387
+ configurable: true
388
+ });
364
389
  TreeViewComponent.prototype.ngOnChanges = function (changes) {
365
390
  this.navigationService.navigable = Boolean(this.navigable);
366
391
  // TODO: should react to changes.loadOnDemand as well - should preload the data or clear the already cached items
@@ -401,6 +426,9 @@ var TreeViewComponent = /** @class */ (function () {
401
426
  _this.attachDomHandlers();
402
427
  });
403
428
  }
429
+ if (this.size) {
430
+ this.renderer.addClass(this.element.nativeElement, getSizeClass('treeview', this.size));
431
+ }
404
432
  };
405
433
  /**
406
434
  * Blurs the focused TreeView item.
@@ -560,7 +588,7 @@ var TreeViewComponent = /** @class */ (function () {
560
588
  return;
561
589
  }
562
590
  var index = nodeId(closestNode(target));
563
- // the disabled check is probably not needed due to the k-state-disabled styles
591
+ // the disabled check is probably not needed due to the k-disabled styles
564
592
  if (!index || this.navigationService.isDisabled(index)) {
565
593
  return;
566
594
  }
@@ -622,7 +650,6 @@ var TreeViewComponent = /** @class */ (function () {
622
650
  });
623
651
  };
624
652
  tslib_1.__decorate([
625
- HostBinding("class.k-widget"),
626
653
  HostBinding("class.k-treeview"),
627
654
  tslib_1.__metadata("design:type", Boolean)
628
655
  ], TreeViewComponent.prototype, "classNames", void 0);
@@ -796,13 +823,18 @@ var TreeViewComponent = /** @class */ (function () {
796
823
  Input(),
797
824
  tslib_1.__metadata("design:type", String)
798
825
  ], TreeViewComponent.prototype, "filter", void 0);
826
+ tslib_1.__decorate([
827
+ Input(),
828
+ tslib_1.__metadata("design:type", String),
829
+ tslib_1.__metadata("design:paramtypes", [String])
830
+ ], TreeViewComponent.prototype, "size", null);
799
831
  TreeViewComponent = tslib_1.__decorate([
800
832
  Component({
801
833
  changeDetection: ChangeDetectionStrategy.Default,
802
834
  exportAs: 'kendoTreeView',
803
835
  providers: providers,
804
836
  selector: 'kendo-treeview',
805
- template: "\n <kendo-textbox\n #filterInput\n *ngIf=\"filterable\"\n [value]=\"filter\"\n [clearButton]=\"true\"\n (valueChange)=\"filterChange.emit($event)\"\n [placeholder]=\"filterInputPlaceholder\"\n >\n <ng-template kendoTextBoxPrefixTemplate>\n <span class=\"k-icon k-i-search\"></span>\n </ng-template>\n </kendo-textbox>\n <ul class=\"k-treeview-lines\"\n kendoTreeViewGroup\n role=\"group\"\n [loadOnDemand]=\"loadOnDemand\"\n [checkboxes]=\"checkboxes\"\n [expandIcons]=\"expandIcons\"\n [selectable]=\"selectable\"\n [touchActions]=\"touchActions\"\n [children]=\"children\"\n [hasChildren]=\"hasChildren\"\n [isChecked]=\"isChecked\"\n [isDisabled]=\"isDisabled\"\n [isExpanded]=\"isExpanded\"\n [isSelected]=\"isSelected\"\n [isVisible]=\"isVisible\"\n [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n [textField]=\"textField\"\n [nodes]=\"fetchNodes\"\n [loadMoreService]=\"loadMoreService\"\n [trackBy]=\"trackBy\"\n >\n </ul>\n <ng-container #assetsContainer></ng-container>\n "
837
+ template: "\n <span\n class=\"k-treeview-filter\"\n *ngIf=\"filterable\"\n >\n <kendo-textbox\n [size]=\"size\"\n [value]=\"filter\"\n [clearButton]=\"true\"\n (valueChange)=\"filterChange.emit($event)\"\n [placeholder]=\"filterInputPlaceholder\"\n >\n <ng-template kendoTextBoxPrefixTemplate>\n <span class=\"k-input-icon k-icon k-i-search\"></span>\n </ng-template>\n </kendo-textbox>\n </span>\n <ul class=\"k-treeview-lines\"\n kendoTreeViewGroup\n role=\"group\"\n [size]=\"size\"\n [loadOnDemand]=\"loadOnDemand\"\n [checkboxes]=\"checkboxes\"\n [expandIcons]=\"expandIcons\"\n [selectable]=\"selectable\"\n [touchActions]=\"touchActions\"\n [children]=\"children\"\n [hasChildren]=\"hasChildren\"\n [isChecked]=\"isChecked\"\n [isDisabled]=\"isDisabled\"\n [isExpanded]=\"isExpanded\"\n [isSelected]=\"isSelected\"\n [isVisible]=\"isVisible\"\n [nodeTemplateRef]=\"nodeTemplateRef?.templateRef\"\n [loadMoreButtonTemplateRef]=\"loadMoreButtonTemplateRef?.templateRef\"\n [textField]=\"textField\"\n [nodes]=\"fetchNodes\"\n [loadMoreService]=\"loadMoreService\"\n [trackBy]=\"trackBy\"\n >\n </ul>\n <ng-container #assetsContainer></ng-container>\n "
806
838
  }),
807
839
  tslib_1.__metadata("design:paramtypes", [ElementRef,
808
840
  ChangeDetectorRef,
package/dist/es/utils.js CHANGED
@@ -90,7 +90,7 @@ export var isFocusable = function (element) {
90
90
  * @hidden
91
91
  */
92
92
  export var isContent = function (element) {
93
- var scopeSelector = '.k-in:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
93
+ var scopeSelector = '.k-treeview-leaf:not(.k-treeview-load-more-button),.k-treeview-item,.k-treeview';
94
94
  if (!isDocumentAvailable()) {
95
95
  return null;
96
96
  }
@@ -99,20 +99,20 @@ export var isContent = function (element) {
99
99
  node = node.parentNode;
100
100
  }
101
101
  if (node) {
102
- return match(node, '.k-in:not(.k-treeview-load-more-button)');
102
+ return match(node, '.k-treeview-leaf:not(.k-treeview-load-more-button)');
103
103
  }
104
104
  };
105
105
  /**
106
106
  * @hidden
107
107
  *
108
- * Returns the nested .k-in:not(.k-treeview-load-more-button) element.
108
+ * Returns the nested .k-treeview-leaf:not(.k-treeview-load-more-button) element.
109
109
  * If the passed parent item is itself a content node, it is returned.
110
110
  */
111
111
  export var getContentElement = function (parent) {
112
112
  if (!isPresent(parent)) {
113
113
  return null;
114
114
  }
115
- var selector = '.k-in:not(.k-treeview-load-more-button)';
115
+ var selector = '.k-treeview-leaf:not(.k-treeview-load-more-button)';
116
116
  if (match(parent, selector)) {
117
117
  return parent;
118
118
  }
@@ -122,7 +122,7 @@ export var getContentElement = function (parent) {
122
122
  * @hidden
123
123
  */
124
124
  export var isLoadMoreButton = function (element) {
125
- return isPresent(closestWithMatch(element, '.k-in.k-treeview-load-more-button'));
125
+ return isPresent(closestWithMatch(element, '.k-treeview-leaf.k-treeview-load-more-button'));
126
126
  };
127
127
  /**
128
128
  * @hidden
@@ -286,16 +286,26 @@ export var fetchLoadedDescendants = function (lookup, filterExpression) {
286
286
  /**
287
287
  * @hidden
288
288
  *
289
- * Compares two arrays to determine whether all unique elements in one, are present in the other.
289
+ * Compares two Seets to determine whether all unique elements in one, are present in the other.
290
290
  * Important:
291
291
  * - it disregards the element order
292
- * - it disregards element repetitions - sameValues([1, 1, 2], [1, 2, 2]) will return true
293
292
  */
294
- export var sameValues = function (a, b) {
295
- if (a.length !== b.length) {
293
+ export var sameValues = function (as, bs) {
294
+ if (as.size !== bs.size) {
296
295
  return false;
297
296
  }
298
- var values = new Set(b);
299
- return a.every(function (v) { return values.has(v); });
297
+ return Array.from(as).every(function (v) { return bs.has(v); });
298
+ };
299
+ /**
300
+ * @hidden
301
+ * Returns the size class based on the component and size input.
302
+ */
303
+ export var getSizeClass = function (component, size) {
304
+ var SIZE_CLASSES = {
305
+ 'small': "k-" + component + "-sm",
306
+ 'medium': "k-" + component + "-md",
307
+ 'large': "k-" + component + "-lg"
308
+ };
309
+ return SIZE_CLASSES[size];
300
310
  };
301
311
  export { ɵ0, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };
@@ -41,8 +41,15 @@ export declare class CheckDirective implements OnChanges, OnDestroy {
41
41
  protected subscriptions: Subscription;
42
42
  private readonly options;
43
43
  private checkActions;
44
- private _checkedKeys;
44
+ /**
45
+ * Reflectes the internal `checkedKeys` state.
46
+ */
47
+ private state;
45
48
  private clickSubscription;
49
+ /**
50
+ * Holds the last emitted `checkedKeys` collection.
51
+ */
52
+ private lastChange;
46
53
  constructor(treeView: TreeViewComponent, zone: NgZone);
47
54
  ngOnChanges(changes: any): void;
48
55
  ngOnDestroy(): void;
@@ -8,6 +8,7 @@ import { TreeViewComponent } from './treeview.component';
8
8
  import { fetchLoadedDescendants, isBoolean, isPresent, noop } from './utils';
9
9
  import { Subscription } from 'rxjs';
10
10
  import { filter, take, switchMap, tap } from 'rxjs/operators';
11
+ import { isChanged } from '@progress/kendo-angular-common';
11
12
  const indexChecked = (keys, index) => keys.filter(k => k === index).length > 0;
12
13
  const ɵ0 = indexChecked;
13
14
  const matchKey = index => k => {
@@ -44,7 +45,10 @@ let CheckDirective = class CheckDirective {
44
45
  'multiple': (e) => this.checkMultiple(e),
45
46
  'single': (e) => this.checkSingle(e)
46
47
  };
47
- this._checkedKeys = [];
48
+ /**
49
+ * Reflectes the internal `checkedKeys` state.
50
+ */
51
+ this.state = new Set();
48
52
  this.subscriptions.add(this.treeView.checkedChange
49
53
  .subscribe((e) => this.check(e)));
50
54
  let expandedItems = [];
@@ -59,16 +63,6 @@ let CheckDirective = class CheckDirective {
59
63
  set isChecked(value) {
60
64
  this.treeView.isChecked = value;
61
65
  }
62
- /**
63
- * Defines the collection that will store the checked keys
64
- * ([see example]({% slug checkboxes_treeview %})).
65
- */
66
- get checkedKeys() {
67
- return this._checkedKeys;
68
- }
69
- set checkedKeys(keys) {
70
- this._checkedKeys = keys;
71
- }
72
66
  get options() {
73
67
  const defaultOptions = {
74
68
  checkChildren: true,
@@ -89,6 +83,9 @@ let CheckDirective = class CheckDirective {
89
83
  this.treeView.checkboxes = this.options.enabled;
90
84
  this.toggleCheckOnClick();
91
85
  }
86
+ if (isChanged('checkedKeys', changes, false) && changes.checkedKeys.currentValue !== this.lastChange) {
87
+ this.state = new Set(changes.checkedKeys.currentValue);
88
+ }
92
89
  }
93
90
  ngOnDestroy() {
94
91
  this.subscriptions.unsubscribe();
@@ -98,11 +95,11 @@ let CheckDirective = class CheckDirective {
98
95
  if (!this.checkKey) {
99
96
  return this.isIndexChecked(index);
100
97
  }
101
- const keyIndex = this.checkedKeys.indexOf(this.itemKey({ dataItem, index }));
102
- return keyIndex > -1 ? 'checked' : 'none';
98
+ const hasKey = this.state.has(this.itemKey({ dataItem, index }));
99
+ return hasKey ? 'checked' : 'none';
103
100
  }
104
101
  isIndexChecked(index) {
105
- const checkedKeys = this.checkedKeys.filter(matchKey(index));
102
+ const checkedKeys = Array.from(this.state).filter(matchKey(index));
106
103
  if (indexChecked(checkedKeys, index)) {
107
104
  return 'checked';
108
105
  }
@@ -133,7 +130,11 @@ let CheckDirective = class CheckDirective {
133
130
  }
134
131
  checkSingle(node) {
135
132
  const key = this.itemKey(node.item);
136
- this.checkedKeys = this.checkedKeys[0] !== key ? [key] : [];
133
+ const hasKey = this.state.has(key);
134
+ this.state.clear();
135
+ if (!hasKey) {
136
+ this.state.add(key);
137
+ }
137
138
  this.notify();
138
139
  }
139
140
  checkMultiple(node) {
@@ -168,7 +169,6 @@ let CheckDirective = class CheckDirective {
168
169
  if (!isPresent(currentKey)) {
169
170
  return;
170
171
  }
171
- const checkedKeys = new Set(this.checkedKeys);
172
172
  const pendingCheck = [currentKey];
173
173
  if (this.options.checkChildren) {
174
174
  const descendants = fetchLoadedDescendants(node, ({ item }) => this.treeView.isVisible(item.dataItem, item.index) &&
@@ -176,61 +176,57 @@ let CheckDirective = class CheckDirective {
176
176
  .map(({ item }) => this.itemKey(item));
177
177
  pendingCheck.push(...descendants);
178
178
  }
179
- const shouldCheck = !checkedKeys.has(currentKey);
179
+ const shouldCheck = !this.state.has(currentKey);
180
180
  pendingCheck.forEach(key => {
181
181
  if (shouldCheck) {
182
- checkedKeys.add(key);
182
+ this.state.add(key);
183
183
  }
184
184
  else {
185
- checkedKeys.delete(key);
185
+ this.state.delete(key);
186
186
  }
187
187
  });
188
- this.checkedKeys = Array.from(checkedKeys);
189
188
  }
190
189
  checkParents(parent) {
191
190
  if (!isPresent(parent)) {
192
191
  return;
193
192
  }
194
- const checkedKeys = new Set(this.checkedKeys);
195
193
  let currentParent = parent;
196
194
  while (currentParent) {
197
195
  const parentKey = this.itemKey(currentParent.item);
198
- const allChildrenSelected = currentParent.children.every(item => checkedKeys.has(this.itemKey(item)));
196
+ const allChildrenSelected = currentParent.children.every(item => this.state.has(this.itemKey(item)));
199
197
  if (allChildrenSelected) {
200
- checkedKeys.add(parentKey);
198
+ this.state.add(parentKey);
201
199
  }
202
200
  else {
203
- checkedKeys.delete(parentKey);
201
+ this.state.delete(parentKey);
204
202
  }
205
203
  currentParent = currentParent.parent;
206
204
  }
207
- this.checkedKeys = Array.from(checkedKeys);
208
205
  }
209
206
  notify() {
210
- this.checkedKeysChange.emit(this.checkedKeys.slice());
207
+ this.lastChange = Array.from(this.state);
208
+ this.checkedKeysChange.emit(this.lastChange);
211
209
  }
212
210
  addCheckedItemsChildren(lookups) {
213
211
  if (!isPresent(lookups) || lookups.length === 0) {
214
212
  return;
215
213
  }
216
- const initiallyCheckedItemsCount = this.checkedKeys.length;
217
- const checkedKeys = new Set(this.checkedKeys);
214
+ const initiallyCheckedItemsCount = this.state.size;
218
215
  lookups.forEach(lookup => {
219
216
  const itemKey = this.itemKey(lookup.item);
220
- if (!checkedKeys.has(itemKey)) {
217
+ if (!this.state.has(itemKey)) {
221
218
  return;
222
219
  }
223
220
  lookup.children.forEach(item => {
224
221
  // ensure both the parent item and each child node is enabled
225
222
  if (!this.treeView.isDisabled(lookup.item.dataItem, lookup.item.index) &&
226
223
  !this.treeView.isDisabled(item.dataItem, item.index)) {
227
- checkedKeys.add(this.itemKey(item));
224
+ this.state.add(this.itemKey(item));
228
225
  }
229
226
  });
230
227
  });
231
- const hasNewlyCheckedItems = initiallyCheckedItemsCount !== checkedKeys.size;
228
+ const hasNewlyCheckedItems = initiallyCheckedItemsCount !== this.state.size;
232
229
  if (hasNewlyCheckedItems) {
233
- this.checkedKeys = Array.from(checkedKeys);
234
230
  this.zone.run(() => this.notify());
235
231
  }
236
232
  }
@@ -246,9 +242,8 @@ tslib_1.__decorate([
246
242
  ], CheckDirective.prototype, "checkKey", void 0);
247
243
  tslib_1.__decorate([
248
244
  Input(),
249
- tslib_1.__metadata("design:type", Array),
250
- tslib_1.__metadata("design:paramtypes", [Array])
251
- ], CheckDirective.prototype, "checkedKeys", null);
245
+ tslib_1.__metadata("design:type", Array)
246
+ ], CheckDirective.prototype, "checkedKeys", void 0);
252
247
  tslib_1.__decorate([
253
248
  Input('kendoTreeViewCheckable'),
254
249
  tslib_1.__metadata("design:type", Object)
@@ -3,6 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core';
6
+ import { TreeViewSize } from '../size';
6
7
  import { CheckedState } from './checked-state';
7
8
  /**
8
9
  * @hidden
@@ -39,12 +40,17 @@ export declare class CheckBoxComponent implements OnInit, DoCheck {
39
40
  * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
40
41
  */
41
42
  tabindex: number;
43
+ /**
44
+ * Specifies the size of the component.
45
+ */
46
+ size: TreeViewSize;
42
47
  /**
43
48
  * Fires when the user changes the check state of the component.
44
49
  */
45
50
  checkStateChange: EventEmitter<CheckedState>;
46
51
  readonly indeterminate: boolean;
47
52
  readonly checked: boolean;
53
+ readonly checkBoxClasses: any;
48
54
  private checkState;
49
55
  constructor(element: ElementRef, renderer: Renderer2, changeDetector: ChangeDetectorRef);
50
56
  ngOnInit(): void;
@@ -5,6 +5,7 @@
5
5
  import * as tslib_1 from "tslib";
6
6
  import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2 } from '@angular/core';
7
7
  import { guid } from '@progress/kendo-angular-common';
8
+ import { getSizeClass } from '../utils';
8
9
  /**
9
10
  * @hidden
10
11
  *
@@ -24,6 +25,10 @@ let CheckBoxComponent = class CheckBoxComponent {
24
25
  * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
25
26
  */
26
27
  this.tabindex = 0;
28
+ /**
29
+ * Specifies the size of the component.
30
+ */
31
+ this.size = 'medium';
27
32
  /**
28
33
  * Fires when the user changes the check state of the component.
29
34
  */
@@ -39,6 +44,9 @@ let CheckBoxComponent = class CheckBoxComponent {
39
44
  get checked() {
40
45
  return this.checkState === 'checked';
41
46
  }
47
+ get checkBoxClasses() {
48
+ return `k-checkbox ${this.size ? getSizeClass('checkbox', this.size) : ''} k-rounded-md`;
49
+ }
42
50
  ngOnInit() {
43
51
  this.renderer.removeAttribute(this.element.nativeElement, "tabindex");
44
52
  }
@@ -82,6 +90,10 @@ tslib_1.__decorate([
82
90
  Input(),
83
91
  tslib_1.__metadata("design:type", Number)
84
92
  ], CheckBoxComponent.prototype, "tabindex", void 0);
93
+ tslib_1.__decorate([
94
+ Input(),
95
+ tslib_1.__metadata("design:type", String)
96
+ ], CheckBoxComponent.prototype, "size", void 0);
85
97
  tslib_1.__decorate([
86
98
  Output(),
87
99
  tslib_1.__metadata("design:type", EventEmitter)
@@ -91,8 +103,8 @@ CheckBoxComponent = tslib_1.__decorate([
91
103
  selector: 'kendo-checkbox',
92
104
  template: `
93
105
  <input
94
- class="k-checkbox"
95
106
  type="checkbox"
107
+ [class]="checkBoxClasses"
96
108
  [id]="id"
97
109
  [checked]="checked"
98
110
  [indeterminate]="indeterminate"
@@ -92,12 +92,12 @@ export const getDropPosition = (draggedItem, target, clientY, targetTreeView, co
92
92
  if (!(isPresent(draggedItem) && isPresent(target) && isPresent(targetTreeView) && isPresent(containerOffset))) {
93
93
  return;
94
94
  }
95
- // the .k-mid element starts just after the checkbox/expand arrow and stretches till the end of the treeview on the right
96
- const item = closestWithMatch(target, '.k-mid');
95
+ // the .k-treeview-mid element starts just after the checkbox/expand arrow and stretches till the end of the treeview on the right
96
+ const item = closestWithMatch(target, '.k-treeview-mid');
97
97
  if (!isPresent(item)) {
98
98
  return;
99
99
  }
100
- // the content element (.k-in:not(.k-treeview-load-more-button)) holds just the treeview item text
100
+ // the content element (.k-treeview-leaf:not(.k-treeview-load-more-button)) holds just the treeview item text
101
101
  const content = getContentElement(item);
102
102
  const targetChildOfDraggedItem = hasParent(item, closestNode(draggedItem));
103
103
  if (!isPresent(content) || (content === draggedItem) || targetChildOfDraggedItem) {
@@ -102,7 +102,7 @@ let DragAndDropDirective = class DragAndDropDirective {
102
102
  return;
103
103
  }
104
104
  // store the drag target on press, show it only when it's actually dragged
105
- this.draggedItem = closestWithMatch(originalEvent.target, '.k-in');
105
+ this.draggedItem = closestWithMatch(originalEvent.target, '.k-treeview-leaf');
106
106
  // record the current pointer down coords - copared to the `startDragAfter` value to calculate whether to initiate dragging
107
107
  this.pendingDragStartEvent = originalEvent;
108
108
  }
@@ -122,7 +122,7 @@ let DragAndDropDirective = class DragAndDropDirective {
122
122
  }
123
123
  const targetTreeView = this.getTargetTreeView(dropTarget);
124
124
  const dropPosition = getDropPosition(this.draggedItem, dropTarget, clientY, targetTreeView, this.containerOffset);
125
- const dropHintAnchor = closestWithMatch(dropTarget, '.k-mid');
125
+ const dropHintAnchor = closestWithMatch(dropTarget, '.k-treeview-mid');
126
126
  const dropAction = getDropAction(dropPosition, dropTarget);
127
127
  const sourceItem = treeItemFromEventTarget(this.treeview, this.draggedItem);
128
128
  const destinationItem = treeItemFromEventTarget(targetTreeView, dropTarget);
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { EventEmitter, OnDestroy } from '@angular/core';
5
+ import { EventEmitter, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';
6
6
  import { ExpandableComponent } from './expandable-component';
7
7
  import { Subscription } from 'rxjs';
8
8
  import { TreeItem } from './treeitem.interface';
@@ -17,7 +17,7 @@ interface ExpandTreeItem extends TreeItem {
17
17
  * A directive which manages the expanded state of the TreeView.
18
18
  * ([see example]({% slug expandedstate_treeview %})).
19
19
  */
20
- export declare class ExpandDirective implements OnDestroy {
20
+ export declare class ExpandDirective implements OnDestroy, OnChanges {
21
21
  protected component: ExpandableComponent;
22
22
  /**
23
23
  * @hidden
@@ -43,10 +43,18 @@ export declare class ExpandDirective implements OnDestroy {
43
43
  */
44
44
  expandedKeys: any[];
45
45
  protected subscriptions: Subscription;
46
- private _expandedKeys;
46
+ /**
47
+ * Reflectes the internal `expandedKeys` state.
48
+ */
49
+ private state;
47
50
  private originalExpandedKeys;
48
51
  private isFiltered;
52
+ /**
53
+ * Holds the last emitted `expandedKeys` collection.
54
+ */
55
+ private lastChange;
49
56
  constructor(component: ExpandableComponent);
57
+ ngOnChanges(changes: SimpleChanges): void;
50
58
  ngOnDestroy(): void;
51
59
  /**
52
60
  * @hidden
@@ -62,5 +70,6 @@ export declare class ExpandDirective implements OnDestroy {
62
70
  * Fills array with the expand key of every node.
63
71
  */
64
72
  private getEveryExpandKey;
73
+ private notify;
65
74
  }
66
75
  export {};