@progress/kendo-angular-treeview 5.4.3 → 6.0.0
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/LICENSE.md +1 -1
- package/NOTICE.txt +119 -79
- package/README.md +1 -1
- package/dist/cdn/js/kendo-angular-treeview.js +18 -18
- package/dist/cdn/main.js +1 -1
- package/dist/es/check.directive.js +30 -39
- package/dist/es/checkbox/checkbox.component.js +17 -1
- package/dist/es/drag-and-drop/drag-and-drop-utils.js +3 -3
- package/dist/es/drag-and-drop/drag-and-drop.directive.js +2 -2
- package/dist/es/expand.directive.js +40 -41
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/selection/select.directive.js +22 -28
- package/dist/es/size.js +4 -0
- package/dist/es/treeview-group.component.js +7 -2
- package/dist/es/treeview-item-content.directive.js +2 -2
- package/dist/es/treeview-item.directive.js +1 -1
- package/dist/es/treeview.component.js +36 -4
- package/dist/es/utils.js +21 -11
- package/dist/es2015/check.directive.d.ts +8 -1
- package/dist/es2015/check.directive.js +30 -35
- package/dist/es2015/checkbox/checkbox.component.d.ts +6 -0
- package/dist/es2015/checkbox/checkbox.component.js +13 -1
- package/dist/es2015/drag-and-drop/drag-and-drop-utils.js +3 -3
- package/dist/es2015/drag-and-drop/drag-and-drop.directive.js +2 -2
- package/dist/es2015/expand.directive.d.ts +12 -3
- package/dist/es2015/expand.directive.js +39 -36
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/selection/select.directive.d.ts +11 -3
- package/dist/es2015/selection/select.directive.js +22 -24
- package/dist/es2015/size.d.ts +14 -0
- package/dist/es2015/size.js +4 -0
- package/dist/es2015/treeview-group.component.d.ts +2 -0
- package/dist/es2015/treeview-group.component.js +49 -35
- package/dist/es2015/treeview-item-content.directive.js +2 -2
- package/dist/es2015/treeview-item.directive.js +1 -1
- package/dist/es2015/treeview.component.d.ts +13 -0
- package/dist/es2015/treeview.component.js +46 -13
- package/dist/es2015/utils.d.ts +9 -4
- package/dist/es2015/utils.js +21 -11
- package/dist/fesm2015/index.js +224 -163
- package/dist/fesm5/index.js +177 -134
- package/dist/npm/check.directive.js +30 -39
- package/dist/npm/checkbox/checkbox.component.js +17 -1
- package/dist/npm/drag-and-drop/drag-and-drop-utils.js +3 -3
- package/dist/npm/drag-and-drop/drag-and-drop.directive.js +2 -2
- package/dist/npm/expand.directive.js +40 -41
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/selection/select.directive.js +22 -28
- package/dist/npm/size.js +6 -0
- package/dist/npm/treeview-group.component.js +7 -2
- package/dist/npm/treeview-item-content.directive.js +2 -2
- package/dist/npm/treeview-item.directive.js +1 -1
- package/dist/npm/treeview.component.js +35 -3
- package/dist/npm/utils.js +21 -11
- package/dist/systemjs/kendo-angular-treeview.js +1 -1
- 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-
|
|
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 <
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
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 (
|
|
295
|
-
if (
|
|
293
|
+
export var sameValues = function (as, bs) {
|
|
294
|
+
if (as.size !== bs.size) {
|
|
296
295
|
return false;
|
|
297
296
|
}
|
|
298
|
-
|
|
299
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
102
|
-
return
|
|
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.
|
|
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
|
-
|
|
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 = !
|
|
179
|
+
const shouldCheck = !this.state.has(currentKey);
|
|
180
180
|
pendingCheck.forEach(key => {
|
|
181
181
|
if (shouldCheck) {
|
|
182
|
-
|
|
182
|
+
this.state.add(key);
|
|
183
183
|
}
|
|
184
184
|
else {
|
|
185
|
-
|
|
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 =>
|
|
196
|
+
const allChildrenSelected = currentParent.children.every(item => this.state.has(this.itemKey(item)));
|
|
199
197
|
if (allChildrenSelected) {
|
|
200
|
-
|
|
198
|
+
this.state.add(parentKey);
|
|
201
199
|
}
|
|
202
200
|
else {
|
|
203
|
-
|
|
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.
|
|
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.
|
|
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 (!
|
|
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
|
-
|
|
224
|
+
this.state.add(this.itemKey(item));
|
|
228
225
|
}
|
|
229
226
|
});
|
|
230
227
|
});
|
|
231
|
-
const hasNewlyCheckedItems = initiallyCheckedItemsCount !==
|
|
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
|
-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
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 {};
|