@progress/kendo-angular-dropdowns 19.1.1 → 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
@@ -37,8 +37,8 @@ const packageMetadata = {
|
|
37
37
|
productName: 'Kendo UI for Angular',
|
38
38
|
productCode: 'KENDOUIANGULAR',
|
39
39
|
productCodes: ['KENDOUIANGULAR'],
|
40
|
-
publishDate:
|
41
|
-
version: '19.1.1',
|
40
|
+
publishDate: 1749804249,
|
41
|
+
version: '19.1.2-develop.1',
|
42
42
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
43
43
|
};
|
44
44
|
|
@@ -3214,20 +3214,11 @@ const AUTOCOMPLETE_VALUE_ACCESSOR = {
|
|
3214
3214
|
* Represents the [Kendo UI AutoComplete component for Angular]({% slug overview_autocomplete %}).
|
3215
3215
|
*
|
3216
3216
|
* @example
|
3217
|
-
* ```
|
3218
|
-
*
|
3219
|
-
*
|
3220
|
-
*
|
3221
|
-
*
|
3222
|
-
* [data]="listItems"
|
3223
|
-
* [placeholder]="placeholder"
|
3224
|
-
* >
|
3225
|
-
* `
|
3226
|
-
* })
|
3227
|
-
* class AppComponent {
|
3228
|
-
* public placeholder: string = 'Type "it" for suggestions';
|
3229
|
-
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
|
3230
|
-
* }
|
3217
|
+
* ```html
|
3218
|
+
* <kendo-autocomplete
|
3219
|
+
* [data]="['Item1', 'Item2', 'Item3']"
|
3220
|
+
* placeholder="placeholder">
|
3221
|
+
* </kendo-autocomplete>
|
3231
3222
|
* ```
|
3232
3223
|
*/
|
3233
3224
|
class AutoCompleteComponent {
|
@@ -3306,11 +3297,17 @@ class AutoCompleteComponent {
|
|
3306
3297
|
}
|
3307
3298
|
return appendTo === 'component' ? this.container : appendTo;
|
3308
3299
|
}
|
3300
|
+
/**
|
3301
|
+
* @hidden
|
3302
|
+
*/
|
3309
3303
|
get clearButtonVisiblity() {
|
3310
3304
|
if (touchEnabled) {
|
3311
3305
|
return 'visible';
|
3312
3306
|
}
|
3313
3307
|
}
|
3308
|
+
/**
|
3309
|
+
* @hidden
|
3310
|
+
*/
|
3314
3311
|
get ariaControls() {
|
3315
3312
|
return this.isOpen ? this.listBoxId : undefined;
|
3316
3313
|
}
|
@@ -3320,6 +3317,9 @@ class AutoCompleteComponent {
|
|
3320
3317
|
get isControlRequired() {
|
3321
3318
|
return isControlRequired(this.formControl);
|
3322
3319
|
}
|
3320
|
+
/**
|
3321
|
+
* @hidden
|
3322
|
+
*/
|
3323
3323
|
dataItem;
|
3324
3324
|
/**
|
3325
3325
|
* Toggles the visibility of the popup or actionSheet.
|
@@ -3371,11 +3371,15 @@ class AutoCompleteComponent {
|
|
3371
3371
|
/**
|
3372
3372
|
* Defines whether the first match from the suggestions list will be automatically focused.
|
3373
3373
|
* By default, `highlightFirst` is set to `true`.
|
3374
|
+
*
|
3375
|
+
* @default true
|
3374
3376
|
*/
|
3375
3377
|
highlightFirst = true;
|
3376
3378
|
/**
|
3377
3379
|
* Shows or hides the current group sticky header when using grouped data.
|
3378
|
-
* By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
|
3380
|
+
* By default, the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
|
3381
|
+
*
|
3382
|
+
* @default true
|
3379
3383
|
*/
|
3380
3384
|
showStickyHeader = true;
|
3381
3385
|
/**
|
@@ -3430,22 +3434,28 @@ class AutoCompleteComponent {
|
|
3430
3434
|
*/
|
3431
3435
|
valueField;
|
3432
3436
|
/**
|
3433
|
-
*
|
3437
|
+
* Sets the placeholder of the AutoComplete.
|
3438
|
+
*
|
3439
|
+
* @default ""
|
3434
3440
|
*/
|
3435
3441
|
placeholder = "";
|
3436
3442
|
/**
|
3437
|
-
* Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
|
3443
|
+
* Enables or disables the adaptive mode. By default, the adaptive rendering is disabled.
|
3444
|
+
*
|
3445
|
+
* @default 'none'
|
3438
3446
|
*/
|
3439
3447
|
adaptiveMode = 'none';
|
3440
3448
|
/**
|
3441
|
-
* Sets the title of the ActionSheet that
|
3442
|
-
* By default the ActionSheet title uses the text provided for the label of the AutoComplete.
|
3449
|
+
* Sets the title of the ActionSheet that renders instead of the Popup when using small screen devices.
|
3450
|
+
* By default, the ActionSheet title uses the text provided for the label of the AutoComplete.
|
3451
|
+
*
|
3452
|
+
* @default ''
|
3443
3453
|
*/
|
3444
3454
|
adaptiveTitle = '';
|
3445
3455
|
/**
|
3446
|
-
* Sets the subtitle of the ActionSheet that
|
3447
|
-
* By default the ActionSheet does not render a subtitle.
|
3448
|
-
|
3456
|
+
* Sets the subtitle of the ActionSheet that renders instead of the Popup when using small screen devices.
|
3457
|
+
* By default, the ActionSheet does not render a subtitle.
|
3458
|
+
*/
|
3449
3459
|
adaptiveSubtitle;
|
3450
3460
|
/**
|
3451
3461
|
* @hidden
|
@@ -3470,13 +3480,14 @@ class AutoCompleteComponent {
|
|
3470
3480
|
return this._popupSettings;
|
3471
3481
|
}
|
3472
3482
|
/**
|
3473
|
-
|
3474
|
-
|
3475
|
-
|
3476
|
-
|
3477
|
-
|
3478
|
-
|
3479
|
-
|
3483
|
+
* Sets the height of the options list in the popup. By default, `listHeight` is 200px.
|
3484
|
+
*
|
3485
|
+
* > The `listHeight` property affects only the list of options and not the whole popup container.
|
3486
|
+
* > To set the height of the popup container, use `popupSettings.height`.
|
3487
|
+
*
|
3488
|
+
* When using `adaptiveMode` and the screen size is `small` or `medium`, the `listHeight` property is set to null.
|
3489
|
+
* @default 200
|
3490
|
+
*/
|
3480
3491
|
set listHeight(_listHeight) {
|
3481
3492
|
this._listHeight = _listHeight;
|
3482
3493
|
}
|
@@ -3489,6 +3500,8 @@ class AutoCompleteComponent {
|
|
3489
3500
|
_listHeight = 200;
|
3490
3501
|
/**
|
3491
3502
|
* Sets and gets the loading state of the AutoComplete.
|
3503
|
+
*
|
3504
|
+
* @default false
|
3492
3505
|
*/
|
3493
3506
|
loading;
|
3494
3507
|
/**
|
@@ -3496,14 +3509,20 @@ class AutoCompleteComponent {
|
|
3496
3509
|
*
|
3497
3510
|
* If set to `true`, renders a button on hovering over the component.
|
3498
3511
|
* Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
|
3512
|
+
*
|
3513
|
+
* @default true
|
3499
3514
|
*/
|
3500
3515
|
clearButton = true;
|
3501
3516
|
/**
|
3502
3517
|
* Enables the auto-completion of the text based on the first data item.
|
3518
|
+
*
|
3519
|
+
* @default false
|
3503
3520
|
*/
|
3504
3521
|
suggest;
|
3505
3522
|
/**
|
3506
3523
|
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_autocomplete#toc-managing-the-autocomplete-disabled-state-in-reactive-forms).
|
3524
|
+
*
|
3525
|
+
* @default false
|
3507
3526
|
*/
|
3508
3527
|
disabled = false;
|
3509
3528
|
/**
|
@@ -3525,6 +3544,8 @@ class AutoCompleteComponent {
|
|
3525
3544
|
readonly = false;
|
3526
3545
|
/**
|
3527
3546
|
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
3547
|
+
*
|
3548
|
+
* @default 0
|
3528
3549
|
*/
|
3529
3550
|
tabindex = 0;
|
3530
3551
|
/**
|
@@ -3539,10 +3560,14 @@ class AutoCompleteComponent {
|
|
3539
3560
|
/**
|
3540
3561
|
* Enables the [filtering]({% slug filtering_autocomplete %}) functionality.
|
3541
3562
|
* If set to `true`, the component emits the `filterChange` event.
|
3563
|
+
*
|
3564
|
+
* @default false
|
3542
3565
|
*/
|
3543
3566
|
filterable = false;
|
3544
3567
|
/**
|
3545
3568
|
* Enables the [virtualization]({% slug virtualization_autocomplete %}) functionality.
|
3569
|
+
*
|
3570
|
+
* @default false
|
3546
3571
|
*/
|
3547
3572
|
set virtual(settings) {
|
3548
3573
|
this._virtualSettings = normalizeVirtualizationSettings(settings);
|
@@ -3553,12 +3578,7 @@ class AutoCompleteComponent {
|
|
3553
3578
|
/**
|
3554
3579
|
* Sets the size of the component.
|
3555
3580
|
*
|
3556
|
-
*
|
3557
|
-
* * `small`
|
3558
|
-
* * `medium` (default)
|
3559
|
-
* * `large`
|
3560
|
-
* * `none`
|
3561
|
-
*
|
3581
|
+
* @default 'medium'
|
3562
3582
|
*/
|
3563
3583
|
set size(size) {
|
3564
3584
|
const newSize = size ? size : DEFAULT_SIZE$5;
|
@@ -3574,13 +3594,7 @@ class AutoCompleteComponent {
|
|
3574
3594
|
/**
|
3575
3595
|
* Sets the border radius of the component.
|
3576
3596
|
*
|
3577
|
-
*
|
3578
|
-
* * `small`
|
3579
|
-
* * `medium` (default)
|
3580
|
-
* * `large`
|
3581
|
-
* * `full`
|
3582
|
-
* * `none`
|
3583
|
-
*
|
3597
|
+
* @default 'medium'
|
3584
3598
|
*/
|
3585
3599
|
set rounded(rounded) {
|
3586
3600
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
|
@@ -3596,12 +3610,7 @@ class AutoCompleteComponent {
|
|
3596
3610
|
/**
|
3597
3611
|
* Sets the fillMode of the component.
|
3598
3612
|
*
|
3599
|
-
*
|
3600
|
-
* * `flat`
|
3601
|
-
* * `solid` (default)
|
3602
|
-
* * `outline`
|
3603
|
-
* * `none`
|
3604
|
-
*
|
3613
|
+
* @default 'solid'
|
3605
3614
|
*/
|
3606
3615
|
set fillMode(fillMode) {
|
3607
3616
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$5;
|
@@ -3619,7 +3628,7 @@ class AutoCompleteComponent {
|
|
3619
3628
|
*/
|
3620
3629
|
inputAttributes;
|
3621
3630
|
/**
|
3622
|
-
* Fires each time the value
|
3631
|
+
* Fires each time the value changes—
|
3623
3632
|
* when the component is blurred or the value is cleared through the **Clear** button
|
3624
3633
|
* ([see example](slug:events_autocomplete)).
|
3625
3634
|
* When the value of the component is programmatically changed to `ngModel` or `formControl`
|
@@ -3635,20 +3644,20 @@ class AutoCompleteComponent {
|
|
3635
3644
|
filterChange = new EventEmitter();
|
3636
3645
|
/**
|
3637
3646
|
* Fires each time the popup is about to open.
|
3638
|
-
* This event is preventable. If you cancel it, the popup
|
3647
|
+
* This event is preventable. If you cancel it, the popup remains closed.
|
3639
3648
|
*/
|
3640
3649
|
open = new EventEmitter();
|
3641
3650
|
/**
|
3642
|
-
* Fires after the popup
|
3651
|
+
* Fires after the popup opens.
|
3643
3652
|
*/
|
3644
3653
|
opened = new EventEmitter();
|
3645
3654
|
/**
|
3646
3655
|
* Fires each time the popup is about to close.
|
3647
|
-
* This event is preventable. If you cancel it, the popup
|
3656
|
+
* This event is preventable. If you cancel it, the popup remains open.
|
3648
3657
|
*/
|
3649
3658
|
close = new EventEmitter();
|
3650
3659
|
/**
|
3651
|
-
* Fires after the popup
|
3660
|
+
* Fires after the popup closes.
|
3652
3661
|
*/
|
3653
3662
|
closed = new EventEmitter();
|
3654
3663
|
/**
|
@@ -4847,19 +4856,10 @@ const DEFAULT_ROUNDED$4 = 'medium';
|
|
4847
4856
|
const DEFAULT_FILL_MODE$4 = 'solid';
|
4848
4857
|
/**
|
4849
4858
|
* Represents the [Kendo UI ComboBox component for Angular]({% slug overview_combobox %}).
|
4850
|
-
*
|
4851
4859
|
* @example
|
4852
|
-
* ```
|
4853
|
-
*
|
4854
|
-
*
|
4855
|
-
* template: `
|
4856
|
-
* <kendo-combobox [data]="listItems">
|
4857
|
-
* </kendo-combobox>
|
4858
|
-
* `
|
4859
|
-
* })
|
4860
|
-
* class AppComponent {
|
4861
|
-
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
|
4862
|
-
* }
|
4860
|
+
* ```html
|
4861
|
+
* <kendo-combobox [data]="listItems">
|
4862
|
+
* </kendo-combobox>
|
4863
4863
|
* ```
|
4864
4864
|
*/
|
4865
4865
|
class ComboBoxComponent extends MultiTabStop {
|
@@ -4885,7 +4885,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
4885
4885
|
*/
|
4886
4886
|
svgIcon;
|
4887
4887
|
/**
|
4888
|
-
* Sets the HTML attributes of the inner focusable input element. Attributes
|
4888
|
+
* Sets the HTML attributes of the inner focusable input element. Attributes essential for certain component functionalities cannot be changed.
|
4889
4889
|
*/
|
4890
4890
|
inputAttributes;
|
4891
4891
|
/**
|
@@ -4966,6 +4966,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
4966
4966
|
/**
|
4967
4967
|
* Shows or hides the current group sticky header when using grouped data.
|
4968
4968
|
* By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
|
4969
|
+
* @default true
|
4969
4970
|
*/
|
4970
4971
|
showStickyHeader = true;
|
4971
4972
|
/**
|
@@ -4978,12 +4979,12 @@ class ComboBoxComponent extends MultiTabStop {
|
|
4978
4979
|
* Defaults to `false`.
|
4979
4980
|
*
|
4980
4981
|
* The feature is not available when using adaptive mode.
|
4982
|
+
* @default false
|
4981
4983
|
*/
|
4982
4984
|
allowCustom = false;
|
4983
4985
|
/**
|
4984
4986
|
* Sets the data of the ComboBox.
|
4985
|
-
*
|
4986
|
-
* > The data has to be provided in an array-like list.
|
4987
|
+
* The data must be provided in an array-like list.
|
4987
4988
|
*/
|
4988
4989
|
set data(data) {
|
4989
4990
|
this.dataService.data = data || [];
|
@@ -5012,12 +5013,9 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5012
5013
|
return this.dataService.data;
|
5013
5014
|
}
|
5014
5015
|
/**
|
5015
|
-
* Sets the value of the ComboBox.
|
5016
|
-
* It can either be of the primitive (string, numbers) or of the complex (objects) type.
|
5017
|
-
* To define the type, use the `valuePrimitive` option.
|
5016
|
+
* Sets the value of the ComboBox. The value can be a primitive (string, number) or a complex object. Use the `valuePrimitive` property to define the type.
|
5018
5017
|
*
|
5019
|
-
*
|
5020
|
-
* > When the `Enter` key is pressed or the component loses focus, custom values get dismissed unless `allowCustom` is set to `true`.
|
5018
|
+
* All selected values not present in the dataset are custom values. When the `Enter` key is pressed or the component loses focus, custom values are dismissed unless `allowCustom` is set to `true`.
|
5021
5019
|
*/
|
5022
5020
|
set value(newValue) {
|
5023
5021
|
this._value = newValue;
|
@@ -5028,10 +5026,9 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5028
5026
|
return this._value;
|
5029
5027
|
}
|
5030
5028
|
/**
|
5031
|
-
* Sets the data item field that represents the item text.
|
5032
|
-
* If the data contains only primitive values, do not define it.
|
5029
|
+
* Sets the data item field that represents the item text. If the data contains only primitive values, do not define this property.
|
5033
5030
|
*
|
5034
|
-
*
|
5031
|
+
* The `textField` property can be set to a nested property value, for example, `category.name`.
|
5035
5032
|
*/
|
5036
5033
|
textField;
|
5037
5034
|
/**
|
@@ -5042,9 +5039,8 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5042
5039
|
*/
|
5043
5040
|
valueField;
|
5044
5041
|
/**
|
5045
|
-
* Specifies the type of the selected value.
|
5046
|
-
*
|
5047
|
-
* ([more information and example]({% slug valuebinding_combobox %}#toc-primitive-values-from-object-fields)).
|
5042
|
+
* Specifies the type of the selected value. If set to `true`, the selected value must be a primitive type.
|
5043
|
+
* ([more information and example]({% slug valuebinding_combobox %}#toc-primitive-values-from-object-fields))
|
5048
5044
|
*/
|
5049
5045
|
set valuePrimitive(isPrimitive) {
|
5050
5046
|
this._valuePrimitive = isPrimitive;
|
@@ -5101,22 +5097,23 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5101
5097
|
valueNormalizer = (text) => text.pipe(map((userInput) => userInput));
|
5102
5098
|
/**
|
5103
5099
|
* The hint that is displayed when the component is empty.
|
5104
|
-
*
|
5100
|
+
* @default ''
|
5105
5101
|
*/
|
5106
5102
|
placeholder = "";
|
5107
5103
|
/**
|
5108
|
-
* Enables or disables the adaptive mode. By default
|
5104
|
+
* Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
|
5105
|
+
* @default 'none'
|
5109
5106
|
*/
|
5110
5107
|
adaptiveMode = 'none';
|
5111
5108
|
/**
|
5112
5109
|
* Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
|
5113
|
-
* By default the ActionSheet title uses the text provided for the label of the
|
5110
|
+
* By default, the ActionSheet title uses the text provided for the label of the ComboBox.
|
5111
|
+
* @default ''
|
5114
5112
|
*/
|
5115
5113
|
adaptiveTitle = '';
|
5116
5114
|
/**
|
5117
|
-
* Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
|
5118
|
-
|
5119
|
-
*/
|
5115
|
+
* Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices. By default, the ActionSheet does not render a subtitle.
|
5116
|
+
*/
|
5120
5117
|
adaptiveSubtitle;
|
5121
5118
|
/**
|
5122
5119
|
* @hidden
|
@@ -5146,7 +5143,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5146
5143
|
* > The `listHeight` property affects only the list of options and not the whole popup container.
|
5147
5144
|
* > To set the height of the popup container, use `popupSettings.height`.
|
5148
5145
|
*
|
5149
|
-
*
|
5146
|
+
* When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
|
5150
5147
|
*/
|
5151
5148
|
set listHeight(_listHeight) {
|
5152
5149
|
this._listHeight = _listHeight;
|
@@ -5164,11 +5161,13 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5164
5161
|
loading;
|
5165
5162
|
/**
|
5166
5163
|
* Enables the auto-completion of the text based on the first data item.
|
5164
|
+
* @default false
|
5167
5165
|
*/
|
5168
5166
|
suggest = false;
|
5169
5167
|
/**
|
5170
5168
|
* If set to `true`, renders a button on hovering over the component.
|
5171
5169
|
* Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
|
5170
|
+
* @default true
|
5172
5171
|
*/
|
5173
5172
|
clearButton = true;
|
5174
5173
|
/**
|
@@ -5176,8 +5175,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5176
5175
|
*/
|
5177
5176
|
disabled = false;
|
5178
5177
|
/**
|
5179
|
-
* Defines a Boolean function that is executed for each data item in the component
|
5180
|
-
* ([see examples]({% slug disableditems_combobox %})). Determines whether the item will be disabled.
|
5178
|
+
* Defines a Boolean function that is executed for each data item in the component ([see examples]({% slug disableditems_combobox %})). Determines whether the item is disabled.
|
5181
5179
|
*/
|
5182
5180
|
set itemDisabled(fn) {
|
5183
5181
|
if (typeof fn !== 'function') {
|
@@ -5187,7 +5185,6 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5187
5185
|
}
|
5188
5186
|
/**
|
5189
5187
|
* Sets the read-only state of the component.
|
5190
|
-
*
|
5191
5188
|
* @default false
|
5192
5189
|
*/
|
5193
5190
|
readonly = false;
|
@@ -5295,19 +5292,15 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5295
5292
|
*/
|
5296
5293
|
valueChange = new EventEmitter();
|
5297
5294
|
/**
|
5298
|
-
* Fires each time an item selection is changed
|
5299
|
-
* ([see example](slug:events_combobox)).
|
5295
|
+
* Fires each time an item selection is changed ([see example](slug:events_combobox)).
|
5300
5296
|
*/
|
5301
5297
|
selectionChange = new EventEmitter();
|
5302
5298
|
/**
|
5303
|
-
* Fires each time the user types in the input field.
|
5304
|
-
* You can filter the source based on the passed filtration value
|
5305
|
-
* ([see example](slug:events_combobox)).
|
5299
|
+
* Fires each time the user types in the input field. You can filter the source based on the passed filtration value ([see example](slug:events_combobox)).
|
5306
5300
|
*/
|
5307
5301
|
filterChange = new EventEmitter();
|
5308
5302
|
/**
|
5309
|
-
* Fires each time the popup is about to open.
|
5310
|
-
* This event is preventable. If you cancel it, the popup will remain closed.
|
5303
|
+
* Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup remains closed.
|
5311
5304
|
*/
|
5312
5305
|
open = new EventEmitter();
|
5313
5306
|
/**
|
@@ -5315,8 +5308,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
5315
5308
|
*/
|
5316
5309
|
opened = new EventEmitter();
|
5317
5310
|
/**
|
5318
|
-
* Fires each time the popup is about to close.
|
5319
|
-
* This event is preventable. If you cancel it, the popup will remain open.
|
5311
|
+
* Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup remains open.
|
5320
5312
|
*/
|
5321
5313
|
close = new EventEmitter();
|
5322
5314
|
/**
|
@@ -6992,20 +6984,11 @@ const DEFAULT_SIZE$3 = 'medium';
|
|
6992
6984
|
const DEFAULT_ROUNDED$3 = 'medium';
|
6993
6985
|
const DEFAULT_FILL_MODE$3 = 'solid';
|
6994
6986
|
/**
|
6995
|
-
* Represents the
|
6987
|
+
* Represents the Kendo UI for Angular [DropDownList]({% slug overview_ddl %}) component.
|
6996
6988
|
*
|
6997
6989
|
* @example
|
6998
|
-
* ```
|
6999
|
-
*
|
7000
|
-
* selector: 'my-app',
|
7001
|
-
* template: `
|
7002
|
-
* <kendo-dropdownlist [data]="listItems">
|
7003
|
-
* </kendo-dropdownlist>
|
7004
|
-
* `
|
7005
|
-
* })
|
7006
|
-
* class AppComponent {
|
7007
|
-
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
|
7008
|
-
* }
|
6990
|
+
* ```html
|
6991
|
+
* <kendo-dropdownlist [data]="["Item 1", "Item 2", "Item 3"]"></kendo-dropdownlist>
|
7009
6992
|
* ```
|
7010
6993
|
*/
|
7011
6994
|
class DropDownListComponent {
|
@@ -7109,7 +7092,7 @@ class DropDownListComponent {
|
|
7109
7092
|
}
|
7110
7093
|
/**
|
7111
7094
|
* Shows or hides the current group sticky header when using grouped data.
|
7112
|
-
*
|
7095
|
+
* The sticky header displays by default. [see example.]({% slug grouping_autocomplete %}#toc-sticky-header)
|
7113
7096
|
*/
|
7114
7097
|
showStickyHeader = true;
|
7115
7098
|
/**
|
@@ -7121,13 +7104,13 @@ class DropDownListComponent {
|
|
7121
7104
|
*/
|
7122
7105
|
svgIcon;
|
7123
7106
|
/**
|
7124
|
-
* Sets and gets the loading state of the
|
7107
|
+
* Sets and gets the loading state of the `DropDownListComponent`.
|
7125
7108
|
*/
|
7126
7109
|
loading;
|
7127
7110
|
/**
|
7128
|
-
* Sets the data of the
|
7111
|
+
* Sets the data of the `DropDownListComponent`.
|
7129
7112
|
*
|
7130
|
-
*
|
7113
|
+
* The data must be an array-like list.
|
7131
7114
|
*/
|
7132
7115
|
set data(data) {
|
7133
7116
|
this.dataService.data = data || [];
|
@@ -7148,11 +7131,11 @@ class DropDownListComponent {
|
|
7148
7131
|
return this.dataService.data;
|
7149
7132
|
}
|
7150
7133
|
/**
|
7151
|
-
* Sets the value of the
|
7152
|
-
*
|
7153
|
-
*
|
7134
|
+
* Sets the value of the `DropDownListComponent`.
|
7135
|
+
* The value can be a primitive (string, number) or a complex object.
|
7136
|
+
* Use the `valuePrimitive` option to define the type.
|
7154
7137
|
*
|
7155
|
-
*
|
7138
|
+
* All selected values not present in the source are ignored.
|
7156
7139
|
*/
|
7157
7140
|
set value(newValue) {
|
7158
7141
|
if (!isPresent(newValue)) {
|
@@ -7167,31 +7150,31 @@ class DropDownListComponent {
|
|
7167
7150
|
}
|
7168
7151
|
/**
|
7169
7152
|
* Sets the data item field that represents the item text.
|
7170
|
-
* If the data contains only primitive values, do not define
|
7153
|
+
* If the data contains only primitive values, do not define this property.
|
7171
7154
|
*
|
7172
|
-
*
|
7155
|
+
* The `textField` property can point to a nested property value, for example, `category.name`.
|
7173
7156
|
*/
|
7174
7157
|
textField;
|
7175
7158
|
/**
|
7176
7159
|
* Sets the data item field that represents the item value.
|
7177
|
-
* If the data contains only primitive values, do not define
|
7160
|
+
* If the data contains only primitive values, do not define this property.
|
7178
7161
|
*
|
7179
|
-
*
|
7162
|
+
* The `valueField` property can point to a nested property value, for example, `category.id`.
|
7180
7163
|
*/
|
7181
7164
|
valueField;
|
7182
7165
|
/**
|
7183
|
-
* Enables or disables the adaptive mode.
|
7166
|
+
* Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
|
7184
7167
|
*/
|
7185
7168
|
adaptiveMode = 'none';
|
7186
7169
|
/**
|
7187
|
-
* Sets the title of the ActionSheet
|
7188
|
-
* By default the ActionSheet title uses the text
|
7170
|
+
* Sets the title of the ActionSheet rendered instead of the Popup on small screens.
|
7171
|
+
* By default, the ActionSheet title uses the label text of the `DropDownListComponent`.
|
7189
7172
|
*/
|
7190
7173
|
adaptiveTitle = '';
|
7191
7174
|
/**
|
7192
|
-
* Sets the subtitle of the ActionSheet
|
7193
|
-
* By default the ActionSheet does not render a subtitle.
|
7194
|
-
|
7175
|
+
* Sets the subtitle of the ActionSheet rendered instead of the Popup on small screens.
|
7176
|
+
* By default, the ActionSheet does not render a subtitle.
|
7177
|
+
*/
|
7195
7178
|
adaptiveSubtitle = '';
|
7196
7179
|
/**
|
7197
7180
|
* @hidden
|
@@ -7216,13 +7199,13 @@ class DropDownListComponent {
|
|
7216
7199
|
return this.isAdaptiveModeEnabled && this.windowSize !== 'large';
|
7217
7200
|
}
|
7218
7201
|
/**
|
7219
|
-
* Configures the popup of the
|
7202
|
+
* Configures the popup of the `DropDownListComponent`.
|
7220
7203
|
*
|
7221
7204
|
* The available options are:
|
7222
|
-
* - `animate: Boolean`—Controls the popup animation.
|
7205
|
+
* - `animate: Boolean`—Controls the popup animation. The open and close animations are enabled by default.
|
7223
7206
|
* - `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.
|
7224
7207
|
* - `height: Number`—Sets the height of the popup container.
|
7225
|
-
* - `popupClass: String`—Specifies a list of CSS classes
|
7208
|
+
* - `popupClass: String`—Specifies a list of CSS classes used to style the popup.
|
7226
7209
|
* - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
|
7227
7210
|
*/
|
7228
7211
|
set popupSettings(settings) {
|
@@ -7232,12 +7215,14 @@ class DropDownListComponent {
|
|
7232
7215
|
return this._popupSettings;
|
7233
7216
|
}
|
7234
7217
|
/**
|
7235
|
-
* Sets the height of the options list in the popup.
|
7218
|
+
* Sets the height of the options list in the popup.
|
7236
7219
|
*
|
7237
|
-
*
|
7238
|
-
*
|
7220
|
+
* The `listHeight` property affects only the list of options, not the whole popup container.
|
7221
|
+
* To set the height of the popup container, use `popupSettings.height`.
|
7222
|
+
*
|
7223
|
+
* When using `adaptiveMode` and the screen size is `small` or `medium`, the `listHeight` property is set to null.
|
7239
7224
|
*
|
7240
|
-
*
|
7225
|
+
* @default 200
|
7241
7226
|
*/
|
7242
7227
|
set listHeight(_listHeight) {
|
7243
7228
|
this._listHeight = _listHeight;
|
@@ -7250,16 +7235,15 @@ class DropDownListComponent {
|
|
7250
7235
|
}
|
7251
7236
|
_listHeight = 200;
|
7252
7237
|
/**
|
7253
|
-
* Sets the text of the default empty item. The
|
7238
|
+
* Sets the text of the default empty item. The value type must match the data type.
|
7254
7239
|
*/
|
7255
7240
|
defaultItem;
|
7256
7241
|
/**
|
7257
|
-
* Sets the disabled state of the component. To
|
7242
|
+
* Sets the disabled state of the component. To disable the component in reactive forms, see [Forms Support](slug:formssupport_ddl#toc-managing-the-dropdownlist-disabled-state-in-reactive-forms).
|
7258
7243
|
*/
|
7259
7244
|
disabled;
|
7260
7245
|
/**
|
7261
|
-
* Defines a Boolean function
|
7262
|
-
* ([see examples]({% slug disableditems_ddl %})). Determines whether the item will be disabled.
|
7246
|
+
* Defines a Boolean function executed for each data item in the component. Determines whether the item is disabled. [See examples.]({% slug disableditems_ddl %})
|
7263
7247
|
*/
|
7264
7248
|
set itemDisabled(fn) {
|
7265
7249
|
if (typeof fn !== 'function') {
|
@@ -7274,7 +7258,7 @@ class DropDownListComponent {
|
|
7274
7258
|
*/
|
7275
7259
|
readonly = false;
|
7276
7260
|
/**
|
7277
|
-
* Enables the [filtering]({% slug filtering_ddl %}) functionality of the
|
7261
|
+
* Enables the [filtering]({% slug filtering_ddl %}) functionality of the `DropDownListComponent`.
|
7278
7262
|
*/
|
7279
7263
|
filterable = false;
|
7280
7264
|
/**
|
@@ -7287,17 +7271,16 @@ class DropDownListComponent {
|
|
7287
7271
|
return this._virtualSettings;
|
7288
7272
|
}
|
7289
7273
|
/**
|
7290
|
-
* Enables a case-insensitive search.
|
7274
|
+
* Enables a case-insensitive search. Use this option when filtration is disabled.
|
7291
7275
|
*/
|
7292
7276
|
ignoreCase = true;
|
7293
7277
|
/**
|
7294
|
-
* Sets the delay before an item search is performed.
|
7278
|
+
* Sets the delay before an item search is performed. Use this option when filtration is disabled.
|
7295
7279
|
*/
|
7296
7280
|
delay = 500;
|
7297
7281
|
/**
|
7298
|
-
* Specifies the type of the selected value
|
7299
|
-
*
|
7300
|
-
* If set to `true`, the selected value has to be of a primitive value.
|
7282
|
+
* Specifies the type of the selected value. If set to `true`, the selected value must be a primitive value.
|
7283
|
+
* * [More information and example.]({% slug valuebinding_ddl %}#toc-primitive-values-from-object-fields)
|
7301
7284
|
*/
|
7302
7285
|
set valuePrimitive(isPrimitive) {
|
7303
7286
|
this._valuePrimitive = isPrimitive;
|
@@ -7330,6 +7313,7 @@ class DropDownListComponent {
|
|
7330
7313
|
* * `large`
|
7331
7314
|
* * `none`
|
7332
7315
|
*
|
7316
|
+
* @default 'medium'
|
7333
7317
|
*/
|
7334
7318
|
set size(size) {
|
7335
7319
|
const newSize = size ? size : DEFAULT_SIZE$3;
|
@@ -7352,6 +7336,7 @@ class DropDownListComponent {
|
|
7352
7336
|
* * `full`
|
7353
7337
|
* * `none`
|
7354
7338
|
*
|
7339
|
+
* @default 'medium'
|
7355
7340
|
*/
|
7356
7341
|
set rounded(rounded) {
|
7357
7342
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
|
@@ -7373,6 +7358,7 @@ class DropDownListComponent {
|
|
7373
7358
|
* * `outline`
|
7374
7359
|
* * `none`
|
7375
7360
|
*
|
7361
|
+
* @default 'solid'
|
7376
7362
|
*/
|
7377
7363
|
set fillMode(fillMode) {
|
7378
7364
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
|
@@ -7391,27 +7377,19 @@ class DropDownListComponent {
|
|
7391
7377
|
*/
|
7392
7378
|
leftRightArrowsNavigation = true;
|
7393
7379
|
/**
|
7394
|
-
* Fires each time the value
|
7380
|
+
* Fires each time the value changes. [See example.](slug:events_ddl).
|
7395
7381
|
*/
|
7396
7382
|
valueChange = new EventEmitter();
|
7397
7383
|
/**
|
7398
|
-
|
7399
|
-
* ([see example](slug:events_ddl)).
|
7400
|
-
* You can filter the source based on the passed filtration value.
|
7401
|
-
* When the value of the component is programmatically changed to `ngModel` or `formControl`
|
7402
|
-
* through its API or form binding, the `valueChange` event is not triggered because it
|
7403
|
-
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
7384
|
+
** Fires each time the user types in the input field. You can filter the source based on the filtration value. When the value is programmatically changed, the `valueChange` event is not triggered. [See example.](slug:events_ddl).
|
7404
7385
|
*/
|
7405
7386
|
filterChange = new EventEmitter();
|
7406
7387
|
/**
|
7407
|
-
* Fires each time the item selection
|
7408
|
-
* ([see example](slug:events_ddl)).
|
7388
|
+
* Fires each time the item selection changes. [see example.](slug:events_ddl).
|
7409
7389
|
*/
|
7410
7390
|
selectionChange = new EventEmitter();
|
7411
7391
|
/**
|
7412
|
-
* Fires each time the popup is about to open
|
7413
|
-
* ([see example]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)).
|
7414
|
-
* This event is preventable. If you cancel it, the popup will remain closed.
|
7392
|
+
* Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup remains closed. [see example.]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)
|
7415
7393
|
*/
|
7416
7394
|
open = new EventEmitter();
|
7417
7395
|
/**
|
@@ -7419,9 +7397,7 @@ class DropDownListComponent {
|
|
7419
7397
|
*/
|
7420
7398
|
opened = new EventEmitter();
|
7421
7399
|
/**
|
7422
|
-
* Fires each time the popup is about to close
|
7423
|
-
* ([see example]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)).
|
7424
|
-
* This event is preventable. If you cancel it, the popup will remain open.
|
7400
|
+
* Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup remains open. [see example.]({% slug openstate_ddl %}#toc-preventing-opening-and-closing)
|
7425
7401
|
*/
|
7426
7402
|
close = new EventEmitter();
|
7427
7403
|
/**
|
@@ -7429,11 +7405,11 @@ class DropDownListComponent {
|
|
7429
7405
|
*/
|
7430
7406
|
closed = new EventEmitter();
|
7431
7407
|
/**
|
7432
|
-
* Fires each time the user focuses the
|
7408
|
+
* Fires each time the user focuses the `DropDownListComponent`.
|
7433
7409
|
*/
|
7434
7410
|
onFocus = new EventEmitter();
|
7435
7411
|
/**
|
7436
|
-
* Fires each time the
|
7412
|
+
* Fires each time the `DropDownListComponent` gets blurred.
|
7437
7413
|
*/
|
7438
7414
|
onBlur = new EventEmitter();
|
7439
7415
|
itemTemplate;
|
@@ -7732,9 +7708,7 @@ class DropDownListComponent {
|
|
7732
7708
|
return ngControl?.control || null;
|
7733
7709
|
}
|
7734
7710
|
/**
|
7735
|
-
* Focuses a specific item of the
|
7736
|
-
* If there is a default item it is positioned at index -1.
|
7737
|
-
* If null or invalid index is provided the focus will be removed.
|
7711
|
+
* Focuses a specific item of the `DropDownListComponent` based on the provided index. If there is a default item, it is positioned at index `-1`. If `null` or an invalid index is provided, the focus is removed.
|
7738
7712
|
*/
|
7739
7713
|
focusItemAt(index) {
|
7740
7714
|
const minIndex = isPresent(this.defaultItem) ? -1 : 0;
|
@@ -7747,7 +7721,7 @@ class DropDownListComponent {
|
|
7747
7721
|
}
|
7748
7722
|
}
|
7749
7723
|
/**
|
7750
|
-
* Focuses the
|
7724
|
+
* Focuses the `DropDownListComponent`.
|
7751
7725
|
*/
|
7752
7726
|
focus() {
|
7753
7727
|
if (!this.disabled) {
|
@@ -7755,7 +7729,7 @@ class DropDownListComponent {
|
|
7755
7729
|
}
|
7756
7730
|
}
|
7757
7731
|
/**
|
7758
|
-
* Blurs the
|
7732
|
+
* Blurs the `DropDownListComponent`.
|
7759
7733
|
*/
|
7760
7734
|
blur() {
|
7761
7735
|
if (!this.disabled) {
|
@@ -7764,9 +7738,7 @@ class DropDownListComponent {
|
|
7764
7738
|
}
|
7765
7739
|
}
|
7766
7740
|
/**
|
7767
|
-
* Toggles the visibility of the
|
7768
|
-
* ([see example]({% slug openstate_ddl %}#toc-setting-the-initially-opened-component)).
|
7769
|
-
* If you use the `toggle` method to open or close the popup, the `open` and `close` events will not be fired.
|
7741
|
+
* Toggles the visibility of the Popup or ActionSheet. If you use the `toggle` method to open or close the Popup, the `open` and `close` events are not fired.
|
7770
7742
|
*
|
7771
7743
|
* @param open - The state of the popup.
|
7772
7744
|
*/
|
@@ -7822,9 +7794,7 @@ class DropDownListComponent {
|
|
7822
7794
|
return isTruthy(this._open || this.isActionSheetExpanded);
|
7823
7795
|
}
|
7824
7796
|
/**
|
7825
|
-
* Resets the value of the
|
7826
|
-
* If you use the `reset` method to clear the value of the component,
|
7827
|
-
* the model will not update automatically and the `selectionChange` and `valueChange` events will not be fired.
|
7797
|
+
* Resets the value of the `DropDownListComponent`. If you use the `reset` method to clear the value, the model does not update automatically and the `selectionChange` and `valueChange` events are not fired.
|
7828
7798
|
*/
|
7829
7799
|
reset() {
|
7830
7800
|
this.value = undefined;
|
@@ -9291,17 +9261,28 @@ const DEFAULT_FILL_MODE$2 = 'solid';
|
|
9291
9261
|
/**
|
9292
9262
|
* Represents the [Kendo UI MultiSelect component for Angular]({% slug overview_multiselect %}).
|
9293
9263
|
*
|
9264
|
+
* Use the `MultiSelectComponent` to show a dropdown list where users can select multiple items.
|
9265
|
+
* [See example]({% slug overview_multiselect %}).
|
9266
|
+
*
|
9294
9267
|
* @example
|
9295
|
-
* ```
|
9296
|
-
*
|
9297
|
-
*
|
9298
|
-
*
|
9299
|
-
*
|
9300
|
-
*
|
9301
|
-
*
|
9268
|
+
* ```typescript
|
9269
|
+
* @Component({
|
9270
|
+
* selector: 'my-app',
|
9271
|
+
* template: `
|
9272
|
+
* <kendo-multiselect
|
9273
|
+
* [data]="listItems"
|
9274
|
+
* textField="name"
|
9275
|
+
* valueField="id"
|
9276
|
+
* placeholder="Select items...">
|
9277
|
+
* </kendo-multiselect>
|
9278
|
+
* `
|
9302
9279
|
* })
|
9303
|
-
* class AppComponent {
|
9304
|
-
* public listItems
|
9280
|
+
* export class AppComponent {
|
9281
|
+
* public listItems = [
|
9282
|
+
* { id: 1, name: "Item 1" },
|
9283
|
+
* { id: 2, name: "Item 2" },
|
9284
|
+
* { id: 3, name: "Item 3" }
|
9285
|
+
* ];
|
9305
9286
|
* }
|
9306
9287
|
* ```
|
9307
9288
|
*/
|
@@ -9372,9 +9353,9 @@ class MultiSelectComponent {
|
|
9372
9353
|
return ngControl?.control || null;
|
9373
9354
|
}
|
9374
9355
|
/**
|
9375
|
-
* Focuses a specific item
|
9376
|
-
*
|
9377
|
-
*
|
9356
|
+
* Focuses a specific item in the MultiSelect based on the provided index.
|
9357
|
+
* Sets the index to `-1` to focus the custom item if available.
|
9358
|
+
* Pass `null` or an invalid index to remove focus.
|
9378
9359
|
*/
|
9379
9360
|
focusItemAt(index) {
|
9380
9361
|
const minIndex = this.allowCustom ? -1 : 0;
|
@@ -9387,7 +9368,7 @@ class MultiSelectComponent {
|
|
9387
9368
|
}
|
9388
9369
|
}
|
9389
9370
|
/**
|
9390
|
-
* Focuses the MultiSelect.
|
9371
|
+
* Focuses the MultiSelect input element.
|
9391
9372
|
*/
|
9392
9373
|
focus() {
|
9393
9374
|
if (!this.disabled) {
|
@@ -9406,7 +9387,7 @@ class MultiSelectComponent {
|
|
9406
9387
|
}
|
9407
9388
|
}
|
9408
9389
|
/**
|
9409
|
-
*
|
9390
|
+
* Removes focus from the MultiSelect input element.
|
9410
9391
|
*/
|
9411
9392
|
blur() {
|
9412
9393
|
if (!this.disabled) {
|
@@ -9504,19 +9485,20 @@ class MultiSelectComponent {
|
|
9504
9485
|
*/
|
9505
9486
|
focusableId = `k-${guid()}`;
|
9506
9487
|
/**
|
9507
|
-
*
|
9508
|
-
*
|
9488
|
+
* Controls whether the options list closes after item selection finishes ([see example]({% slug openstate_multiselect %}#toc-keeping-the-options-list-open-while-on-focus)).
|
9489
|
+
* Set to `false` to keep the list open while the component has focus.
|
9490
|
+
*
|
9509
9491
|
* @default true
|
9510
9492
|
*/
|
9511
9493
|
autoClose = true;
|
9512
9494
|
/**
|
9513
|
-
*
|
9495
|
+
* Controls the loading state of the MultiSelect.
|
9496
|
+
* Set to `true` to display the loading indicator.
|
9514
9497
|
*/
|
9515
9498
|
loading;
|
9516
9499
|
/**
|
9517
|
-
* Sets the data
|
9518
|
-
*
|
9519
|
-
* > The data has to be provided in an array-like list of items.
|
9500
|
+
* Sets the data source for the MultiSelect.
|
9501
|
+
* Provide the data as an array of items.
|
9520
9502
|
*/
|
9521
9503
|
set data(data) {
|
9522
9504
|
this.dataService.data = data || [];
|
@@ -9539,10 +9521,10 @@ class MultiSelectComponent {
|
|
9539
9521
|
return this.dataService.data;
|
9540
9522
|
}
|
9541
9523
|
/**
|
9542
|
-
* Sets the
|
9543
|
-
*
|
9544
|
-
*
|
9545
|
-
* >
|
9524
|
+
* Sets the selected values of the MultiSelect.
|
9525
|
+
* Accepts primitive values (strings, numbers) or complex objects.
|
9526
|
+
* Use the `valuePrimitive` property to define the value type.
|
9527
|
+
* > The component ignores selected values that don't exist in the data source.
|
9546
9528
|
*/
|
9547
9529
|
set value(values) {
|
9548
9530
|
this._value = values ? values : [];
|
@@ -9558,21 +9540,21 @@ class MultiSelectComponent {
|
|
9558
9540
|
return this._value;
|
9559
9541
|
}
|
9560
9542
|
/**
|
9561
|
-
* Sets the
|
9562
|
-
*
|
9563
|
-
*
|
9564
|
-
* > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
|
9543
|
+
* Sets the field name that contains the item value in the data objects.
|
9544
|
+
* Skip this property when your data contains only primitive values.
|
9545
|
+
* Supports nested property paths like `category.id`.
|
9565
9546
|
*/
|
9566
9547
|
valueField;
|
9567
9548
|
/**
|
9568
|
-
* Sets the
|
9569
|
-
*
|
9570
|
-
*
|
9571
|
-
* > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
|
9549
|
+
* Sets the field name that contains the item text in the data objects.
|
9550
|
+
* Skip this property when your data contains only primitive values.
|
9551
|
+
* Supports nested property paths like `category.name`.
|
9572
9552
|
*/
|
9573
9553
|
textField;
|
9574
9554
|
/**
|
9575
|
-
*
|
9555
|
+
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute of the component.
|
9556
|
+
*
|
9557
|
+
* @default 0
|
9576
9558
|
*/
|
9577
9559
|
tabindex = 0;
|
9578
9560
|
/**
|
@@ -9587,12 +9569,7 @@ class MultiSelectComponent {
|
|
9587
9569
|
/**
|
9588
9570
|
* Sets the size of the component.
|
9589
9571
|
*
|
9590
|
-
*
|
9591
|
-
* * `small`
|
9592
|
-
* * `medium` (default)
|
9593
|
-
* * `large`
|
9594
|
-
* * `none`
|
9595
|
-
*
|
9572
|
+
* @default "medium"
|
9596
9573
|
*/
|
9597
9574
|
set size(size) {
|
9598
9575
|
const newSize = size ? size : DEFAULT_SIZE$2;
|
@@ -9608,13 +9585,7 @@ class MultiSelectComponent {
|
|
9608
9585
|
/**
|
9609
9586
|
* Sets the border radius of the component.
|
9610
9587
|
*
|
9611
|
-
*
|
9612
|
-
* * `small`
|
9613
|
-
* * `medium` (default)
|
9614
|
-
* * `large`
|
9615
|
-
* * `full`
|
9616
|
-
* * `none`
|
9617
|
-
*
|
9588
|
+
* @default "medium"
|
9618
9589
|
*/
|
9619
9590
|
set rounded(rounded) {
|
9620
9591
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
|
@@ -9628,14 +9599,9 @@ class MultiSelectComponent {
|
|
9628
9599
|
return this._rounded;
|
9629
9600
|
}
|
9630
9601
|
/**
|
9631
|
-
* Sets the
|
9632
|
-
*
|
9633
|
-
* The possible values are:
|
9634
|
-
* * `flat`
|
9635
|
-
* * `solid` (default)
|
9636
|
-
* * `outline`
|
9637
|
-
* * `none`
|
9602
|
+
* Sets the fill mode of the component.
|
9638
9603
|
*
|
9604
|
+
* @default "solid"
|
9639
9605
|
*/
|
9640
9606
|
set fillMode(fillMode) {
|
9641
9607
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
|
@@ -9649,7 +9615,7 @@ class MultiSelectComponent {
|
|
9649
9615
|
return this._fillMode;
|
9650
9616
|
}
|
9651
9617
|
/**
|
9652
|
-
*
|
9618
|
+
* Sets the placeholder text for the MultiSelect input.
|
9653
9619
|
* When the values are selected, it disappears.
|
9654
9620
|
*/
|
9655
9621
|
set placeholder(text) {
|
@@ -9659,18 +9625,21 @@ class MultiSelectComponent {
|
|
9659
9625
|
return this.selectedDataItems.length ? '' : this._placeholder;
|
9660
9626
|
}
|
9661
9627
|
/**
|
9662
|
-
*
|
9628
|
+
* Controls the adaptive mode behavior of the component.
|
9629
|
+
* Set to `auto` to enable adaptive rendering on small screens.
|
9630
|
+
*
|
9631
|
+
* @default "none"
|
9663
9632
|
*/
|
9664
9633
|
adaptiveMode = 'none';
|
9665
9634
|
/**
|
9666
|
-
* Sets the title
|
9667
|
-
*
|
9635
|
+
* Sets the title text for the ActionSheet in adaptive mode.
|
9636
|
+
* Uses the component's label text by default.
|
9668
9637
|
*/
|
9669
9638
|
adaptiveTitle = '';
|
9670
9639
|
/**
|
9671
|
-
* Sets the subtitle
|
9672
|
-
*
|
9673
|
-
|
9640
|
+
* Sets the subtitle text for the ActionSheet in adaptive mode.
|
9641
|
+
* No subtitle appears by default.
|
9642
|
+
*/
|
9674
9643
|
adaptiveSubtitle;
|
9675
9644
|
/**
|
9676
9645
|
* @hidden
|
@@ -9679,12 +9648,16 @@ class MultiSelectComponent {
|
|
9679
9648
|
return this.adaptiveMode === 'auto';
|
9680
9649
|
}
|
9681
9650
|
/**
|
9682
|
-
*
|
9651
|
+
* Controls the disabled state of the component.
|
9652
|
+
* When true, sets the component to disabled.
|
9653
|
+
* 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).
|
9654
|
+
*
|
9655
|
+
* @default false
|
9683
9656
|
*/
|
9684
9657
|
disabled = false;
|
9685
9658
|
/**
|
9686
|
-
*
|
9687
|
-
*
|
9659
|
+
* Determines wether the item will be disabled. The function is executed for each data item.
|
9660
|
+
* The function receives the item as an argument and should return `true` if the item is disabled.
|
9688
9661
|
*/
|
9689
9662
|
set itemDisabled(fn) {
|
9690
9663
|
if (typeof fn !== 'function') {
|
@@ -9693,7 +9666,10 @@ class MultiSelectComponent {
|
|
9693
9666
|
this.disabledItemsService.itemDisabled = fn;
|
9694
9667
|
}
|
9695
9668
|
/**
|
9696
|
-
*
|
9669
|
+
* Controls whether checkboxes appear before each item in the popup list.
|
9670
|
+
* Pass `true` to enable checkboxes or an object to configure checkbox settings.
|
9671
|
+
*
|
9672
|
+
* @default false
|
9697
9673
|
*/
|
9698
9674
|
set checkboxes(settings) {
|
9699
9675
|
this._checkboxes = normalizeCheckboxesSettings(settings);
|
@@ -9702,17 +9678,22 @@ class MultiSelectComponent {
|
|
9702
9678
|
return this._checkboxes;
|
9703
9679
|
}
|
9704
9680
|
/**
|
9705
|
-
*
|
9681
|
+
* Controls the read-only state of the component.
|
9682
|
+
* When true, the component does not allow user input or selection changes.
|
9706
9683
|
*
|
9707
9684
|
* @default false
|
9708
9685
|
*/
|
9709
9686
|
readonly = false;
|
9710
9687
|
/**
|
9711
|
-
* Enables the
|
9688
|
+
* Enables the filtering functionality of the MultiSelect.
|
9689
|
+
* Set to `true` to allow users to filter the data by typing.
|
9690
|
+
*
|
9691
|
+
* @default false
|
9712
9692
|
*/
|
9713
9693
|
filterable = false;
|
9714
9694
|
/**
|
9715
|
-
* Enables
|
9695
|
+
* Enables virtualization to improve performance with large datasets.
|
9696
|
+
* Pass `true` for default settings or an object to configure virtualization.
|
9716
9697
|
*/
|
9717
9698
|
set virtual(settings) {
|
9718
9699
|
this._virtualSettings = normalizeVirtualizationSettings(settings);
|
@@ -9721,14 +9702,8 @@ class MultiSelectComponent {
|
|
9721
9702
|
return this._virtualSettings;
|
9722
9703
|
}
|
9723
9704
|
/**
|
9724
|
-
* Configures the popup
|
9725
|
-
*
|
9726
|
-
* The available options are:
|
9727
|
-
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
|
9728
|
-
* - `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.
|
9729
|
-
* - `height: Number`—Sets the height of the popup container.
|
9730
|
-
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
|
9731
|
-
* - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
|
9705
|
+
* Configures the popup appearance and behavior.
|
9706
|
+
* Set properties like `animate`, `width`, `height`, `popupClass`, and `appendTo`.
|
9732
9707
|
*/
|
9733
9708
|
set popupSettings(settings) {
|
9734
9709
|
this._popupSettings = Object.assign({ animate: true }, settings);
|
@@ -9737,12 +9712,10 @@ class MultiSelectComponent {
|
|
9737
9712
|
return this._popupSettings;
|
9738
9713
|
}
|
9739
9714
|
/**
|
9740
|
-
* Sets the height of the options list in the popup.
|
9715
|
+
* Sets the height of the options list in the popup.
|
9716
|
+
* This affects only the list height, not the entire popup container.
|
9741
9717
|
*
|
9742
|
-
*
|
9743
|
-
* > To set the height of the popup container, use `popupSettings.height`.
|
9744
|
-
*
|
9745
|
-
* > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
|
9718
|
+
* @default 200
|
9746
9719
|
*/
|
9747
9720
|
set listHeight(_listHeight) {
|
9748
9721
|
this._listHeight = _listHeight;
|
@@ -9755,9 +9728,9 @@ class MultiSelectComponent {
|
|
9755
9728
|
}
|
9756
9729
|
_listHeight = 200;
|
9757
9730
|
/**
|
9758
|
-
*
|
9759
|
-
*
|
9760
|
-
*
|
9731
|
+
* Controls the type of selected values.
|
9732
|
+
* Set to `true` for primitive values or `false` for object references.
|
9733
|
+
* When undefined, the component determines the type based on `valueField`.
|
9761
9734
|
*/
|
9762
9735
|
set valuePrimitive(isPrimitive) {
|
9763
9736
|
this._valuePrimitive = isPrimitive;
|
@@ -9769,71 +9742,30 @@ class MultiSelectComponent {
|
|
9769
9742
|
return this._valuePrimitive;
|
9770
9743
|
}
|
9771
9744
|
/**
|
9772
|
-
*
|
9773
|
-
*
|
9745
|
+
* Controls whether a clear button appears when items are selected.
|
9746
|
+
* Set to `true` to show the button that clears all selections.
|
9747
|
+
*
|
9748
|
+
* @default true
|
9774
9749
|
*/
|
9775
9750
|
clearButton = true;
|
9776
9751
|
/**
|
9777
|
-
*
|
9778
|
-
*
|
9752
|
+
* Sets a function that transforms selected data items into display tags.
|
9753
|
+
* Use this to customize how selected items appear as tags.
|
9779
9754
|
*
|
9780
|
-
* @
|
9781
|
-
* @returns { Any[] } - The tags that will be rendered by the component.
|
9755
|
+
* @default (tags) => tags || []
|
9782
9756
|
*/
|
9783
9757
|
tagMapper = (tags) => tags || [];
|
9784
9758
|
/**
|
9785
|
-
*
|
9786
|
-
*
|
9787
|
-
*
|
9759
|
+
* Allows users to add custom values not present in the data source.
|
9760
|
+
* Set to `true` to enable custom value input.
|
9761
|
+
* This feature is not available in adaptive mode.
|
9788
9762
|
*
|
9789
|
-
*
|
9763
|
+
* @default false
|
9790
9764
|
*/
|
9791
9765
|
allowCustom = false;
|
9792
9766
|
/**
|
9793
|
-
*
|
9794
|
-
*
|
9795
|
-
*
|
9796
|
-
* @param { Any } value - The custom value that is defined by the user.
|
9797
|
-
* @returns { Any }
|
9798
|
-
*
|
9799
|
-
* @example
|
9800
|
-
* ```ts
|
9801
|
-
* import { map } from 'rxjs/operators';
|
9802
|
-
*
|
9803
|
-
* _@Component({
|
9804
|
-
* selector: 'my-app',
|
9805
|
-
* template: `
|
9806
|
-
* <kendo-multiselect
|
9807
|
-
* [allowCustom]="true"
|
9808
|
-
* [data]="listItems"
|
9809
|
-
* textField="text"
|
9810
|
-
* valueField="value"
|
9811
|
-
* [valueNormalizer]="valueNormalizer"
|
9812
|
-
* (valueChange)="onValueChange($event)"
|
9813
|
-
* >
|
9814
|
-
* </kendo-multiselect>
|
9815
|
-
* `
|
9816
|
-
* })
|
9817
|
-
*
|
9818
|
-
* class AppComponent {
|
9819
|
-
* public listItems: Array<{ text: string, value: number }> = [
|
9820
|
-
* { text: "Small", value: 1 },
|
9821
|
-
* { text: "Medium", value: 2 },
|
9822
|
-
* { text: "Large", value: 3 }
|
9823
|
-
* ];
|
9824
|
-
*
|
9825
|
-
* public onValueChange(value) {
|
9826
|
-
* console.log("valueChange : ", value);
|
9827
|
-
* }
|
9828
|
-
*
|
9829
|
-
* public valueNormalizer = (text$: Observable<string>) => text$.pipe(map((text: string) => {
|
9830
|
-
* return {
|
9831
|
-
* value: Math.floor(Math.random() * (1000 - 100) + 1000), //generate unique valueField
|
9832
|
-
* text: text };
|
9833
|
-
* }));
|
9834
|
-
*
|
9835
|
-
* }
|
9836
|
-
* ```
|
9767
|
+
* Sets a function that normalizes custom user input into data items.
|
9768
|
+
* Use this when your data items differ from simple strings.
|
9837
9769
|
*/
|
9838
9770
|
valueNormalizer = (text) => text.pipe(map((userInput) => {
|
9839
9771
|
const comparer = (item) => typeof item === 'string' && userInput.toLowerCase() === item.toLowerCase();
|
@@ -9845,62 +9777,57 @@ class MultiSelectComponent {
|
|
9845
9777
|
return matchingItem ? matchingItem : userInput;
|
9846
9778
|
}));
|
9847
9779
|
/**
|
9848
|
-
* Sets
|
9780
|
+
* Sets HTML attributes for the inner input element.
|
9781
|
+
* You cannot change attributes essential for component functionality.
|
9849
9782
|
*/
|
9850
9783
|
inputAttributes;
|
9851
9784
|
/**
|
9852
|
-
* Fires
|
9853
|
-
*
|
9785
|
+
* Fires when the user types in the input field.
|
9786
|
+
* Use this event to filter the data source based on user input.
|
9854
9787
|
*/
|
9855
9788
|
filterChange = new EventEmitter();
|
9856
9789
|
/**
|
9857
|
-
* Fires
|
9858
|
-
*
|
9859
|
-
* ([see example](slug:events_multiselect)).
|
9860
|
-
* When the value of the component is programmatically changed to `ngModel` or `formControl`
|
9861
|
-
* through its API or form binding, the `valueChange` event is not triggered because it
|
9862
|
-
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
9790
|
+
* Fires when the value changes through user interaction or the Clear button.
|
9791
|
+
* This event does not fire when you change the value programmatically.
|
9863
9792
|
*/
|
9864
9793
|
valueChange = new EventEmitter();
|
9865
9794
|
/**
|
9866
|
-
* Fires
|
9867
|
-
*
|
9868
|
-
* This event is preventable. If you cancel it, the popup will remain closed.
|
9795
|
+
* Fires before the popup opens.
|
9796
|
+
* You can prevent the popup from opening by calling `preventDefault()` on the event.
|
9869
9797
|
*/
|
9870
9798
|
open = new EventEmitter();
|
9871
9799
|
/**
|
9872
|
-
* Fires after the popup
|
9800
|
+
* Fires after the popup opens completely.
|
9873
9801
|
*/
|
9874
9802
|
opened = new EventEmitter();
|
9875
9803
|
/**
|
9876
|
-
* Fires
|
9877
|
-
*
|
9878
|
-
* This event is preventable. If you cancel it, the popup will remain open.
|
9804
|
+
* Fires before the popup closes.
|
9805
|
+
* You can prevent the popup from closing by calling `preventDefault()` on the event.
|
9879
9806
|
*/
|
9880
9807
|
close = new EventEmitter();
|
9881
9808
|
/**
|
9882
|
-
* Fires after the popup
|
9809
|
+
* Fires after the popup closes completely.
|
9883
9810
|
*/
|
9884
9811
|
closed = new EventEmitter();
|
9885
9812
|
/**
|
9886
|
-
* Fires
|
9813
|
+
* Fires when the user focuses the MultiSelect component.
|
9887
9814
|
*/
|
9888
9815
|
onFocus = new EventEmitter();
|
9889
9816
|
/**
|
9890
|
-
* Fires
|
9817
|
+
* Fires when the MultiSelect component loses focus.
|
9891
9818
|
*/
|
9892
9819
|
onBlur = new EventEmitter();
|
9893
9820
|
/**
|
9894
|
-
* Fires
|
9821
|
+
* Fires when the user focuses the input element inside the MultiSelect.
|
9895
9822
|
*/
|
9896
9823
|
inputFocus = new EventEmitter();
|
9897
9824
|
/**
|
9898
|
-
* Fires
|
9825
|
+
* Fires when the input element inside the MultiSelect loses focus.
|
9899
9826
|
*/
|
9900
9827
|
inputBlur = new EventEmitter();
|
9901
9828
|
/**
|
9902
|
-
* Fires
|
9903
|
-
*
|
9829
|
+
* Fires before a tag gets removed from the selection.
|
9830
|
+
* You can prevent tag removal by calling `preventDefault()` on the event.
|
9904
9831
|
*/
|
9905
9832
|
removeTag = new EventEmitter();
|
9906
9833
|
container;
|
@@ -10370,9 +10297,8 @@ class MultiSelectComponent {
|
|
10370
10297
|
return isTruthy(this._open || this.isActionSheetExpanded);
|
10371
10298
|
}
|
10372
10299
|
/**
|
10373
|
-
* Resets the
|
10374
|
-
*
|
10375
|
-
* the model will not update automatically and the `selectionChange` and `valueChange` events will not be fired.
|
10300
|
+
* Resets the MultiSelect by clearing the text and value.
|
10301
|
+
* This method does not trigger the `selectionChange` and `valueChange` events.
|
10376
10302
|
*/
|
10377
10303
|
reset() {
|
10378
10304
|
this.text = "";
|
@@ -11587,14 +11513,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
11587
11513
|
}] } });
|
11588
11514
|
|
11589
11515
|
/**
|
11590
|
-
* Renders the column cell content of the MultiColumnComboBox.
|
11591
|
-
* with the `kendoMultiColumnComboBoxColumnCellTemplate` directive inside the [`<kendo-combobox-column>`]({% slug api_dropdowns_comboboxcolumncomponent %}) tag
|
11592
|
-
* ([see example]({% slug templates_multicolumncombobox %})).
|
11516
|
+
* Renders the column cell content of the MultiColumnComboBox component.
|
11593
11517
|
*
|
11594
|
-
*
|
11518
|
+
* To define a column cell template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnCellTemplate` directive inside the [`<kendo-combobox-column>`]({% slug api_dropdowns_comboboxcolumncomponent %}) tag.
|
11519
|
+
* [See example]({% slug templates_multicolumncombobox %}).
|
11595
11520
|
*
|
11596
|
-
*
|
11597
|
-
* - `let-
|
11521
|
+
* The context variables are:
|
11522
|
+
* - `let-dataItem="dataItem"` (`any`)—The current data item. Also available as the implicit context variable.
|
11523
|
+
* - `let-column="column"` ([`ColumnComponent`]({% slug api_dropdowns_comboboxcolumncomponent %}))—The current column configuration object.
|
11598
11524
|
*/
|
11599
11525
|
class ColumnCellTemplateDirective {
|
11600
11526
|
templateRef;
|
@@ -11613,11 +11539,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
11613
11539
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
11614
11540
|
|
11615
11541
|
/**
|
11616
|
-
* Renders the column header content of the MultiColumnComboBox.
|
11617
|
-
*
|
11618
|
-
*
|
11542
|
+
* Renders the column header content of the MultiColumnComboBox component.
|
11543
|
+
*
|
11544
|
+
* To define a column header template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnHeaderTemplate` directive inside the [`<kendo-combobox-column>`]({% slug api_dropdowns_comboboxcolumncomponent %}) tag.
|
11545
|
+
* [See example]({% slug templates_multicolumncombobox %}).
|
11619
11546
|
*
|
11620
|
-
* The current [`column`]({% slug api_dropdowns_comboboxcolumncomponent %}) is available as implicit context variable.
|
11547
|
+
* The current [`column`]({% slug api_dropdowns_comboboxcolumncomponent %}) is available as the implicit context variable.
|
11621
11548
|
*/
|
11622
11549
|
class ColumnHeaderTemplateDirective {
|
11623
11550
|
templateRef;
|
@@ -11636,8 +11563,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
11636
11563
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
11637
11564
|
|
11638
11565
|
/**
|
11639
|
-
* Represents the column definition
|
11640
|
-
*
|
11566
|
+
* Represents the column definition for the MultiColumnComboBox component.
|
11567
|
+
*
|
11568
|
+
* Use this component to define columns inside the MultiColumnComboBox.
|
11569
|
+
* [See example]({% slug columns_multicolumncombobox %}).
|
11641
11570
|
*/
|
11642
11571
|
class ComboBoxColumnComponent {
|
11643
11572
|
/**
|
@@ -11649,48 +11578,50 @@ class ComboBoxColumnComponent {
|
|
11649
11578
|
*/
|
11650
11579
|
headerTemplate;
|
11651
11580
|
/**
|
11652
|
-
*
|
11581
|
+
* Sets the field to which the column is bound.
|
11653
11582
|
*
|
11654
11583
|
* > The `field` property can be set to point to a nested property value - e.g. `category.name`.
|
11655
11584
|
*/
|
11656
11585
|
field;
|
11657
11586
|
/**
|
11658
|
-
*
|
11587
|
+
* Sets the title of the column.
|
11659
11588
|
*/
|
11660
11589
|
title;
|
11661
11590
|
/**
|
11662
|
-
*
|
11591
|
+
* Sets the width of the column (in pixels).
|
11663
11592
|
*/
|
11664
11593
|
width;
|
11665
11594
|
/**
|
11666
|
-
*
|
11667
|
-
*
|
11595
|
+
* Controls the visibility of the column. When `true`, hides the column from view.
|
11668
11596
|
* @default false
|
11669
11597
|
*/
|
11670
11598
|
hidden = false;
|
11671
11599
|
/**
|
11672
|
-
* Sets
|
11673
|
-
*
|
11600
|
+
* Sets custom styles for the table cells of the column (except for the header cells).
|
11601
|
+
*
|
11602
|
+
* The `style` property uses the NgStyle directive to apply styles.
|
11674
11603
|
*/
|
11675
11604
|
style;
|
11676
11605
|
/**
|
11677
|
-
* Sets
|
11678
|
-
*
|
11606
|
+
* Sets custom styles for the header cell of the column.
|
11607
|
+
*
|
11608
|
+
* The `headerStyle` property uses the NgStyle directive to apply styles.
|
11679
11609
|
*/
|
11680
11610
|
headerStyle;
|
11681
11611
|
/**
|
11682
|
-
* Sets
|
11683
|
-
*
|
11612
|
+
* Sets custom CSS classes for the column cells.
|
11613
|
+
*
|
11614
|
+
* The `class` property uses the NgClass directive to apply classes.
|
11684
11615
|
*/
|
11685
11616
|
class;
|
11686
11617
|
/**
|
11687
|
-
* Sets
|
11688
|
-
*
|
11618
|
+
* Sets custom CSS classes for the column header cell.
|
11619
|
+
*
|
11620
|
+
* The `headerClass` property uses the NgClass directive to apply classes.
|
11689
11621
|
*/
|
11690
11622
|
headerClass;
|
11691
11623
|
/**
|
11692
|
-
* Sets the condition that needs to be satisfied for a column to remain visible.
|
11693
|
-
* If you set the [`hidden`]({% slug api_dropdowns_comboboxcolumncomponent %}#toc-hidden) property, the behavior of `media` is overridden.
|
11624
|
+
* Sets the condition that needs to be satisfied for a column to remain visible. If you set the [`hidden`]({% slug api_dropdowns_comboboxcolumncomponent %}#toc-hidden) property, the behavior of media is overridden.
|
11694
11625
|
*/
|
11695
11626
|
media;
|
11696
11627
|
/**
|
@@ -11734,13 +11665,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
11734
11665
|
}] } });
|
11735
11666
|
|
11736
11667
|
/**
|
11737
|
-
*
|
11668
|
+
* Stores the initially resolved scrollbar width value.
|
11738
11669
|
*/
|
11739
11670
|
let SCROLLBAR_WIDTH;
|
11740
11671
|
/**
|
11741
11672
|
* @hidden
|
11742
11673
|
*
|
11743
|
-
* Gets the default scrollbar width
|
11674
|
+
* Gets the default scrollbar width for the current environment.
|
11675
|
+
*
|
11676
|
+
* Returns the scrollbar width in pixels.
|
11744
11677
|
*/
|
11745
11678
|
const scrollbarWidth = () => {
|
11746
11679
|
// calculate scrollbar width only once, then return the memoized value
|
@@ -11756,6 +11689,8 @@ const scrollbarWidth = () => {
|
|
11756
11689
|
};
|
11757
11690
|
/**
|
11758
11691
|
* Checks if all columns have a valid user-defined width.
|
11692
|
+
*
|
11693
|
+
* Returns `true` if all columns have a valid width, otherwise returns `false`.
|
11759
11694
|
*/
|
11760
11695
|
const allColumnsWidthsSet = (columns) => {
|
11761
11696
|
if (!isPresent(columns) || columns.length === 0) {
|
@@ -11766,9 +11701,10 @@ const allColumnsWidthsSet = (columns) => {
|
|
11766
11701
|
/**
|
11767
11702
|
* @hidden
|
11768
11703
|
*
|
11769
|
-
* Calculates the row width
|
11770
|
-
*
|
11771
|
-
*
|
11704
|
+
* Calculates the row width based on the columns' width configuration.
|
11705
|
+
*
|
11706
|
+
* Ignores hidden columns and columns that do not match the provided media query.
|
11707
|
+
* Returns `null` if any column does not have a valid width.
|
11772
11708
|
*/
|
11773
11709
|
const getRowWidthFromColumnsMeta = (columns) => {
|
11774
11710
|
if (!allColumnsWidthsSet(columns)) {
|
@@ -11785,7 +11721,16 @@ const getRowWidthFromColumnsMeta = (columns) => {
|
|
11785
11721
|
};
|
11786
11722
|
|
11787
11723
|
/**
|
11788
|
-
* Represents the
|
11724
|
+
* Represents the Kendo UI MultiColumnComboBox component for Angular.
|
11725
|
+
*
|
11726
|
+
* Use the `MultiColumnComboBoxComponent` to show a dropdown list with multiple columns.
|
11727
|
+
* [See example]({% slug overview_multicolumncombobox %}).
|
11728
|
+
*
|
11729
|
+
* @example
|
11730
|
+
* ```html
|
11731
|
+
* <kendo-multicolumncombobox [data]="data" [columns]="columns">
|
11732
|
+
* </kendo-multicolumncombobox>
|
11733
|
+
* ```
|
11789
11734
|
*/
|
11790
11735
|
class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
11791
11736
|
hostElement;
|
@@ -11804,7 +11749,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
11804
11749
|
return this.disabled;
|
11805
11750
|
}
|
11806
11751
|
/**
|
11807
|
-
*
|
11752
|
+
* Contains a query list of all declared `ComboBoxColumnComponent` columns.
|
11753
|
+
* Use this property to access and configure the columns displayed in the dropdown.
|
11808
11754
|
*/
|
11809
11755
|
columns;
|
11810
11756
|
/**
|
@@ -12570,11 +12516,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
12570
12516
|
/**
|
12571
12517
|
* Renders the content of each node in the DropDownTree. To define a node template, nest an `<ng-template>` tag
|
12572
12518
|
* with the `kendoDropDownTreeNodeTemplate` directive inside the `<kendo-dropdowntree>` tag.
|
12519
|
+
* To define a node template, nest an `<ng-template>` tag with the `kendoDropDownTreeNodeTemplate` directive inside the `<kendo-dropdowntree>` tag.
|
12573
12520
|
*
|
12574
|
-
*
|
12521
|
+
* You can use these context variables in the template:
|
12575
12522
|
*
|
12576
|
-
* - `let-dataItem` (`any`) - The current data item.
|
12577
|
-
* - `let-index="index"` (`string`) - The current item hierarchical index.
|
12523
|
+
* - `let-dataItem` (`any`) - The current data item. This is the implicit context variable.
|
12524
|
+
* - `let-index="index"` (`string`) - The current item's hierarchical index.
|
12578
12525
|
*/
|
12579
12526
|
class NodeTemplateDirective {
|
12580
12527
|
templateRef;
|
@@ -12825,7 +12772,7 @@ class DropDownTreeComponent {
|
|
12825
12772
|
*/
|
12826
12773
|
fetchChildren = fetchChildren$1;
|
12827
12774
|
/**
|
12828
|
-
*
|
12775
|
+
* Sets the placeholder of the input element of the DropDownTree.
|
12829
12776
|
*/
|
12830
12777
|
placeholder = "";
|
12831
12778
|
/**
|
@@ -12861,7 +12808,7 @@ class DropDownTreeComponent {
|
|
12861
12808
|
* > The `listHeight` property affects only the list of options and not the whole popup container.
|
12862
12809
|
* > To set the height of the popup container, use `popupSettings.height`.
|
12863
12810
|
*
|
12864
|
-
*
|
12811
|
+
* When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
|
12865
12812
|
*/
|
12866
12813
|
set listHeight(_listHeight) {
|
12867
12814
|
this._listHeight = _listHeight;
|
@@ -12973,7 +12920,7 @@ class DropDownTreeComponent {
|
|
12973
12920
|
*/
|
12974
12921
|
isNodeExpanded;
|
12975
12922
|
/**
|
12976
|
-
* A callback which determines whether a tree node should be rendered as hidden. The utility
|
12923
|
+
* A callback which determines whether a tree node should be rendered as hidden. The utility `.k-hidden` class is used to hide the nodes.
|
12977
12924
|
* Useful for custom filtering implementations.
|
12978
12925
|
*/
|
12979
12926
|
isNodeVisible = isNodeVisible$1;
|
@@ -14593,7 +14540,7 @@ class BaseCheckDirective {
|
|
14593
14540
|
this.checkedKeys = new Set(this.checkedItems.map(item => item.key));
|
14594
14541
|
}
|
14595
14542
|
/**
|
14596
|
-
*
|
14543
|
+
* Add the item's depth to its value so you can have duplicate values on different levels.
|
14597
14544
|
*
|
14598
14545
|
* @param item - The checked key.
|
14599
14546
|
* @returns { string } - A string key consisting of the item's `valueField` value and its depth (depth is 0 if data is homogeneous).
|
@@ -14622,28 +14569,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
14622
14569
|
class CheckDirective extends BaseCheckDirective {
|
14623
14570
|
treeView;
|
14624
14571
|
/**
|
14625
|
-
* Specifies whether items
|
14626
|
-
*
|
14627
|
-
* The `checkChildren` prop also enables or disables parent item checking (i.e. checking all child items automatically checks the parent).
|
14572
|
+
* Specifies whether items are checked on click and if checking a node also checks its children.
|
14573
|
+
* The `checkChildren` property also controls parent item checking (checking all child items automatically checks the parent).
|
14628
14574
|
*/
|
14629
14575
|
checkable;
|
14630
14576
|
/**
|
14631
|
-
*
|
14577
|
+
* Sets the item key or keys to compare data items.
|
14632
14578
|
*/
|
14633
14579
|
valueField;
|
14634
14580
|
/**
|
14635
|
-
*
|
14581
|
+
* Sets the collection that stores all checked items.
|
14636
14582
|
*/
|
14637
14583
|
checkedItems;
|
14638
14584
|
/**
|
14639
|
-
* Fires when the `checkedItems` collection
|
14585
|
+
* Fires when the `checkedItems` collection updates.
|
14640
14586
|
*/
|
14641
14587
|
checkedItemsChange = new EventEmitter();
|
14642
14588
|
/**
|
14643
|
-
* Holds a Set with
|
14644
|
-
*
|
14645
|
-
* Should be updated each time the `checkedItems` value or content is changed.
|
14646
|
-
* Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
|
14589
|
+
* Holds a `Set` with only the checked item keys. Updates this set each time the `checkedItems` value or content changes and uses it for fast look-up to check if an item is checked.
|
14647
14590
|
*/
|
14648
14591
|
checkedKeys = new Set();
|
14649
14592
|
subscriptions = new Subscription();
|
@@ -14788,23 +14731,20 @@ class CheckAllDirective extends BaseCheckDirective {
|
|
14788
14731
|
lastAction;
|
14789
14732
|
treeview;
|
14790
14733
|
/**
|
14791
|
-
*
|
14734
|
+
* Sets the collection that stores all checked items.
|
14792
14735
|
*/
|
14793
14736
|
checkedItems;
|
14794
14737
|
/**
|
14795
|
-
*
|
14738
|
+
* Sets the item key or keys to compare data items.
|
14796
14739
|
*/
|
14797
14740
|
valueField;
|
14798
14741
|
focused;
|
14799
14742
|
/**
|
14800
|
-
* Fires when the `checkedItems` collection
|
14743
|
+
* Fires when the `checkedItems` collection updates.
|
14801
14744
|
*/
|
14802
14745
|
checkedItemsChange = new EventEmitter();
|
14803
14746
|
/**
|
14804
|
-
* Holds a Set with
|
14805
|
-
*
|
14806
|
-
* Should be updated each time the `checkedItems` value or content is changed.
|
14807
|
-
* Can be used for efficient look-up of whether an item is checked or not (O(1) access time).
|
14747
|
+
* Holds a `Set` with only the checked item keys. Updates this set each time the `checkedItems` value or content changes and uses it for fast look-up to check if an item is checked.
|
14808
14748
|
*/
|
14809
14749
|
checkedKeys = new Set();
|
14810
14750
|
currentCheckedState;
|
@@ -14950,7 +14890,34 @@ const DEFAULT_SIZE = 'medium';
|
|
14950
14890
|
const DEFAULT_ROUNDED = 'medium';
|
14951
14891
|
const DEFAULT_FILL_MODE = 'solid';
|
14952
14892
|
/**
|
14953
|
-
* Represents the
|
14893
|
+
* Represents the Kendo UI for Angular [MultiSelectTree]({% slug overview_multiselecttree %}) component.
|
14894
|
+
*
|
14895
|
+
* The `MultiSelectTree` lets you select multiple items from hierarchical data in a tree structure.
|
14896
|
+
* It provides built-in filtering, checkboxes, and adaptive rendering for mobile devices.
|
14897
|
+
*
|
14898
|
+
* @example
|
14899
|
+
* ```typescript
|
14900
|
+
* @Component({
|
14901
|
+
* selector: 'my-app',
|
14902
|
+
* template: `
|
14903
|
+
* <kendo-multiselecttree
|
14904
|
+
* [data]="data"
|
14905
|
+
* textField="text"
|
14906
|
+
* valueField="value"
|
14907
|
+
* [(value)]="selectedValues">
|
14908
|
+
* </kendo-multiselecttree>
|
14909
|
+
* `
|
14910
|
+
* })
|
14911
|
+
* export class AppComponent {
|
14912
|
+
* public data = [
|
14913
|
+
* { text: 'Root', value: 1, items: [
|
14914
|
+
* { text: 'Child 1', value: 2 },
|
14915
|
+
* { text: 'Child 2', value: 3 }
|
14916
|
+
* ]}
|
14917
|
+
* ];
|
14918
|
+
* public selectedValues = [2, 3];
|
14919
|
+
* }
|
14920
|
+
* ```
|
14954
14921
|
*/
|
14955
14922
|
class MultiSelectTreeComponent {
|
14956
14923
|
injector;
|
@@ -15031,18 +14998,23 @@ class MultiSelectTreeComponent {
|
|
15031
14998
|
}
|
15032
14999
|
}
|
15033
15000
|
/**
|
15034
|
-
*
|
15001
|
+
* Controls the adaptive mode behavior of the component.
|
15002
|
+
* Set to `auto` to enable automatic adaptive rendering on small screens.
|
15003
|
+
*
|
15004
|
+
* @default 'none'
|
15035
15005
|
*/
|
15036
15006
|
adaptiveMode = 'none';
|
15037
15007
|
/**
|
15038
|
-
* Sets the title
|
15039
|
-
*
|
15008
|
+
* Sets the title text for the ActionSheet in adaptive mode on small screens.
|
15009
|
+
* Uses the component label by default if not set.
|
15010
|
+
*
|
15011
|
+
* @default ''
|
15040
15012
|
*/
|
15041
15013
|
adaptiveTitle = '';
|
15042
15014
|
/**
|
15043
|
-
* Sets the subtitle
|
15044
|
-
*
|
15045
|
-
|
15015
|
+
* Sets the subtitle text for the ActionSheet in adaptive mode on small screens.
|
15016
|
+
* No subtitle appears by default.
|
15017
|
+
*/
|
15046
15018
|
adaptiveSubtitle;
|
15047
15019
|
/**
|
15048
15020
|
* @hidden
|
@@ -15149,7 +15121,10 @@ class MultiSelectTreeComponent {
|
|
15149
15121
|
filterInput;
|
15150
15122
|
checkAllInput;
|
15151
15123
|
/**
|
15152
|
-
*
|
15124
|
+
* Sets the tab index for keyboard navigation.
|
15125
|
+
* Use `-1` to remove the component from the tab sequence.
|
15126
|
+
*
|
15127
|
+
* @default 0
|
15153
15128
|
*/
|
15154
15129
|
set tabindex(value) {
|
15155
15130
|
const providedTabIndex = parseNumber(value);
|
@@ -15160,14 +15135,9 @@ class MultiSelectTreeComponent {
|
|
15160
15135
|
return this.disabled ? -1 : this._tabindex;
|
15161
15136
|
}
|
15162
15137
|
/**
|
15163
|
-
* Sets the size of the component.
|
15164
|
-
*
|
15165
|
-
* The possible values are:
|
15166
|
-
* * `small`
|
15167
|
-
* * `medium` (default)
|
15168
|
-
* * `large`
|
15169
|
-
* * `none`
|
15138
|
+
* Sets the visual size of the component.
|
15170
15139
|
*
|
15140
|
+
* @default 'medium'
|
15171
15141
|
*/
|
15172
15142
|
set size(size) {
|
15173
15143
|
const newSize = size ? size : DEFAULT_SIZE;
|
@@ -15181,15 +15151,9 @@ class MultiSelectTreeComponent {
|
|
15181
15151
|
return this._size;
|
15182
15152
|
}
|
15183
15153
|
/**
|
15184
|
-
* Sets the border radius of the component.
|
15185
|
-
*
|
15186
|
-
* The possible values are:
|
15187
|
-
* * `small`
|
15188
|
-
* * `medium` (default)
|
15189
|
-
* * `large`
|
15190
|
-
* * `full`
|
15191
|
-
* * `none`
|
15154
|
+
* Sets the border radius style of the component.
|
15192
15155
|
*
|
15156
|
+
* @default 'medium'
|
15193
15157
|
*/
|
15194
15158
|
set rounded(rounded) {
|
15195
15159
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
|
@@ -15203,14 +15167,9 @@ class MultiSelectTreeComponent {
|
|
15203
15167
|
return this._rounded;
|
15204
15168
|
}
|
15205
15169
|
/**
|
15206
|
-
* Sets the
|
15207
|
-
*
|
15208
|
-
* The possible values are:
|
15209
|
-
* * `flat`
|
15210
|
-
* * `solid` (default)
|
15211
|
-
* * `outline`
|
15212
|
-
* * `none`
|
15170
|
+
* Sets the fill style for the component background and borders.
|
15213
15171
|
*
|
15172
|
+
* @default 'solid'
|
15214
15173
|
*/
|
15215
15174
|
set fillMode(fillMode) {
|
15216
15175
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
@@ -15224,14 +15183,7 @@ class MultiSelectTreeComponent {
|
|
15224
15183
|
return this._fillMode;
|
15225
15184
|
}
|
15226
15185
|
/**
|
15227
|
-
* Configures the popup
|
15228
|
-
*
|
15229
|
-
* The available options are:
|
15230
|
-
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
|
15231
|
-
* - `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.
|
15232
|
-
* - `height: Number`—Sets the height of the popup container.
|
15233
|
-
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
|
15234
|
-
* - `appendTo: "root" | "component" | ViewContainerRef`—Specifies the component to which the popup will be appended.
|
15186
|
+
* Configures the popup container settings: animation, dimensions, styling and positioning.
|
15235
15187
|
*/
|
15236
15188
|
set popupSettings(settings) {
|
15237
15189
|
this._popupSettings = Object.assign({}, DEFAULT_POPUP_SETTINGS, settings);
|
@@ -15243,8 +15195,10 @@ class MultiSelectTreeComponent {
|
|
15243
15195
|
return this._popupSettings;
|
15244
15196
|
}
|
15245
15197
|
/**
|
15246
|
-
*
|
15247
|
-
*
|
15198
|
+
* Configures the checkbox behavior for the MultiSelecTree nodes.
|
15199
|
+
* Use `checkableSettings` to control parent-child selection relationships and click interactions.
|
15200
|
+
*
|
15201
|
+
* @default '{ checkChildren: true, checkOnClick: true }'
|
15248
15202
|
*/
|
15249
15203
|
set checkableSettings(settings) {
|
15250
15204
|
this._checkableSettings = Object.assign({}, DEFAULT_CHECKABLE_SETTINGS, settings);
|
@@ -15253,9 +15207,8 @@ class MultiSelectTreeComponent {
|
|
15253
15207
|
return this._checkableSettings;
|
15254
15208
|
}
|
15255
15209
|
/**
|
15256
|
-
* Sets the data
|
15257
|
-
*
|
15258
|
-
* > The data has to be provided in an array-like list with objects.
|
15210
|
+
* Sets the hierarchical data source for the tree structure.
|
15211
|
+
* Provide an array of objects that contain the tree data and structure.
|
15259
15212
|
*/
|
15260
15213
|
set data(data) {
|
15261
15214
|
this._nodes = data;
|
@@ -15269,10 +15222,8 @@ class MultiSelectTreeComponent {
|
|
15269
15222
|
return this._nodes;
|
15270
15223
|
}
|
15271
15224
|
/**
|
15272
|
-
* Sets the
|
15273
|
-
*
|
15274
|
-
* To define the type, use the `valuePrimitive` option.
|
15275
|
-
*
|
15225
|
+
* Sets the selected values in the component.
|
15226
|
+
* Accepts primitive values if `valuePrimitive` is `true`, or objects if `false`.
|
15276
15227
|
*/
|
15277
15228
|
set value(value) {
|
15278
15229
|
this._value = value ? value : [];
|
@@ -15282,8 +15233,8 @@ class MultiSelectTreeComponent {
|
|
15282
15233
|
return this._value;
|
15283
15234
|
}
|
15284
15235
|
/**
|
15285
|
-
*
|
15286
|
-
*
|
15236
|
+
* Sets the data items that correspond to the selected values.
|
15237
|
+
* Required when using primitive values to resolve the full data objects.
|
15287
15238
|
*/
|
15288
15239
|
set dataItems(items) {
|
15289
15240
|
this._dataItems = (items || []).map((dataItem, index) => {
|
@@ -15314,43 +15265,41 @@ class MultiSelectTreeComponent {
|
|
15314
15265
|
});
|
15315
15266
|
}
|
15316
15267
|
/**
|
15317
|
-
*
|
15318
|
-
* MultiSelectTree ([see example]({% slug databinding_multiselecttree %})). If the `textField`
|
15319
|
-
* input is set to an array, each hierarchical level uses the field that corresponds
|
15320
|
-
* to the same index in the array, or the last item in the array.
|
15321
|
-
*
|
15268
|
+
* Specifies which data field provides the display text for tree nodes.
|
15322
15269
|
* > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
|
15323
15270
|
*/
|
15324
15271
|
textField;
|
15325
15272
|
/**
|
15326
|
-
*
|
15327
|
-
* MultiSelectTree ([see example]({% slug databinding_multiselecttree %})). If the `valueField`
|
15328
|
-
* input is set to an array, each hierarchical level uses the field that corresponds
|
15329
|
-
* to the same index in the array, or the last item in the array.
|
15330
|
-
*
|
15273
|
+
* Specifies which data field provides the unique values for tree nodes.
|
15331
15274
|
* > The `valueField` property can be set to point to a nested property value - e.g. `category.id`.
|
15332
15275
|
*/
|
15333
15276
|
valueField;
|
15334
15277
|
/**
|
15335
15278
|
* Sets the levels in the data set where the values can be found when `valueField` is an Array.
|
15336
15279
|
* The field serves to correctly allocate a data item used when the MultiSelectTree is initialized with a value.
|
15280
|
+
*
|
15281
|
+
* @default []
|
15337
15282
|
*/
|
15338
15283
|
valueDepth = [];
|
15339
15284
|
/**
|
15340
|
-
*
|
15285
|
+
* Controls the loading state visual indicator.
|
15286
|
+
* Shows a loading spinner when set to `true`.
|
15287
|
+
*
|
15288
|
+
* @default false
|
15341
15289
|
*/
|
15342
15290
|
loading;
|
15343
15291
|
/**
|
15344
|
-
*
|
15292
|
+
* Sets the placeholder text shown when no items are selected.
|
15293
|
+
* Helps guide users on what action to take.
|
15294
|
+
*
|
15295
|
+
* @default ''
|
15345
15296
|
*/
|
15346
15297
|
placeholder = '';
|
15347
15298
|
/**
|
15348
|
-
* Sets the height of the options list in the popup.
|
15349
|
-
*
|
15350
|
-
* > The `listHeight` property affects only the list of options and not the whole popup container.
|
15351
|
-
* > To set the height of the popup container, use `popupSettings.height`.
|
15299
|
+
* Sets the maximum height of the options list in the popup.
|
15300
|
+
* Controls vertical scrolling when content exceeds this height.
|
15352
15301
|
*
|
15353
|
-
*
|
15302
|
+
* @default 200
|
15354
15303
|
*/
|
15355
15304
|
set listHeight(_listHeight) {
|
15356
15305
|
this._listHeight = _listHeight;
|
@@ -15363,127 +15312,138 @@ class MultiSelectTreeComponent {
|
|
15363
15312
|
}
|
15364
15313
|
_listHeight = 200;
|
15365
15314
|
/**
|
15366
|
-
*
|
15315
|
+
* Controls whether the component accepts user input.
|
15316
|
+
* Prevents all user interactions when set to `true`.
|
15317
|
+
*
|
15318
|
+
* @default false
|
15367
15319
|
*/
|
15368
15320
|
disabled = false;
|
15369
15321
|
/**
|
15370
|
-
* Sets the read-only
|
15322
|
+
* Sets the component to read-only mode.
|
15323
|
+
* Displays current selections but prevents changes.
|
15371
15324
|
*
|
15372
15325
|
* @default false
|
15373
15326
|
*/
|
15374
15327
|
readonly = false;
|
15375
15328
|
/**
|
15376
|
-
*
|
15377
|
-
*
|
15378
|
-
*
|
15329
|
+
* Determines the data type of selected values.
|
15330
|
+
* Set to `true` for primitive values, false for complex objects.
|
15331
|
+
*
|
15332
|
+
* @default false
|
15379
15333
|
*/
|
15380
15334
|
valuePrimitive = false;
|
15381
15335
|
/**
|
15382
|
-
*
|
15336
|
+
* Controls when child nodes load from the data source.
|
15337
|
+
* Set to `true` to load children only when parent nodes expand.
|
15338
|
+
*
|
15383
15339
|
* @default false
|
15384
15340
|
*/
|
15385
15341
|
loadOnDemand = false;
|
15386
15342
|
/**
|
15387
|
-
*
|
15388
|
-
*
|
15389
|
-
* Used by the kendo-label and kendo-floatinglabel to access and associate the focusable element with the provided label via aria-labelledby.
|
15343
|
+
* Sets the unique identifier for the focusable element.
|
15344
|
+
* Used internally for accessibility and label association.
|
15390
15345
|
*/
|
15391
15346
|
focusableId = `k-${guid$1()}`;
|
15392
15347
|
/**
|
15393
|
-
*
|
15394
|
-
*
|
15348
|
+
* Shows a clear button to reset all selections.
|
15349
|
+
* Appears on hover when selections exist and the component is not disabled.
|
15350
|
+
*
|
15395
15351
|
* @default true
|
15396
15352
|
*/
|
15397
15353
|
clearButton = true;
|
15398
15354
|
/**
|
15399
|
-
*
|
15400
|
-
*
|
15401
|
-
*
|
15355
|
+
* Enables the built-in filter input for searching tree nodes.
|
15356
|
+
* Shows a search box above the tree when enabled.
|
15357
|
+
*
|
15402
15358
|
* @default false
|
15403
15359
|
*/
|
15404
15360
|
filterable = false;
|
15405
15361
|
/**
|
15406
|
-
*
|
15407
|
-
*
|
15362
|
+
* Shows a checkbox to select or deselect all visible tree nodes.
|
15363
|
+
* Appears above the tree when checkboxes are enabled.
|
15364
|
+
*
|
15408
15365
|
* @default false
|
15409
15366
|
*/
|
15410
15367
|
checkAll = false;
|
15411
15368
|
/**
|
15412
|
-
*
|
15369
|
+
* Determines if a tree node contains child nodes.
|
15370
|
+
* Return `true` if the node has children, false otherwise.
|
15413
15371
|
*/
|
15414
15372
|
hasChildren = hasChildren;
|
15415
15373
|
/**
|
15416
|
-
*
|
15374
|
+
* Function that provides child nodes for a parent node.
|
15375
|
+
* Return an Observable of child objects for the given parent.
|
15417
15376
|
*/
|
15418
15377
|
fetchChildren = fetchChildren;
|
15419
15378
|
/**
|
15420
|
-
*
|
15379
|
+
* Determines if a specific node is expanded. The function is executed for each data item.
|
15421
15380
|
*/
|
15422
15381
|
isNodeExpanded;
|
15423
15382
|
/**
|
15424
|
-
*
|
15425
|
-
* Useful for custom filtering implementations.
|
15383
|
+
* Determines if a tree node should be hidden.
|
15426
15384
|
*/
|
15427
15385
|
isNodeVisible = isNodeVisible;
|
15428
15386
|
/**
|
15429
|
-
*
|
15387
|
+
* Determines if a tree node is disabled. The function is executed for each data item.
|
15430
15388
|
*/
|
15431
15389
|
itemDisabled = itemDisabled;
|
15432
15390
|
/**
|
15433
|
-
* A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
|
15434
|
-
*
|
15435
15391
|
* @param { Any[] } dataItems - The selected data items from the list.
|
15436
15392
|
* @returns { Any[] } - The tags that will be rendered by the component.
|
15393
|
+
* Transforms the provided array of data items into an array of tags.
|
15437
15394
|
*/
|
15438
15395
|
tagMapper = (tags) => tags || [];
|
15439
15396
|
/**
|
15440
|
-
* Fires
|
15397
|
+
* Fires when the component receives focus.
|
15441
15398
|
*/
|
15442
15399
|
onFocus = new EventEmitter();
|
15443
15400
|
/**
|
15444
|
-
* Fires
|
15401
|
+
* Fires when the component gets blurred.
|
15445
15402
|
*/
|
15446
15403
|
onBlur = new EventEmitter();
|
15447
15404
|
/**
|
15448
|
-
* Fires
|
15449
|
-
*
|
15450
|
-
* This event is preventable. If you cancel it, the popup will remain closed.
|
15405
|
+
* Fires when the popup is about to open. ([See example]({% slug openstate_multiselecttree %})).
|
15406
|
+
* This event is preventable. When cancelled, the popup remains closed.
|
15451
15407
|
*/
|
15452
15408
|
open = new EventEmitter();
|
15453
15409
|
/**
|
15454
|
-
* Fires after the popup
|
15410
|
+
* Fires after the popup opens completely.
|
15411
|
+
* Use this event to perform actions when the popup becomes visible.
|
15455
15412
|
*/
|
15456
15413
|
opened = new EventEmitter();
|
15457
15414
|
/**
|
15458
|
-
* Fires
|
15459
|
-
*
|
15460
|
-
* This event is preventable. If you cancel it, the popup will remain open.
|
15415
|
+
* Fires before the popup closes.
|
15416
|
+
* Cancel this event to prevent the popup from closing.
|
15461
15417
|
*/
|
15462
15418
|
close = new EventEmitter();
|
15463
15419
|
/**
|
15464
|
-
* Fires after the popup
|
15420
|
+
* Fires after the popup closes completely.
|
15421
|
+
* Use this event to perform cleanup actions when the popup becomes hidden.
|
15465
15422
|
*/
|
15466
15423
|
closed = new EventEmitter();
|
15467
15424
|
/**
|
15468
|
-
* Fires when
|
15425
|
+
* Fires when a tree node is expanded.
|
15426
|
+
* Use this event to respond to node expansion actions.
|
15469
15427
|
*/
|
15470
15428
|
nodeExpand = new EventEmitter();
|
15471
15429
|
/**
|
15472
|
-
* Fires when
|
15430
|
+
* Fires when a user collapses a tree node.
|
15431
|
+
* Use this event to respond to node collapse actions.
|
15473
15432
|
*/
|
15474
15433
|
nodeCollapse = new EventEmitter();
|
15475
15434
|
/**
|
15476
|
-
* Fires
|
15477
|
-
*
|
15435
|
+
* Fires when the selected value changes.
|
15436
|
+
* Use this event to respond to selection changes.
|
15478
15437
|
*/
|
15479
15438
|
valueChange = new EventEmitter();
|
15480
15439
|
/**
|
15481
|
-
* Fires
|
15482
|
-
*
|
15440
|
+
* Fires before a tag is removed.
|
15441
|
+
* Cancel this event to prevent tag removal.
|
15483
15442
|
*/
|
15484
15443
|
removeTag = new EventEmitter();
|
15485
15444
|
/**
|
15486
|
-
* Fires when the
|
15445
|
+
* Fires when the filter input value changes.
|
15446
|
+
* Use this event to implement custom filtering logic.
|
15487
15447
|
*/
|
15488
15448
|
filterChange = new EventEmitter();
|
15489
15449
|
/**
|
@@ -15787,7 +15747,8 @@ class MultiSelectTreeComponent {
|
|
15787
15747
|
return !this.placeholder && (!isPresent(this.value) || this.value.length === 0);
|
15788
15748
|
}
|
15789
15749
|
/**
|
15790
|
-
*
|
15750
|
+
* Sets focus to the component.
|
15751
|
+
* Call this method to programmatically focus the MultiSelectTree.
|
15791
15752
|
*/
|
15792
15753
|
focus() {
|
15793
15754
|
if (!this.disabled) {
|
@@ -15795,7 +15756,8 @@ class MultiSelectTreeComponent {
|
|
15795
15756
|
}
|
15796
15757
|
}
|
15797
15758
|
/**
|
15798
|
-
*
|
15759
|
+
* Removes focus from the component.
|
15760
|
+
* Call this method to programmatically blur the MultiSelectTree.
|
15799
15761
|
*/
|
15800
15762
|
blur() {
|
15801
15763
|
if (!this.disabled) {
|
@@ -15803,9 +15765,9 @@ class MultiSelectTreeComponent {
|
|
15803
15765
|
}
|
15804
15766
|
}
|
15805
15767
|
/**
|
15806
|
-
*
|
15807
|
-
*
|
15808
|
-
*
|
15768
|
+
* Sets focus to a specific tree item by index.
|
15769
|
+
* Provide the item index in format like '1_1' to focus that item.
|
15770
|
+
* The item must be expanded and enabled to receive focus.
|
15809
15771
|
*/
|
15810
15772
|
focusItemAt(index) {
|
15811
15773
|
if (this.treeview) {
|
@@ -15817,9 +15779,8 @@ class MultiSelectTreeComponent {
|
|
15817
15779
|
}
|
15818
15780
|
}
|
15819
15781
|
/**
|
15820
|
-
*
|
15821
|
-
*
|
15822
|
-
* the model will not update automatically and the `valueChange` event will not be fired.
|
15782
|
+
* Clears all selected values from the component.
|
15783
|
+
* This method does not trigger the valueChange event.
|
15823
15784
|
*/
|
15824
15785
|
reset() {
|
15825
15786
|
this.value = [];
|
@@ -15827,11 +15788,9 @@ class MultiSelectTreeComponent {
|
|
15827
15788
|
this.valueDepth = [];
|
15828
15789
|
}
|
15829
15790
|
/**
|
15830
|
-
*
|
15831
|
-
*
|
15832
|
-
*
|
15833
|
-
*
|
15834
|
-
* @param open - The state of the popup.
|
15791
|
+
* Opens or closes the popup programmatically.
|
15792
|
+
* Pass `true` to open, false to close, or omit the parameter to toggle.
|
15793
|
+
* This method does not trigger open or close events.
|
15835
15794
|
*/
|
15836
15795
|
toggle(open) {
|
15837
15796
|
// The Promise is required to open the popup on load.
|
@@ -17195,12 +17154,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17195
17154
|
}] } });
|
17196
17155
|
|
17197
17156
|
/**
|
17198
|
-
*
|
17157
|
+
* Retrieves child nodes when the provided data is flat.
|
17199
17158
|
*/
|
17200
17159
|
class DropDownTreeFlatBindingDirective extends FlatDataBindingDirective {
|
17201
17160
|
dropDownTree;
|
17202
17161
|
/**
|
17203
|
-
*
|
17162
|
+
* Sets the nodes to display in the DropDownTree.
|
17204
17163
|
*/
|
17205
17164
|
set nodes(nodes) {
|
17206
17165
|
// Needs to be a setter so that it matches the accessor in FlatDataBindingDirective it extends
|
@@ -17210,7 +17169,7 @@ class DropDownTreeFlatBindingDirective extends FlatDataBindingDirective {
|
|
17210
17169
|
return this._nodes;
|
17211
17170
|
}
|
17212
17171
|
/**
|
17213
|
-
*
|
17172
|
+
* Sets the unique field that identifies a node.
|
17214
17173
|
*/
|
17215
17174
|
idField;
|
17216
17175
|
/**
|
@@ -17248,12 +17207,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17248
17207
|
}] } });
|
17249
17208
|
|
17250
17209
|
/**
|
17251
|
-
*
|
17210
|
+
* Retrieves child nodes when the provided data is hierarchical.
|
17252
17211
|
*/
|
17253
17212
|
class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirective {
|
17254
17213
|
dropDownTree;
|
17255
17214
|
/**
|
17256
|
-
*
|
17215
|
+
* Sets the nodes to display in the DropDownTree.
|
17257
17216
|
*/
|
17258
17217
|
set nodes(nodes) {
|
17259
17218
|
// Needs to be a setter so that it matches the accessor in FlatDataBindingDirective it extends
|
@@ -17294,12 +17253,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17294
17253
|
}] } });
|
17295
17254
|
|
17296
17255
|
/**
|
17297
|
-
*
|
17256
|
+
* Retrieves child nodes when the provided data is flat for the MultiSelectTree.
|
17298
17257
|
*/
|
17299
17258
|
class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirective {
|
17300
17259
|
multiSelectTree;
|
17301
17260
|
/**
|
17302
|
-
*
|
17261
|
+
* Sets the nodes to display in the MultiSelectTree.
|
17303
17262
|
*/
|
17304
17263
|
set nodes(nodes) {
|
17305
17264
|
// Needs to be a setter so that it matches the accessor in FlatDataBindingDirective it extends
|
@@ -17309,7 +17268,7 @@ class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirective {
|
|
17309
17268
|
return this._nodes;
|
17310
17269
|
}
|
17311
17270
|
/**
|
17312
|
-
*
|
17271
|
+
* Sets the unique field that identifies a node.
|
17313
17272
|
*/
|
17314
17273
|
idField;
|
17315
17274
|
/**
|
@@ -17347,12 +17306,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17347
17306
|
}] } });
|
17348
17307
|
|
17349
17308
|
/**
|
17350
|
-
*
|
17309
|
+
* Retrieves child nodes when the provided data is hierarchical for the MultiSelectTree.
|
17351
17310
|
*/
|
17352
17311
|
class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDirective {
|
17353
17312
|
multiSelectTree;
|
17354
17313
|
/**
|
17355
|
-
*
|
17314
|
+
* Sets the nodes to display in the MultiSelectTree.
|
17356
17315
|
*/
|
17357
17316
|
set nodes(nodes) {
|
17358
17317
|
// Needs to be a setter so that it matches the accessor in FlatDataBindingDirective it extends
|
@@ -17393,7 +17352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17393
17352
|
}] } });
|
17394
17353
|
|
17395
17354
|
/**
|
17396
|
-
*
|
17355
|
+
* Manages the expanded state of the popup TreeView.
|
17397
17356
|
*/
|
17398
17357
|
class DropDownTreesExpandDirective extends ExpandDirective {
|
17399
17358
|
dropDownTree;
|
@@ -17587,9 +17546,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17587
17546
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|
17588
17547
|
|
17589
17548
|
/**
|
17590
|
-
*
|
17591
|
-
*
|
17592
|
-
*
|
17549
|
+
* Configures the MultiSelect to show one summary tag for all selected items.
|
17550
|
+
* Set a number to display the summary tag after the respective number of items are selected.
|
17551
|
+
* [See example]({% slug summarytagmode_multiselect %}).
|
17593
17552
|
*
|
17594
17553
|
* @example
|
17595
17554
|
* ```ts-no-run
|
@@ -17604,7 +17563,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17604
17563
|
class SummaryTagDirective {
|
17605
17564
|
multiSelectComponent;
|
17606
17565
|
/**
|
17607
|
-
*
|
17566
|
+
* Sets the number of selected items after which the summary tag appears.
|
17567
|
+
*
|
17568
|
+
* @default 0
|
17608
17569
|
*/
|
17609
17570
|
showAfter = 0;
|
17610
17571
|
constructor(multiSelectComponent) {
|
@@ -17645,24 +17606,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17645
17606
|
}] } });
|
17646
17607
|
|
17647
17608
|
/**
|
17648
|
-
*
|
17649
|
-
* When a number is
|
17650
|
-
*
|
17609
|
+
* Configures the MultiSelectTree to show one single summary tag for all selected data items.
|
17610
|
+
* When a number is set, the summary tag is shown after the corresponding number of data items are selected (see examples).
|
17611
|
+
* See [more information and examples]({% slug api_dropdowns_multiselecttreesummarytagdirective %}).
|
17651
17612
|
*
|
17652
17613
|
* @example
|
17653
|
-
* ```ts
|
17614
|
+
* ```ts
|
17654
17615
|
* <kendo-multiselecttree kendoMultiSelectTreeSummaryTag [data]="data"></kendo-multiselecttree>
|
17655
17616
|
* ```
|
17656
17617
|
*
|
17657
17618
|
* @example
|
17658
|
-
* ```ts
|
17619
|
+
* ```ts
|
17659
17620
|
* <kendo-multiselecttree [kendoMultiSelectTreeSummaryTag]="2" [data]="data"></kendo-multiselecttree>
|
17660
17621
|
* ```
|
17661
17622
|
*/
|
17662
17623
|
class MultiSelectTreeSummaryTagDirective {
|
17663
17624
|
multiSelectTreeComponent;
|
17664
17625
|
/**
|
17665
|
-
*
|
17626
|
+
* Sets the number of data items that need to be selected before the summary tag appears.
|
17627
|
+
*
|
17628
|
+
* @default 0
|
17666
17629
|
*/
|
17667
17630
|
showAfter = 0;
|
17668
17631
|
constructor(multiSelectTreeComponent) {
|
@@ -17841,6 +17804,7 @@ const KENDO_DROPDOWNS = [
|
|
17841
17804
|
|
17842
17805
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
17843
17806
|
/**
|
17807
|
+
* Required for adding all DropDownTree features in NgModule-based Angular applications.
|
17844
17808
|
* - `MultiSelectTreeComponent`—The MultiSelectTree component class.
|
17845
17809
|
* - `DropDownTreeComponent`—The DropDownTree component class.
|
17846
17810
|
* - `MultiSelectTreeFlatBindingDirective`—The MultiSelectTree flat binding directive.
|
@@ -17892,34 +17856,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17892
17856
|
|
17893
17857
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
17894
17858
|
/**
|
17895
|
-
*
|
17896
|
-
* definition for the Dropdowns components.
|
17859
|
+
* Required for adding all DropDowns features in NgModule-based Angular applications.
|
17897
17860
|
*
|
17898
17861
|
* @example
|
17899
|
-
*
|
17900
|
-
*
|
17901
|
-
* // Import the Dropdowns module
|
17862
|
+
* ```typescript
|
17863
|
+
* // Import the DropDownsModule
|
17902
17864
|
* import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
|
17903
|
-
*
|
17904
|
-
* // The browser platform with a compiler
|
17905
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
17906
|
-
*
|
17907
17865
|
* import { NgModule } from '@angular/core';
|
17908
|
-
*
|
17909
|
-
* // Import the app component
|
17866
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
17910
17867
|
* import { AppComponent } from './app.component';
|
17911
17868
|
*
|
17912
|
-
*
|
17913
|
-
*
|
17914
|
-
*
|
17915
|
-
*
|
17916
|
-
* bootstrap: [AppComponent]
|
17869
|
+
* @NgModule({
|
17870
|
+
* declarations: [AppComponent],
|
17871
|
+
* imports: [BrowserModule, DropDownsModule],
|
17872
|
+
* bootstrap: [AppComponent]
|
17917
17873
|
* })
|
17918
17874
|
* export class AppModule {}
|
17919
|
-
*
|
17920
|
-
* // Compile and launch the module
|
17921
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
17922
|
-
*
|
17923
17875
|
* ```
|
17924
17876
|
*/
|
17925
17877
|
class DropDownsModule {
|
@@ -17938,12 +17890,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17938
17890
|
|
17939
17891
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
17940
17892
|
/**
|
17893
|
+
* Required for adding all MultiSelect features in NgModule-based Angular applications.
|
17941
17894
|
*
|
17942
|
-
*
|
17943
|
-
*
|
17944
|
-
* The
|
17945
|
-
* - `MultiSelectComponent`—The MultiSelect component class.
|
17946
|
-
* - `SummaryTagDirective`—The MultiSelect summary tag directive.
|
17895
|
+
* This module exports all MultiSelect-related components and directives:
|
17896
|
+
* - `MultiSelectComponent`—The main MultiSelect component class.
|
17897
|
+
* - `SummaryTagDirective`—The summary tag directive for MultiSelect.
|
17947
17898
|
* - `ItemTemplateDirective`—The item template directive.
|
17948
17899
|
* - `CustomItemTemplateDirective`—The custom item template directive.
|
17949
17900
|
* - `TagTemplateDirective`—The tag template directive.
|
@@ -17958,6 +17909,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17958
17909
|
* - `FixedGroupTemplateDirective`—The fixed group template directive.
|
17959
17910
|
* - `SuffixTemplateDirective`—The suffix template directive.
|
17960
17911
|
* - `PrefixTemplateDirective`—The prefix template directive.
|
17912
|
+
*
|
17913
|
+
* ```ts
|
17914
|
+
* import { MultiSelectModule } from '@progress/kendo-angular-dropdowns';
|
17915
|
+
* @NgModule({
|
17916
|
+
* imports: [ MultiSelectModule ],
|
17917
|
+
* declarations: [ AppComponent ],
|
17918
|
+
* bootstrap: [ AppComponent ],
|
17919
|
+
* })
|
17920
|
+
* ```
|
17961
17921
|
*/
|
17962
17922
|
class MultiSelectModule {
|
17963
17923
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
@@ -17985,8 +17945,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
17985
17945
|
|
17986
17946
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
17987
17947
|
/**
|
17948
|
+
* Required for adding all AutoComplete features in NgModule-based Angular applications.
|
17988
17949
|
*
|
17989
|
-
*
|
17950
|
+
* ```typescript
|
17951
|
+
* import { AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
|
17952
|
+
* @NgModule({
|
17953
|
+
* imports: [AutoCompleteModule],
|
17954
|
+
* declarations: [AppComponent],
|
17955
|
+
* bootstrap: [AppComponent]
|
17956
|
+
* })
|
17957
|
+
* ```
|
17990
17958
|
*
|
17991
17959
|
* The package exports:
|
17992
17960
|
* - `AutoCompleteComponent`—The AutoComplete component class.
|
@@ -18027,8 +17995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
18027
17995
|
|
18028
17996
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
18029
17997
|
/**
|
18030
|
-
*
|
18031
|
-
* The exported package module.
|
17998
|
+
* Required for adding all ComboBox features in NgModule-based Angular applications.
|
18032
17999
|
*
|
18033
18000
|
* The package exports:
|
18034
18001
|
* - `ComboBoxComponent`—The ComboBox component class.
|
@@ -18044,6 +18011,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
18044
18011
|
* - `CustomMessagesComponent`—The custom messages component.
|
18045
18012
|
* - `SuffixTemplateDirective`—The suffix template directive.
|
18046
18013
|
* - `PrefixTemplateDirective`—The prefix template directive.
|
18014
|
+
*
|
18015
|
+
* @example
|
18016
|
+
* ```typescript
|
18017
|
+
* import { ComboBoxModule } from '@progress/kendo-angular-dropdowns';
|
18018
|
+
*
|
18019
|
+
* @NgModule({
|
18020
|
+
* imports: [ComboBoxModule]
|
18021
|
+
* })
|
18022
|
+
* class AppModule {}
|
18023
|
+
* ```
|
18047
18024
|
*/
|
18048
18025
|
class ComboBoxModule {
|
18049
18026
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
@@ -18071,20 +18048,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
18071
18048
|
|
18072
18049
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
18073
18050
|
/**
|
18051
|
+
* Required for adding all DropDownList features in NgModule-based Angular applications.
|
18074
18052
|
*
|
18075
|
-
*
|
18053
|
+
* ```typescript
|
18054
|
+
* import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
|
18055
|
+
* @NgModule({
|
18056
|
+
* imports: [DropDownListModule],
|
18057
|
+
* declarations: [AppComponent],
|
18058
|
+
* bootstrap: [AppComponent]
|
18059
|
+
* })
|
18060
|
+
* ```
|
18076
18061
|
*
|
18077
18062
|
* The package exports:
|
18078
|
-
* - `DropDownListComponent`—The
|
18079
|
-
* - `ItemTemplateDirective`—The
|
18080
|
-
* - `ValueTemplateDirective`—The
|
18081
|
-
* - `HeaderTemplateDirective`—The
|
18082
|
-
* - `FooterTemplateDirective`—The
|
18083
|
-
* - `NoDataTemplateDirective`—The
|
18084
|
-
* - `GroupTemplateDirective`—The
|
18085
|
-
* - `FixedGroupTemplateDirective`—The
|
18086
|
-
* - `FilterDirective`—The
|
18087
|
-
* - `CustomMessagesComponent`—The
|
18063
|
+
* - `DropDownListComponent`—The `DropDownListComponent` class.
|
18064
|
+
* - `ItemTemplateDirective`—The `ItemTemplateDirective` directive.
|
18065
|
+
* - `ValueTemplateDirective`—The `ValueTemplateDirective` directive.
|
18066
|
+
* - `HeaderTemplateDirective`—The `HeaderTemplateDirective` directive.
|
18067
|
+
* - `FooterTemplateDirective`—The `FooterTemplateDirective` directive.
|
18068
|
+
* - `NoDataTemplateDirective`—The `NoDataTemplateDirective` directive.
|
18069
|
+
* - `GroupTemplateDirective`—The `GroupTemplateDirective` directive.
|
18070
|
+
* - `FixedGroupTemplateDirective`—The `FixedGroupTemplateDirective` directive.
|
18071
|
+
* - `FilterDirective`—The `FilterDirective` directive.
|
18072
|
+
* - `CustomMessagesComponent`—The `CustomMessagesComponent` component.
|
18073
|
+
*
|
18074
|
+
* @example
|
18075
|
+
* ```typescript
|
18076
|
+
* import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
|
18077
|
+
*
|
18078
|
+
* @NgModule({
|
18079
|
+
* imports: [DropDownListModule],
|
18080
|
+
* })
|
18081
|
+
* export class AppModule {}
|
18082
|
+
* ```
|
18088
18083
|
*/
|
18089
18084
|
class DropDownListModule {
|
18090
18085
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|