@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
@@ -62,17 +62,28 @@ const DEFAULT_FILL_MODE = 'solid';
|
|
62
62
|
/**
|
63
63
|
* Represents the [Kendo UI MultiSelect component for Angular]({% slug overview_multiselect %}).
|
64
64
|
*
|
65
|
+
* Use the `MultiSelectComponent` to show a dropdown list where users can select multiple items.
|
66
|
+
* [See example]({% slug overview_multiselect %}).
|
67
|
+
*
|
65
68
|
* @example
|
66
|
-
* ```
|
67
|
-
*
|
68
|
-
*
|
69
|
-
*
|
70
|
-
*
|
71
|
-
*
|
72
|
-
*
|
69
|
+
* ```typescript
|
70
|
+
* @Component({
|
71
|
+
* selector: 'my-app',
|
72
|
+
* template: `
|
73
|
+
* <kendo-multiselect
|
74
|
+
* [data]="listItems"
|
75
|
+
* textField="name"
|
76
|
+
* valueField="id"
|
77
|
+
* placeholder="Select items...">
|
78
|
+
* </kendo-multiselect>
|
79
|
+
* `
|
73
80
|
* })
|
74
|
-
* class AppComponent {
|
75
|
-
* public listItems
|
81
|
+
* export class AppComponent {
|
82
|
+
* public listItems = [
|
83
|
+
* { id: 1, name: "Item 1" },
|
84
|
+
* { id: 2, name: "Item 2" },
|
85
|
+
* { id: 3, name: "Item 3" }
|
86
|
+
* ];
|
76
87
|
* }
|
77
88
|
* ```
|
78
89
|
*/
|
@@ -143,9 +154,9 @@ export class MultiSelectComponent {
|
|
143
154
|
return ngControl?.control || null;
|
144
155
|
}
|
145
156
|
/**
|
146
|
-
* Focuses a specific item
|
147
|
-
*
|
148
|
-
*
|
157
|
+
* Focuses a specific item in the MultiSelect based on the provided index.
|
158
|
+
* Sets the index to `-1` to focus the custom item if available.
|
159
|
+
* Pass `null` or an invalid index to remove focus.
|
149
160
|
*/
|
150
161
|
focusItemAt(index) {
|
151
162
|
const minIndex = this.allowCustom ? -1 : 0;
|
@@ -158,7 +169,7 @@ export class MultiSelectComponent {
|
|
158
169
|
}
|
159
170
|
}
|
160
171
|
/**
|
161
|
-
* Focuses the MultiSelect.
|
172
|
+
* Focuses the MultiSelect input element.
|
162
173
|
*/
|
163
174
|
focus() {
|
164
175
|
if (!this.disabled) {
|
@@ -177,7 +188,7 @@ export class MultiSelectComponent {
|
|
177
188
|
}
|
178
189
|
}
|
179
190
|
/**
|
180
|
-
*
|
191
|
+
* Removes focus from the MultiSelect input element.
|
181
192
|
*/
|
182
193
|
blur() {
|
183
194
|
if (!this.disabled) {
|
@@ -275,19 +286,20 @@ export class MultiSelectComponent {
|
|
275
286
|
*/
|
276
287
|
focusableId = `k-${guid()}`;
|
277
288
|
/**
|
278
|
-
*
|
279
|
-
*
|
289
|
+
* Controls whether the options list closes after item selection finishes ([see example]({% slug openstate_multiselect %}#toc-keeping-the-options-list-open-while-on-focus)).
|
290
|
+
* Set to `false` to keep the list open while the component has focus.
|
291
|
+
*
|
280
292
|
* @default true
|
281
293
|
*/
|
282
294
|
autoClose = true;
|
283
295
|
/**
|
284
|
-
*
|
296
|
+
* Controls the loading state of the MultiSelect.
|
297
|
+
* Set to `true` to display the loading indicator.
|
285
298
|
*/
|
286
299
|
loading;
|
287
300
|
/**
|
288
|
-
* Sets the data
|
289
|
-
*
|
290
|
-
* > The data has to be provided in an array-like list of items.
|
301
|
+
* Sets the data source for the MultiSelect.
|
302
|
+
* Provide the data as an array of items.
|
291
303
|
*/
|
292
304
|
set data(data) {
|
293
305
|
this.dataService.data = data || [];
|
@@ -310,10 +322,10 @@ export class MultiSelectComponent {
|
|
310
322
|
return this.dataService.data;
|
311
323
|
}
|
312
324
|
/**
|
313
|
-
* Sets the
|
314
|
-
*
|
315
|
-
*
|
316
|
-
* >
|
325
|
+
* Sets the selected values of the MultiSelect.
|
326
|
+
* Accepts primitive values (strings, numbers) or complex objects.
|
327
|
+
* Use the `valuePrimitive` property to define the value type.
|
328
|
+
* > The component ignores selected values that don't exist in the data source.
|
317
329
|
*/
|
318
330
|
set value(values) {
|
319
331
|
this._value = values ? values : [];
|
@@ -329,21 +341,21 @@ export class MultiSelectComponent {
|
|
329
341
|
return this._value;
|
330
342
|
}
|
331
343
|
/**
|
332
|
-
* Sets the
|
333
|
-
*
|
334
|
-
*
|
335
|
-
* > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
|
344
|
+
* Sets the field name that contains the item value in the data objects.
|
345
|
+
* Skip this property when your data contains only primitive values.
|
346
|
+
* Supports nested property paths like `category.id`.
|
336
347
|
*/
|
337
348
|
valueField;
|
338
349
|
/**
|
339
|
-
* Sets the
|
340
|
-
*
|
341
|
-
*
|
342
|
-
* > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
|
350
|
+
* Sets the field name that contains the item text in the data objects.
|
351
|
+
* Skip this property when your data contains only primitive values.
|
352
|
+
* Supports nested property paths like `category.name`.
|
343
353
|
*/
|
344
354
|
textField;
|
345
355
|
/**
|
346
|
-
*
|
356
|
+
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute of the component.
|
357
|
+
*
|
358
|
+
* @default 0
|
347
359
|
*/
|
348
360
|
tabindex = 0;
|
349
361
|
/**
|
@@ -358,12 +370,7 @@ export class MultiSelectComponent {
|
|
358
370
|
/**
|
359
371
|
* Sets the size of the component.
|
360
372
|
*
|
361
|
-
*
|
362
|
-
* * `small`
|
363
|
-
* * `medium` (default)
|
364
|
-
* * `large`
|
365
|
-
* * `none`
|
366
|
-
*
|
373
|
+
* @default "medium"
|
367
374
|
*/
|
368
375
|
set size(size) {
|
369
376
|
const newSize = size ? size : DEFAULT_SIZE;
|
@@ -379,13 +386,7 @@ export class MultiSelectComponent {
|
|
379
386
|
/**
|
380
387
|
* Sets the border radius of the component.
|
381
388
|
*
|
382
|
-
*
|
383
|
-
* * `small`
|
384
|
-
* * `medium` (default)
|
385
|
-
* * `large`
|
386
|
-
* * `full`
|
387
|
-
* * `none`
|
388
|
-
*
|
389
|
+
* @default "medium"
|
389
390
|
*/
|
390
391
|
set rounded(rounded) {
|
391
392
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
|
@@ -399,14 +400,9 @@ export class MultiSelectComponent {
|
|
399
400
|
return this._rounded;
|
400
401
|
}
|
401
402
|
/**
|
402
|
-
* Sets the
|
403
|
-
*
|
404
|
-
* The possible values are:
|
405
|
-
* * `flat`
|
406
|
-
* * `solid` (default)
|
407
|
-
* * `outline`
|
408
|
-
* * `none`
|
403
|
+
* Sets the fill mode of the component.
|
409
404
|
*
|
405
|
+
* @default "solid"
|
410
406
|
*/
|
411
407
|
set fillMode(fillMode) {
|
412
408
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
@@ -420,7 +416,7 @@ export class MultiSelectComponent {
|
|
420
416
|
return this._fillMode;
|
421
417
|
}
|
422
418
|
/**
|
423
|
-
*
|
419
|
+
* Sets the placeholder text for the MultiSelect input.
|
424
420
|
* When the values are selected, it disappears.
|
425
421
|
*/
|
426
422
|
set placeholder(text) {
|
@@ -430,18 +426,21 @@ export class MultiSelectComponent {
|
|
430
426
|
return this.selectedDataItems.length ? '' : this._placeholder;
|
431
427
|
}
|
432
428
|
/**
|
433
|
-
*
|
429
|
+
* Controls the adaptive mode behavior of the component.
|
430
|
+
* Set to `auto` to enable adaptive rendering on small screens.
|
431
|
+
*
|
432
|
+
* @default "none"
|
434
433
|
*/
|
435
434
|
adaptiveMode = 'none';
|
436
435
|
/**
|
437
|
-
* Sets the title
|
438
|
-
*
|
436
|
+
* Sets the title text for the ActionSheet in adaptive mode.
|
437
|
+
* Uses the component's label text by default.
|
439
438
|
*/
|
440
439
|
adaptiveTitle = '';
|
441
440
|
/**
|
442
|
-
* Sets the subtitle
|
443
|
-
*
|
444
|
-
|
441
|
+
* Sets the subtitle text for the ActionSheet in adaptive mode.
|
442
|
+
* No subtitle appears by default.
|
443
|
+
*/
|
445
444
|
adaptiveSubtitle;
|
446
445
|
/**
|
447
446
|
* @hidden
|
@@ -450,12 +449,16 @@ export class MultiSelectComponent {
|
|
450
449
|
return this.adaptiveMode === 'auto';
|
451
450
|
}
|
452
451
|
/**
|
453
|
-
*
|
452
|
+
* Controls the disabled state of the component.
|
453
|
+
* When true, sets the component to disabled.
|
454
|
+
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiselect#toc-managing-the-multiselect-disabled-state-in-reactive-forms).
|
455
|
+
*
|
456
|
+
* @default false
|
454
457
|
*/
|
455
458
|
disabled = false;
|
456
459
|
/**
|
457
|
-
*
|
458
|
-
*
|
460
|
+
* Determines wether the item will be disabled. The function is executed for each data item.
|
461
|
+
* The function receives the item as an argument and should return `true` if the item is disabled.
|
459
462
|
*/
|
460
463
|
set itemDisabled(fn) {
|
461
464
|
if (typeof fn !== 'function') {
|
@@ -464,7 +467,10 @@ export class MultiSelectComponent {
|
|
464
467
|
this.disabledItemsService.itemDisabled = fn;
|
465
468
|
}
|
466
469
|
/**
|
467
|
-
*
|
470
|
+
* Controls whether checkboxes appear before each item in the popup list.
|
471
|
+
* Pass `true` to enable checkboxes or an object to configure checkbox settings.
|
472
|
+
*
|
473
|
+
* @default false
|
468
474
|
*/
|
469
475
|
set checkboxes(settings) {
|
470
476
|
this._checkboxes = normalizeCheckboxesSettings(settings);
|
@@ -473,17 +479,22 @@ export class MultiSelectComponent {
|
|
473
479
|
return this._checkboxes;
|
474
480
|
}
|
475
481
|
/**
|
476
|
-
*
|
482
|
+
* Controls the read-only state of the component.
|
483
|
+
* When true, the component does not allow user input or selection changes.
|
477
484
|
*
|
478
485
|
* @default false
|
479
486
|
*/
|
480
487
|
readonly = false;
|
481
488
|
/**
|
482
|
-
* Enables the
|
489
|
+
* Enables the filtering functionality of the MultiSelect.
|
490
|
+
* Set to `true` to allow users to filter the data by typing.
|
491
|
+
*
|
492
|
+
* @default false
|
483
493
|
*/
|
484
494
|
filterable = false;
|
485
495
|
/**
|
486
|
-
* Enables
|
496
|
+
* Enables virtualization to improve performance with large datasets.
|
497
|
+
* Pass `true` for default settings or an object to configure virtualization.
|
487
498
|
*/
|
488
499
|
set virtual(settings) {
|
489
500
|
this._virtualSettings = normalizeVirtualizationSettings(settings);
|
@@ -492,14 +503,8 @@ export class MultiSelectComponent {
|
|
492
503
|
return this._virtualSettings;
|
493
504
|
}
|
494
505
|
/**
|
495
|
-
* Configures the popup
|
496
|
-
*
|
497
|
-
* The available options are:
|
498
|
-
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
|
499
|
-
* - `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. The `auto` mode is not supported when virtual scrolling is enabled.
|
500
|
-
* - `height: Number`—Sets the height of the popup container.
|
501
|
-
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
|
502
|
-
* - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
|
506
|
+
* Configures the popup appearance and behavior.
|
507
|
+
* Set properties like `animate`, `width`, `height`, `popupClass`, and `appendTo`.
|
503
508
|
*/
|
504
509
|
set popupSettings(settings) {
|
505
510
|
this._popupSettings = Object.assign({ animate: true }, settings);
|
@@ -508,12 +513,10 @@ export class MultiSelectComponent {
|
|
508
513
|
return this._popupSettings;
|
509
514
|
}
|
510
515
|
/**
|
511
|
-
* Sets the height of the options list in the popup.
|
516
|
+
* Sets the height of the options list in the popup.
|
517
|
+
* This affects only the list height, not the entire popup container.
|
512
518
|
*
|
513
|
-
*
|
514
|
-
* > To set the height of the popup container, use `popupSettings.height`.
|
515
|
-
*
|
516
|
-
* > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
|
519
|
+
* @default 200
|
517
520
|
*/
|
518
521
|
set listHeight(_listHeight) {
|
519
522
|
this._listHeight = _listHeight;
|
@@ -526,9 +529,9 @@ export class MultiSelectComponent {
|
|
526
529
|
}
|
527
530
|
_listHeight = 200;
|
528
531
|
/**
|
529
|
-
*
|
530
|
-
*
|
531
|
-
*
|
532
|
+
* Controls the type of selected values.
|
533
|
+
* Set to `true` for primitive values or `false` for object references.
|
534
|
+
* When undefined, the component determines the type based on `valueField`.
|
532
535
|
*/
|
533
536
|
set valuePrimitive(isPrimitive) {
|
534
537
|
this._valuePrimitive = isPrimitive;
|
@@ -540,71 +543,30 @@ export class MultiSelectComponent {
|
|
540
543
|
return this._valuePrimitive;
|
541
544
|
}
|
542
545
|
/**
|
543
|
-
*
|
544
|
-
*
|
546
|
+
* Controls whether a clear button appears when items are selected.
|
547
|
+
* Set to `true` to show the button that clears all selections.
|
548
|
+
*
|
549
|
+
* @default true
|
545
550
|
*/
|
546
551
|
clearButton = true;
|
547
552
|
/**
|
548
|
-
*
|
549
|
-
*
|
553
|
+
* Sets a function that transforms selected data items into display tags.
|
554
|
+
* Use this to customize how selected items appear as tags.
|
550
555
|
*
|
551
|
-
* @
|
552
|
-
* @returns { Any[] } - The tags that will be rendered by the component.
|
556
|
+
* @default (tags) => tags || []
|
553
557
|
*/
|
554
558
|
tagMapper = (tags) => tags || [];
|
555
559
|
/**
|
556
|
-
*
|
557
|
-
*
|
558
|
-
*
|
560
|
+
* Allows users to add custom values not present in the data source.
|
561
|
+
* Set to `true` to enable custom value input.
|
562
|
+
* This feature is not available in adaptive mode.
|
559
563
|
*
|
560
|
-
*
|
564
|
+
* @default false
|
561
565
|
*/
|
562
566
|
allowCustom = false;
|
563
567
|
/**
|
564
|
-
*
|
565
|
-
*
|
566
|
-
*
|
567
|
-
* @param { Any } value - The custom value that is defined by the user.
|
568
|
-
* @returns { Any }
|
569
|
-
*
|
570
|
-
* @example
|
571
|
-
* ```ts
|
572
|
-
* import { map } from 'rxjs/operators';
|
573
|
-
*
|
574
|
-
* _@Component({
|
575
|
-
* selector: 'my-app',
|
576
|
-
* template: `
|
577
|
-
* <kendo-multiselect
|
578
|
-
* [allowCustom]="true"
|
579
|
-
* [data]="listItems"
|
580
|
-
* textField="text"
|
581
|
-
* valueField="value"
|
582
|
-
* [valueNormalizer]="valueNormalizer"
|
583
|
-
* (valueChange)="onValueChange($event)"
|
584
|
-
* >
|
585
|
-
* </kendo-multiselect>
|
586
|
-
* `
|
587
|
-
* })
|
588
|
-
*
|
589
|
-
* class AppComponent {
|
590
|
-
* public listItems: Array<{ text: string, value: number }> = [
|
591
|
-
* { text: "Small", value: 1 },
|
592
|
-
* { text: "Medium", value: 2 },
|
593
|
-
* { text: "Large", value: 3 }
|
594
|
-
* ];
|
595
|
-
*
|
596
|
-
* public onValueChange(value) {
|
597
|
-
* console.log("valueChange : ", value);
|
598
|
-
* }
|
599
|
-
*
|
600
|
-
* public valueNormalizer = (text$: Observable<string>) => text$.pipe(map((text: string) => {
|
601
|
-
* return {
|
602
|
-
* value: Math.floor(Math.random() * (1000 - 100) + 1000), //generate unique valueField
|
603
|
-
* text: text };
|
604
|
-
* }));
|
605
|
-
*
|
606
|
-
* }
|
607
|
-
* ```
|
568
|
+
* Sets a function that normalizes custom user input into data items.
|
569
|
+
* Use this when your data items differ from simple strings.
|
608
570
|
*/
|
609
571
|
valueNormalizer = (text) => text.pipe(map((userInput) => {
|
610
572
|
const comparer = (item) => typeof item === 'string' && userInput.toLowerCase() === item.toLowerCase();
|
@@ -616,62 +578,57 @@ export class MultiSelectComponent {
|
|
616
578
|
return matchingItem ? matchingItem : userInput;
|
617
579
|
}));
|
618
580
|
/**
|
619
|
-
* Sets
|
581
|
+
* Sets HTML attributes for the inner input element.
|
582
|
+
* You cannot change attributes essential for component functionality.
|
620
583
|
*/
|
621
584
|
inputAttributes;
|
622
585
|
/**
|
623
|
-
* Fires
|
624
|
-
*
|
586
|
+
* Fires when the user types in the input field.
|
587
|
+
* Use this event to filter the data source based on user input.
|
625
588
|
*/
|
626
589
|
filterChange = new EventEmitter();
|
627
590
|
/**
|
628
|
-
* Fires
|
629
|
-
*
|
630
|
-
* ([see example](slug:events_multiselect)).
|
631
|
-
* When the value of the component is programmatically changed to `ngModel` or `formControl`
|
632
|
-
* through its API or form binding, the `valueChange` event is not triggered because it
|
633
|
-
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
591
|
+
* Fires when the value changes through user interaction or the Clear button.
|
592
|
+
* This event does not fire when you change the value programmatically.
|
634
593
|
*/
|
635
594
|
valueChange = new EventEmitter();
|
636
595
|
/**
|
637
|
-
* Fires
|
638
|
-
*
|
639
|
-
* This event is preventable. If you cancel it, the popup will remain closed.
|
596
|
+
* Fires before the popup opens.
|
597
|
+
* You can prevent the popup from opening by calling `preventDefault()` on the event.
|
640
598
|
*/
|
641
599
|
open = new EventEmitter();
|
642
600
|
/**
|
643
|
-
* Fires after the popup
|
601
|
+
* Fires after the popup opens completely.
|
644
602
|
*/
|
645
603
|
opened = new EventEmitter();
|
646
604
|
/**
|
647
|
-
* Fires
|
648
|
-
*
|
649
|
-
* This event is preventable. If you cancel it, the popup will remain open.
|
605
|
+
* Fires before the popup closes.
|
606
|
+
* You can prevent the popup from closing by calling `preventDefault()` on the event.
|
650
607
|
*/
|
651
608
|
close = new EventEmitter();
|
652
609
|
/**
|
653
|
-
* Fires after the popup
|
610
|
+
* Fires after the popup closes completely.
|
654
611
|
*/
|
655
612
|
closed = new EventEmitter();
|
656
613
|
/**
|
657
|
-
* Fires
|
614
|
+
* Fires when the user focuses the MultiSelect component.
|
658
615
|
*/
|
659
616
|
onFocus = new EventEmitter();
|
660
617
|
/**
|
661
|
-
* Fires
|
618
|
+
* Fires when the MultiSelect component loses focus.
|
662
619
|
*/
|
663
620
|
onBlur = new EventEmitter();
|
664
621
|
/**
|
665
|
-
* Fires
|
622
|
+
* Fires when the user focuses the input element inside the MultiSelect.
|
666
623
|
*/
|
667
624
|
inputFocus = new EventEmitter();
|
668
625
|
/**
|
669
|
-
* Fires
|
626
|
+
* Fires when the input element inside the MultiSelect loses focus.
|
670
627
|
*/
|
671
628
|
inputBlur = new EventEmitter();
|
672
629
|
/**
|
673
|
-
* Fires
|
674
|
-
*
|
630
|
+
* Fires before a tag gets removed from the selection.
|
631
|
+
* You can prevent tag removal by calling `preventDefault()` on the event.
|
675
632
|
*/
|
676
633
|
removeTag = new EventEmitter();
|
677
634
|
container;
|
@@ -1141,9 +1098,8 @@ export class MultiSelectComponent {
|
|
1141
1098
|
return isTruthy(this._open || this.isActionSheetExpanded);
|
1142
1099
|
}
|
1143
1100
|
/**
|
1144
|
-
* Resets the
|
1145
|
-
*
|
1146
|
-
* the model will not update automatically and the `selectionChange` and `valueChange` events will not be fired.
|
1101
|
+
* Resets the MultiSelect by clearing the text and value.
|
1102
|
+
* This method does not trigger the `selectionChange` and `valueChange` events.
|
1147
1103
|
*/
|
1148
1104
|
reset() {
|
1149
1105
|
this.text = "";
|
@@ -25,12 +25,11 @@ import * as i13 from "../common/localization/custom-messages.component";
|
|
25
25
|
import * as i14 from "@progress/kendo-angular-common";
|
26
26
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
27
27
|
/**
|
28
|
+
* Required for adding all MultiSelect features in NgModule-based Angular applications.
|
28
29
|
*
|
29
|
-
*
|
30
|
-
*
|
31
|
-
* The
|
32
|
-
* - `MultiSelectComponent`—The MultiSelect component class.
|
33
|
-
* - `SummaryTagDirective`—The MultiSelect summary tag directive.
|
30
|
+
* This module exports all MultiSelect-related components and directives:
|
31
|
+
* - `MultiSelectComponent`—The main MultiSelect component class.
|
32
|
+
* - `SummaryTagDirective`—The summary tag directive for MultiSelect.
|
34
33
|
* - `ItemTemplateDirective`—The item template directive.
|
35
34
|
* - `CustomItemTemplateDirective`—The custom item template directive.
|
36
35
|
* - `TagTemplateDirective`—The tag template directive.
|
@@ -45,6 +44,15 @@ import * as i14 from "@progress/kendo-angular-common";
|
|
45
44
|
* - `FixedGroupTemplateDirective`—The fixed group template directive.
|
46
45
|
* - `SuffixTemplateDirective`—The suffix template directive.
|
47
46
|
* - `PrefixTemplateDirective`—The prefix template directive.
|
47
|
+
*
|
48
|
+
* ```ts
|
49
|
+
* import { MultiSelectModule } from '@progress/kendo-angular-dropdowns';
|
50
|
+
* @NgModule({
|
51
|
+
* imports: [ MultiSelectModule ],
|
52
|
+
* declarations: [ AppComponent ],
|
53
|
+
* bootstrap: [ AppComponent ],
|
54
|
+
* })
|
55
|
+
* ```
|
48
56
|
*/
|
49
57
|
export class MultiSelectModule {
|
50
58
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
@@ -8,9 +8,9 @@ import { MultiSelectComponent } from './multiselect.component';
|
|
8
8
|
import * as i0 from "@angular/core";
|
9
9
|
import * as i1 from "./multiselect.component";
|
10
10
|
/**
|
11
|
-
*
|
12
|
-
*
|
13
|
-
*
|
11
|
+
* Configures the MultiSelect to show one summary tag for all selected items.
|
12
|
+
* Set a number to display the summary tag after the respective number of items are selected.
|
13
|
+
* [See example]({% slug summarytagmode_multiselect %}).
|
14
14
|
*
|
15
15
|
* @example
|
16
16
|
* ```ts-no-run
|
@@ -25,7 +25,9 @@ import * as i1 from "./multiselect.component";
|
|
25
25
|
export class SummaryTagDirective {
|
26
26
|
multiSelectComponent;
|
27
27
|
/**
|
28
|
-
*
|
28
|
+
* Sets the number of selected items after which the summary tag appears.
|
29
|
+
*
|
30
|
+
* @default 0
|
29
31
|
*/
|
30
32
|
showAfter = 0;
|
31
33
|
constructor(multiSelectComponent) {
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
13
|
-
publishDate:
|
14
|
-
version: '19.1.
|
13
|
+
publishDate: 1749804249,
|
14
|
+
version: '19.1.2-develop.1',
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
16
16
|
};
|