@progress/kendo-angular-dropdowns 19.1.1-develop.2 → 19.1.2-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/autocomplete/autocomplete.component.d.ts +62 -53
- package/autocomplete/autocomplete.module.d.ts +9 -1
- package/comboboxes/combobox-column/column-cell-template.directive.d.ts +6 -6
- package/comboboxes/combobox-column/column-header-template.directive.d.ts +5 -4
- package/comboboxes/combobox-column/combobox-column.component.d.ts +21 -17
- package/comboboxes/combobox-column/util.d.ts +7 -4
- package/comboboxes/combobox.component.d.ts +28 -45
- package/comboboxes/combobox.module.d.ts +11 -2
- package/comboboxes/multicolumncombobox.component.d.ts +12 -2
- package/dropdownlist/dropdownlist.component.d.ts +53 -75
- package/dropdownlist/dropdownlist.module.d.ts +29 -11
- package/dropdowns.module.d.ts +8 -20
- package/dropdowntrees/checked-state/base-check.directive.d.ts +4 -7
- package/dropdowntrees/checked-state/check-all.directive.d.ts +4 -7
- package/dropdowntrees/checked-state/check.directive.d.ts +6 -10
- package/dropdowntrees/checked-state/checkable-settings.d.ts +2 -4
- package/dropdowntrees/checked-state/checked-item.d.ts +2 -2
- package/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.d.ts +3 -3
- package/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.d.ts +2 -2
- package/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.d.ts +3 -3
- package/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.d.ts +2 -2
- package/dropdowntrees/dropdowntree.component.d.ts +3 -3
- package/dropdowntrees/dropdowntrees.module.d.ts +1 -0
- package/dropdowntrees/expanded-state/expand.directive.d.ts +1 -1
- package/dropdowntrees/multiselecttree.component.d.ts +139 -120
- package/dropdowntrees/summary-tag/summary-tag.directive.d.ts +8 -6
- package/dropdowntrees/templates/node-template.directive.d.ts +4 -3
- package/esm2022/autocomplete/autocomplete.component.mjs +62 -53
- package/esm2022/autocomplete/autocomplete.module.mjs +9 -1
- package/esm2022/comboboxes/combobox-column/column-cell-template.directive.mjs +6 -6
- package/esm2022/comboboxes/combobox-column/column-header-template.directive.mjs +5 -4
- package/esm2022/comboboxes/combobox-column/combobox-column.component.mjs +21 -17
- package/esm2022/comboboxes/combobox-column/util.mjs +10 -5
- package/esm2022/comboboxes/combobox.component.mjs +28 -45
- package/esm2022/comboboxes/combobox.module.mjs +11 -2
- package/esm2022/comboboxes/multicolumncombobox.component.mjs +12 -2
- package/esm2022/dropdownlist/dropdownlist.component.mjs +53 -75
- package/esm2022/dropdownlist/dropdownlist.module.mjs +29 -11
- package/esm2022/dropdowns.module.mjs +8 -20
- package/esm2022/dropdowntrees/checked-state/base-check.directive.mjs +1 -1
- package/esm2022/dropdowntrees/checked-state/check-all.directive.mjs +4 -7
- package/esm2022/dropdowntrees/checked-state/check.directive.mjs +6 -10
- package/esm2022/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.mjs +3 -3
- package/esm2022/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.mjs +2 -2
- package/esm2022/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.mjs +3 -3
- package/esm2022/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.mjs +2 -2
- package/esm2022/dropdowntrees/dropdowntree.component.mjs +3 -3
- package/esm2022/dropdowntrees/dropdowntrees.module.mjs +1 -0
- package/esm2022/dropdowntrees/expanded-state/expand.directive.mjs +1 -1
- package/esm2022/dropdowntrees/multiselecttree.component.mjs +139 -120
- package/esm2022/dropdowntrees/summary-tag/summary-tag.directive.mjs +8 -6
- package/esm2022/dropdowntrees/templates/node-template.directive.mjs +4 -3
- package/esm2022/multiselect/multiselect.component.mjs +119 -163
- package/esm2022/multiselect/multiselect.module.mjs +13 -5
- package/esm2022/multiselect/summary-tag.directive.mjs +6 -4
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-dropdowns.mjs +571 -576
- package/multiselect/multiselect.component.d.ts +119 -163
- package/multiselect/multiselect.module.d.ts +13 -5
- package/multiselect/summary-tag.directive.d.ts +6 -4
- package/package.json +10 -10
- package/schematics/ngAdd/index.js +2 -2
@@ -53,7 +53,34 @@ const DEFAULT_SIZE = 'medium';
|
|
53
53
|
const DEFAULT_ROUNDED = 'medium';
|
54
54
|
const DEFAULT_FILL_MODE = 'solid';
|
55
55
|
/**
|
56
|
-
* Represents the
|
56
|
+
* Represents the Kendo UI for Angular [MultiSelectTree]({% slug overview_multiselecttree %}) component.
|
57
|
+
*
|
58
|
+
* The `MultiSelectTree` lets you select multiple items from hierarchical data in a tree structure.
|
59
|
+
* It provides built-in filtering, checkboxes, and adaptive rendering for mobile devices.
|
60
|
+
*
|
61
|
+
* @example
|
62
|
+
* ```typescript
|
63
|
+
* @Component({
|
64
|
+
* selector: 'my-app',
|
65
|
+
* template: `
|
66
|
+
* <kendo-multiselecttree
|
67
|
+
* [data]="data"
|
68
|
+
* textField="text"
|
69
|
+
* valueField="value"
|
70
|
+
* [(value)]="selectedValues">
|
71
|
+
* </kendo-multiselecttree>
|
72
|
+
* `
|
73
|
+
* })
|
74
|
+
* export class AppComponent {
|
75
|
+
* public data = [
|
76
|
+
* { text: 'Root', value: 1, items: [
|
77
|
+
* { text: 'Child 1', value: 2 },
|
78
|
+
* { text: 'Child 2', value: 3 }
|
79
|
+
* ]}
|
80
|
+
* ];
|
81
|
+
* public selectedValues = [2, 3];
|
82
|
+
* }
|
83
|
+
* ```
|
57
84
|
*/
|
58
85
|
export class MultiSelectTreeComponent {
|
59
86
|
injector;
|
@@ -134,18 +161,23 @@ export class MultiSelectTreeComponent {
|
|
134
161
|
}
|
135
162
|
}
|
136
163
|
/**
|
137
|
-
*
|
164
|
+
* Controls the adaptive mode behavior of the component.
|
165
|
+
* Set to `auto` to enable automatic adaptive rendering on small screens.
|
166
|
+
*
|
167
|
+
* @default 'none'
|
138
168
|
*/
|
139
169
|
adaptiveMode = 'none';
|
140
170
|
/**
|
141
|
-
* Sets the title
|
142
|
-
*
|
171
|
+
* Sets the title text for the ActionSheet in adaptive mode on small screens.
|
172
|
+
* Uses the component label by default if not set.
|
173
|
+
*
|
174
|
+
* @default ''
|
143
175
|
*/
|
144
176
|
adaptiveTitle = '';
|
145
177
|
/**
|
146
|
-
* Sets the subtitle
|
147
|
-
*
|
148
|
-
|
178
|
+
* Sets the subtitle text for the ActionSheet in adaptive mode on small screens.
|
179
|
+
* No subtitle appears by default.
|
180
|
+
*/
|
149
181
|
adaptiveSubtitle;
|
150
182
|
/**
|
151
183
|
* @hidden
|
@@ -252,7 +284,10 @@ export class MultiSelectTreeComponent {
|
|
252
284
|
filterInput;
|
253
285
|
checkAllInput;
|
254
286
|
/**
|
255
|
-
*
|
287
|
+
* Sets the tab index for keyboard navigation.
|
288
|
+
* Use `-1` to remove the component from the tab sequence.
|
289
|
+
*
|
290
|
+
* @default 0
|
256
291
|
*/
|
257
292
|
set tabindex(value) {
|
258
293
|
const providedTabIndex = parseNumber(value);
|
@@ -263,14 +298,9 @@ export class MultiSelectTreeComponent {
|
|
263
298
|
return this.disabled ? -1 : this._tabindex;
|
264
299
|
}
|
265
300
|
/**
|
266
|
-
* Sets the size of the component.
|
267
|
-
*
|
268
|
-
* The possible values are:
|
269
|
-
* * `small`
|
270
|
-
* * `medium` (default)
|
271
|
-
* * `large`
|
272
|
-
* * `none`
|
301
|
+
* Sets the visual size of the component.
|
273
302
|
*
|
303
|
+
* @default 'medium'
|
274
304
|
*/
|
275
305
|
set size(size) {
|
276
306
|
const newSize = size ? size : DEFAULT_SIZE;
|
@@ -284,15 +314,9 @@ export class MultiSelectTreeComponent {
|
|
284
314
|
return this._size;
|
285
315
|
}
|
286
316
|
/**
|
287
|
-
* Sets the border radius of the component.
|
288
|
-
*
|
289
|
-
* The possible values are:
|
290
|
-
* * `small`
|
291
|
-
* * `medium` (default)
|
292
|
-
* * `large`
|
293
|
-
* * `full`
|
294
|
-
* * `none`
|
317
|
+
* Sets the border radius style of the component.
|
295
318
|
*
|
319
|
+
* @default 'medium'
|
296
320
|
*/
|
297
321
|
set rounded(rounded) {
|
298
322
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
|
@@ -306,14 +330,9 @@ export class MultiSelectTreeComponent {
|
|
306
330
|
return this._rounded;
|
307
331
|
}
|
308
332
|
/**
|
309
|
-
* Sets the
|
310
|
-
*
|
311
|
-
* The possible values are:
|
312
|
-
* * `flat`
|
313
|
-
* * `solid` (default)
|
314
|
-
* * `outline`
|
315
|
-
* * `none`
|
333
|
+
* Sets the fill style for the component background and borders.
|
316
334
|
*
|
335
|
+
* @default 'solid'
|
317
336
|
*/
|
318
337
|
set fillMode(fillMode) {
|
319
338
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
@@ -327,14 +346,7 @@ export class MultiSelectTreeComponent {
|
|
327
346
|
return this._fillMode;
|
328
347
|
}
|
329
348
|
/**
|
330
|
-
* Configures the popup
|
331
|
-
*
|
332
|
-
* The available options are:
|
333
|
-
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
|
334
|
-
* - `width: Number | String`—Sets the width of the popup container. By default, the width of the host element is used. If set to `auto`, the component automatically adjusts the width of the popup and no item labels are wrapped.
|
335
|
-
* - `height: Number`—Sets the height of the popup container.
|
336
|
-
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
|
337
|
-
* - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
|
349
|
+
* Configures the popup container settings: animation, dimensions, styling and positioning.
|
338
350
|
*/
|
339
351
|
set popupSettings(settings) {
|
340
352
|
this._popupSettings = Object.assign({}, DEFAULT_POPUP_SETTINGS, settings);
|
@@ -346,8 +358,10 @@ export class MultiSelectTreeComponent {
|
|
346
358
|
return this._popupSettings;
|
347
359
|
}
|
348
360
|
/**
|
349
|
-
*
|
350
|
-
*
|
361
|
+
* Configures the checkbox behavior for the MultiSelecTree nodes.
|
362
|
+
* Use `checkableSettings` to control parent-child selection relationships and click interactions.
|
363
|
+
*
|
364
|
+
* @default '{ checkChildren: true, checkOnClick: true }'
|
351
365
|
*/
|
352
366
|
set checkableSettings(settings) {
|
353
367
|
this._checkableSettings = Object.assign({}, DEFAULT_CHECKABLE_SETTINGS, settings);
|
@@ -356,9 +370,8 @@ export class MultiSelectTreeComponent {
|
|
356
370
|
return this._checkableSettings;
|
357
371
|
}
|
358
372
|
/**
|
359
|
-
* Sets the data
|
360
|
-
*
|
361
|
-
* > The data has to be provided in an array-like list with objects.
|
373
|
+
* Sets the hierarchical data source for the tree structure.
|
374
|
+
* Provide an array of objects that contain the tree data and structure.
|
362
375
|
*/
|
363
376
|
set data(data) {
|
364
377
|
this._nodes = data;
|
@@ -372,10 +385,8 @@ export class MultiSelectTreeComponent {
|
|
372
385
|
return this._nodes;
|
373
386
|
}
|
374
387
|
/**
|
375
|
-
* Sets the
|
376
|
-
*
|
377
|
-
* To define the type, use the `valuePrimitive` option.
|
378
|
-
*
|
388
|
+
* Sets the selected values in the component.
|
389
|
+
* Accepts primitive values if `valuePrimitive` is `true`, or objects if `false`.
|
379
390
|
*/
|
380
391
|
set value(value) {
|
381
392
|
this._value = value ? value : [];
|
@@ -385,8 +396,8 @@ export class MultiSelectTreeComponent {
|
|
385
396
|
return this._value;
|
386
397
|
}
|
387
398
|
/**
|
388
|
-
*
|
389
|
-
*
|
399
|
+
* Sets the data items that correspond to the selected values.
|
400
|
+
* Required when using primitive values to resolve the full data objects.
|
390
401
|
*/
|
391
402
|
set dataItems(items) {
|
392
403
|
this._dataItems = (items || []).map((dataItem, index) => {
|
@@ -417,43 +428,41 @@ export class MultiSelectTreeComponent {
|
|
417
428
|
});
|
418
429
|
}
|
419
430
|
/**
|
420
|
-
*
|
421
|
-
* MultiSelectTree ([see example]({% slug databinding_multiselecttree %})). If the `textField`
|
422
|
-
* input is set to an array, each hierarchical level uses the field that corresponds
|
423
|
-
* to the same index in the array, or the last item in the array.
|
424
|
-
*
|
431
|
+
* Specifies which data field provides the display text for tree nodes.
|
425
432
|
* > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
|
426
433
|
*/
|
427
434
|
textField;
|
428
435
|
/**
|
429
|
-
*
|
430
|
-
* MultiSelectTree ([see example]({% slug databinding_multiselecttree %})). If the `valueField`
|
431
|
-
* input is set to an array, each hierarchical level uses the field that corresponds
|
432
|
-
* to the same index in the array, or the last item in the array.
|
433
|
-
*
|
436
|
+
* Specifies which data field provides the unique values for tree nodes.
|
434
437
|
* > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
|
435
438
|
*/
|
436
439
|
valueField;
|
437
440
|
/**
|
438
441
|
* Sets the levels in the data set where the values can be found when `valueField` is an Array.
|
439
442
|
* The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
|
443
|
+
*
|
444
|
+
* @default []
|
440
445
|
*/
|
441
446
|
valueDepth = [];
|
442
447
|
/**
|
443
|
-
*
|
448
|
+
* Controls the loading state visual indicator.
|
449
|
+
* Shows a loading spinner when set to `true`.
|
450
|
+
*
|
451
|
+
* @default false
|
444
452
|
*/
|
445
453
|
loading;
|
446
454
|
/**
|
447
|
-
*
|
455
|
+
* Sets the placeholder text shown when no items are selected.
|
456
|
+
* Helps guide users on what action to take.
|
457
|
+
*
|
458
|
+
* @default ''
|
448
459
|
*/
|
449
460
|
placeholder = '';
|
450
461
|
/**
|
451
|
-
* Sets the height of the options list in the popup.
|
462
|
+
* Sets the maximum height of the options list in the popup.
|
463
|
+
* Controls vertical scrolling when content exceeds this height.
|
452
464
|
*
|
453
|
-
*
|
454
|
-
* > To set the height of the popup container, use `popupSettings.height`.
|
455
|
-
*
|
456
|
-
* > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
|
465
|
+
* @default 200
|
457
466
|
*/
|
458
467
|
set listHeight(_listHeight) {
|
459
468
|
this._listHeight = _listHeight;
|
@@ -466,127 +475,138 @@ export class MultiSelectTreeComponent {
|
|
466
475
|
}
|
467
476
|
_listHeight = 200;
|
468
477
|
/**
|
469
|
-
*
|
478
|
+
* Controls whether the component accepts user input.
|
479
|
+
* Prevents all user interactions when set to `true`.
|
480
|
+
*
|
481
|
+
* @default false
|
470
482
|
*/
|
471
483
|
disabled = false;
|
472
484
|
/**
|
473
|
-
* Sets the read-only
|
485
|
+
* Sets the component to read-only mode.
|
486
|
+
* Displays current selections but prevents changes.
|
474
487
|
*
|
475
488
|
* @default false
|
476
489
|
*/
|
477
490
|
readonly = false;
|
478
491
|
/**
|
479
|
-
*
|
480
|
-
*
|
481
|
-
*
|
492
|
+
* Determines the data type of selected values.
|
493
|
+
* Set to `true` for primitive values, false for complex objects.
|
494
|
+
*
|
495
|
+
* @default false
|
482
496
|
*/
|
483
497
|
valuePrimitive = false;
|
484
498
|
/**
|
485
|
-
*
|
499
|
+
* Controls when child nodes load from the data source.
|
500
|
+
* Set to `true` to load children only when parent nodes expand.
|
501
|
+
*
|
486
502
|
* @default false
|
487
503
|
*/
|
488
504
|
loadOnDemand = false;
|
489
505
|
/**
|
490
|
-
*
|
491
|
-
*
|
492
|
-
* Used by the kendo-label and kendo-floatinglabel to access and associate the focusable element with the provided label via aria-labelledby.
|
506
|
+
* Sets the unique identifier for the focusable element.
|
507
|
+
* Used internally for accessibility and label association.
|
493
508
|
*/
|
494
509
|
focusableId = `k-${guid()}`;
|
495
510
|
/**
|
496
|
-
*
|
497
|
-
*
|
511
|
+
* Shows a clear button to reset all selections.
|
512
|
+
* Appears on hover when selections exist and the component is not disabled.
|
513
|
+
*
|
498
514
|
* @default true
|
499
515
|
*/
|
500
516
|
clearButton = true;
|
501
517
|
/**
|
502
|
-
*
|
503
|
-
*
|
504
|
-
*
|
518
|
+
* Enables the built-in filter input for searching tree nodes.
|
519
|
+
* Shows a search box above the tree when enabled.
|
520
|
+
*
|
505
521
|
* @default false
|
506
522
|
*/
|
507
523
|
filterable = false;
|
508
524
|
/**
|
509
|
-
*
|
510
|
-
*
|
525
|
+
* Shows a checkbox to select or deselect all visible tree nodes.
|
526
|
+
* Appears above the tree when checkboxes are enabled.
|
527
|
+
*
|
511
528
|
* @default false
|
512
529
|
*/
|
513
530
|
checkAll = false;
|
514
531
|
/**
|
515
|
-
*
|
532
|
+
* Determines if a tree node contains child nodes.
|
533
|
+
* Return `true` if the node has children, false otherwise.
|
516
534
|
*/
|
517
535
|
hasChildren = hasChildren;
|
518
536
|
/**
|
519
|
-
*
|
537
|
+
* Function that provides child nodes for a parent node.
|
538
|
+
* Return an Observable of child objects for the given parent.
|
520
539
|
*/
|
521
540
|
fetchChildren = fetchChildren;
|
522
541
|
/**
|
523
|
-
*
|
542
|
+
* Determines if a specific node is expanded. The function is executed for each data item.
|
524
543
|
*/
|
525
544
|
isNodeExpanded;
|
526
545
|
/**
|
527
|
-
*
|
528
|
-
* Useful for custom filtering implementations.
|
546
|
+
* Determines if a tree node should be hidden.
|
529
547
|
*/
|
530
548
|
isNodeVisible = isNodeVisible;
|
531
549
|
/**
|
532
|
-
*
|
550
|
+
* Determines if a tree node is disabled. The function is executed for each data item.
|
533
551
|
*/
|
534
552
|
itemDisabled = itemDisabled;
|
535
553
|
/**
|
536
|
-
* A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
|
537
|
-
*
|
538
554
|
* @param { Any[] } dataItems - The selected data items from the list.
|
539
555
|
* @returns { Any[] } - The tags that will be rendered by the component.
|
556
|
+
* Transforms the provided array of data items into an array of tags.
|
540
557
|
*/
|
541
558
|
tagMapper = (tags) => tags || [];
|
542
559
|
/**
|
543
|
-
* Fires
|
560
|
+
* Fires when the component receives focus.
|
544
561
|
*/
|
545
562
|
onFocus = new EventEmitter();
|
546
563
|
/**
|
547
|
-
* Fires
|
564
|
+
* Fires when the component gets blurred.
|
548
565
|
*/
|
549
566
|
onBlur = new EventEmitter();
|
550
567
|
/**
|
551
|
-
* Fires
|
552
|
-
*
|
553
|
-
* This event is preventable. If you cancel it, the popup will remain closed.
|
568
|
+
* Fires when the popup is about to open. ([See example]({% slug openstate_multiselecttree %})).
|
569
|
+
* This event is preventable. When cancelled, the popup remains closed.
|
554
570
|
*/
|
555
571
|
open = new EventEmitter();
|
556
572
|
/**
|
557
|
-
* Fires after the popup
|
573
|
+
* Fires after the popup opens completely.
|
574
|
+
* Use this event to perform actions when the popup becomes visible.
|
558
575
|
*/
|
559
576
|
opened = new EventEmitter();
|
560
577
|
/**
|
561
|
-
* Fires
|
562
|
-
*
|
563
|
-
* This event is preventable. If you cancel it, the popup will remain open.
|
578
|
+
* Fires before the popup closes.
|
579
|
+
* Cancel this event to prevent the popup from closing.
|
564
580
|
*/
|
565
581
|
close = new EventEmitter();
|
566
582
|
/**
|
567
|
-
* Fires after the popup
|
583
|
+
* Fires after the popup closes completely.
|
584
|
+
* Use this event to perform cleanup actions when the popup becomes hidden.
|
568
585
|
*/
|
569
586
|
closed = new EventEmitter();
|
570
587
|
/**
|
571
|
-
* Fires when
|
588
|
+
* Fires when a tree node is expanded.
|
589
|
+
* Use this event to respond to node expansion actions.
|
572
590
|
*/
|
573
591
|
nodeExpand = new EventEmitter();
|
574
592
|
/**
|
575
|
-
* Fires when
|
593
|
+
* Fires when a user collapses a tree node.
|
594
|
+
* Use this event to respond to node collapse actions.
|
576
595
|
*/
|
577
596
|
nodeCollapse = new EventEmitter();
|
578
597
|
/**
|
579
|
-
* Fires
|
580
|
-
*
|
598
|
+
* Fires when the selected value changes.
|
599
|
+
* Use this event to respond to selection changes.
|
581
600
|
*/
|
582
601
|
valueChange = new EventEmitter();
|
583
602
|
/**
|
584
|
-
* Fires
|
585
|
-
*
|
603
|
+
* Fires before a tag is removed.
|
604
|
+
* Cancel this event to prevent tag removal.
|
586
605
|
*/
|
587
606
|
removeTag = new EventEmitter();
|
588
607
|
/**
|
589
|
-
* Fires when the
|
608
|
+
* Fires when the filter input value changes.
|
609
|
+
* Use this event to implement custom filtering logic.
|
590
610
|
*/
|
591
611
|
filterChange = new EventEmitter();
|
592
612
|
/**
|
@@ -890,7 +910,8 @@ export class MultiSelectTreeComponent {
|
|
890
910
|
return !this.placeholder && (!isPresent(this.value) || this.value.length === 0);
|
891
911
|
}
|
892
912
|
/**
|
893
|
-
*
|
913
|
+
* Sets focus to the component.
|
914
|
+
* Call this method to programmatically focus the MultiSelectTree.
|
894
915
|
*/
|
895
916
|
focus() {
|
896
917
|
if (!this.disabled) {
|
@@ -898,7 +919,8 @@ export class MultiSelectTreeComponent {
|
|
898
919
|
}
|
899
920
|
}
|
900
921
|
/**
|
901
|
-
*
|
922
|
+
* Removes focus from the component.
|
923
|
+
* Call this method to programmatically blur the MultiSelectTree.
|
902
924
|
*/
|
903
925
|
blur() {
|
904
926
|
if (!this.disabled) {
|
@@ -906,9 +928,9 @@ export class MultiSelectTreeComponent {
|
|
906
928
|
}
|
907
929
|
}
|
908
930
|
/**
|
909
|
-
*
|
910
|
-
*
|
911
|
-
*
|
931
|
+
* Sets focus to a specific tree item by index.
|
932
|
+
* Provide the item index in format like '1_1' to focus that item.
|
933
|
+
* The item must be expanded and enabled to receive focus.
|
912
934
|
*/
|
913
935
|
focusItemAt(index) {
|
914
936
|
if (this.treeview) {
|
@@ -920,9 +942,8 @@ export class MultiSelectTreeComponent {
|
|
920
942
|
}
|
921
943
|
}
|
922
944
|
/**
|
923
|
-
*
|
924
|
-
*
|
925
|
-
* the model will not update automatically and the `valueChange` event will not be fired.
|
945
|
+
* Clears all selected values from the component.
|
946
|
+
* This method does not trigger the valueChange event.
|
926
947
|
*/
|
927
948
|
reset() {
|
928
949
|
this.value = [];
|
@@ -930,11 +951,9 @@ export class MultiSelectTreeComponent {
|
|
930
951
|
this.valueDepth = [];
|
931
952
|
}
|
932
953
|
/**
|
933
|
-
*
|
934
|
-
*
|
935
|
-
*
|
936
|
-
*
|
937
|
-
* @param open - The state of the popup.
|
954
|
+
* Opens or closes the popup programmatically.
|
955
|
+
* Pass `true` to open, false to close, or omit the parameter to toggle.
|
956
|
+
* This method does not trigger open or close events.
|
938
957
|
*/
|
939
958
|
toggle(open) {
|
940
959
|
// The Promise is required to open the popup on load.
|
@@ -8,24 +8,26 @@ import { MultiSelectTreeComponent } from '../multiselecttree.component';
|
|
8
8
|
import * as i0 from "@angular/core";
|
9
9
|
import * as i1 from "../multiselecttree.component";
|
10
10
|
/**
|
11
|
-
*
|
12
|
-
* When a number is
|
13
|
-
*
|
11
|
+
* Configures the MultiSelectTree to show one single summary tag for all selected data items.
|
12
|
+
* When a number is set, the summary tag is shown after the corresponding number of data items are selected (see examples).
|
13
|
+
* See [more information and examples]({% slug api_dropdowns_multiselecttreesummarytagdirective %}).
|
14
14
|
*
|
15
15
|
* @example
|
16
|
-
* ```ts
|
16
|
+
* ```ts
|
17
17
|
* <kendo-multiselecttree kendoMultiSelectTreeSummaryTag [data]="data"></kendo-multiselecttree>
|
18
18
|
* ```
|
19
19
|
*
|
20
20
|
* @example
|
21
|
-
* ```ts
|
21
|
+
* ```ts
|
22
22
|
* <kendo-multiselecttree [kendoMultiSelectTreeSummaryTag]="2" [data]="data"></kendo-multiselecttree>
|
23
23
|
* ```
|
24
24
|
*/
|
25
25
|
export class MultiSelectTreeSummaryTagDirective {
|
26
26
|
multiSelectTreeComponent;
|
27
27
|
/**
|
28
|
-
*
|
28
|
+
* Sets the number of data items that need to be selected before the summary tag appears.
|
29
|
+
*
|
30
|
+
* @default 0
|
29
31
|
*/
|
30
32
|
showAfter = 0;
|
31
33
|
constructor(multiSelectTreeComponent) {
|
@@ -7,11 +7,12 @@ import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
8
8
|
* Renders the content of each node in the DropDownTree. To define a node template, nest an `<ng-template>` tag
|
9
9
|
* with the `kendoDropDownTreeNodeTemplate` directive inside the `<kendo-dropdowntree>` tag.
|
10
|
+
* To define a node template, nest an `<ng-template>` tag with the `kendoDropDownTreeNodeTemplate` directive inside the `<kendo-dropdowntree>` tag.
|
10
11
|
*
|
11
|
-
*
|
12
|
+
* You can use these context variables in the template:
|
12
13
|
*
|
13
|
-
* - `let-dataItem` (`any`) - The current data item.
|
14
|
-
* - `let-index="index"` (`string`) - The current item hierarchical index.
|
14
|
+
* - `let-dataItem` (`any`) - The current data item. This is the implicit context variable.
|
15
|
+
* - `let-index="index"` (`string`) - The current item's hierarchical index.
|
15
16
|
*/
|
16
17
|
export class NodeTemplateDirective {
|
17
18
|
templateRef;
|