@progress/kendo-angular-dropdowns 22.1.0-develop.9 → 23.0.0-develop.2
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 +11 -11
- package/comboboxes/combobox-column/column-cell-template.directive.d.ts +4 -4
- package/comboboxes/combobox-column/column-header-template.directive.d.ts +4 -4
- package/comboboxes/combobox-column/combobox-column.component.d.ts +3 -3
- package/comboboxes/combobox.component.d.ts +17 -16
- package/comboboxes/multicolumncombobox.component.d.ts +1 -1
- package/common/filtering/filter-settings.d.ts +5 -5
- package/common/filtering/filter.directive.d.ts +2 -2
- package/common/localization/custom-messages.component.d.ts +1 -1
- package/common/models/fillmode.d.ts +1 -1
- package/common/models/size.d.ts +1 -1
- package/common/models/virtualization-settings.d.ts +4 -4
- package/common/templates/custom-item-template.directive.d.ts +1 -1
- package/common/templates/fixed-group-template.directive.d.ts +5 -5
- package/common/templates/footer-template.directive.d.ts +6 -6
- package/common/templates/group-tag-template.directive.d.ts +1 -1
- package/common/templates/group-template.directive.d.ts +5 -5
- package/common/templates/header-template.directive.d.ts +6 -6
- package/common/templates/item-template.directive.d.ts +4 -4
- package/common/templates/no-data-template.directive.d.ts +6 -6
- package/common/templates/tag-template.directive.d.ts +1 -1
- package/common/templates/value-template.directive.d.ts +2 -2
- package/dropdownlist/dropdownlist.component.d.ts +16 -18
- package/dropdowntrees/checked-state/checkable-settings.d.ts +1 -1
- package/dropdowntrees/dropdowntree.component.d.ts +17 -16
- package/dropdowntrees/multiselecttree.component.d.ts +3 -3
- package/dropdowntrees/summary-tag/summary-tag.directive.d.ts +1 -1
- package/fesm2022/progress-kendo-angular-dropdowns.mjs +333 -352
- package/multiselect/multiselect.component.d.ts +9 -9
- package/multiselect/summary-tag.directive.d.ts +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +10 -10
- package/schematics/ngAdd/index.js +2 -2
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
6
|
import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
7
7
|
import * as i10 from '@progress/kendo-angular-common';
|
|
8
|
-
import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, normalizeKeys, Keys, setHTMLAttributes, replaceMessagePlaceholder, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, parseCSSClassNames, isControlRequired, guid, hasObservers, SeparatorComponent, SuffixTemplateDirective, PrefixTemplateDirective, KendoInput, MultiTabStop, anyChanged, EventsOutsideAngularDirective, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
|
|
8
|
+
import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, normalizeKeys, Keys, setHTMLAttributes, replaceMessagePlaceholder, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, hasFocusableParent, parseCSSClassNames, isControlRequired, guid, hasObservers, SeparatorComponent, SuffixTemplateDirective, PrefixTemplateDirective, KendoInput, MultiTabStop, anyChanged, EventsOutsideAngularDirective, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
|
|
9
9
|
export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
|
|
10
10
|
import * as i7 from '@progress/kendo-angular-utils';
|
|
11
11
|
import { AdaptiveService } from '@progress/kendo-angular-utils';
|
|
@@ -38,7 +38,7 @@ const packageMetadata = {
|
|
|
38
38
|
productCode: 'KENDOUIANGULAR',
|
|
39
39
|
productCodes: ['KENDOUIANGULAR'],
|
|
40
40
|
publishDate: 0,
|
|
41
|
-
version: '
|
|
41
|
+
version: '23.0.0-develop.2',
|
|
42
42
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
43
43
|
};
|
|
44
44
|
|
|
@@ -329,7 +329,8 @@ const getRoundedClass = (rounded) => {
|
|
|
329
329
|
'small': 'k-rounded-sm',
|
|
330
330
|
'medium': 'k-rounded-md',
|
|
331
331
|
'large': 'k-rounded-lg',
|
|
332
|
-
'full': 'k-rounded-full'
|
|
332
|
+
'full': 'k-rounded-full',
|
|
333
|
+
'none': 'k-rounded-none'
|
|
333
334
|
};
|
|
334
335
|
return ROUNDED_CLASSES[rounded];
|
|
335
336
|
};
|
|
@@ -793,10 +794,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
793
794
|
* with the `kendo<ComponentName>ItemTemplate` directive inside the component tag. The template context is
|
|
794
795
|
* set to the current component. To get a reference to the current data item, use the `let-dataItem` directive.
|
|
795
796
|
*
|
|
796
|
-
* - [Using `ItemTemplate` with the AutoComplete](
|
|
797
|
-
* - [Using `ItemTemplate` with the ComboBox](
|
|
798
|
-
* - [Using `ItemTemplate` with the DropDownList](
|
|
799
|
-
* - [Using `ItemTemplate` with the MultiSelect](
|
|
797
|
+
* - [Using `ItemTemplate` with the AutoComplete](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates#item-template)
|
|
798
|
+
* - [Using `ItemTemplate` with the ComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/templates#item-template)
|
|
799
|
+
* - [Using `ItemTemplate` with the DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates#item-template)
|
|
800
|
+
* - [Using `ItemTemplate` with the MultiSelect](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#item-template)
|
|
800
801
|
*
|
|
801
802
|
* @example
|
|
802
803
|
* ```ts
|
|
@@ -835,12 +836,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
835
836
|
* Renders the header content of the list. To define the header template, nest an `<ng-template>` tag
|
|
836
837
|
* with the `kendo<ComponentName>HeaderTemplate` directive inside the component tag.
|
|
837
838
|
*
|
|
838
|
-
* - [Using `HeaderTemplate` with the AutoComplete](
|
|
839
|
-
* - [Using `HeaderTemplate` with the ComboBox](
|
|
840
|
-
* - [Using `HeaderTemplate` with the MultiColumnComboBox](
|
|
841
|
-
* - [Using `HeaderTemplate` with the DropDownList](
|
|
842
|
-
* - [Using `HeaderTemplate` with the DropDownTree](
|
|
843
|
-
* - [Using `HeaderTemplate` with the MultiSelect](
|
|
839
|
+
* - [Using `HeaderTemplate` with the AutoComplete](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates#header-template)
|
|
840
|
+
* - [Using `HeaderTemplate` with the ComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/templates#header-template)
|
|
841
|
+
* - [Using `HeaderTemplate` with the MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/templates#header-template)
|
|
842
|
+
* - [Using `HeaderTemplate` with the DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates#header-template)
|
|
843
|
+
* - [Using `HeaderTemplate` with the DropDownTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/templates#header-template)
|
|
844
|
+
* - [Using `HeaderTemplate` with the MultiSelect](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#header-template)
|
|
844
845
|
*
|
|
845
846
|
* @example
|
|
846
847
|
* ```ts
|
|
@@ -879,12 +880,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
879
880
|
* Renders the footer content of the list. To define the footer template, nest an `<ng-template>` tag
|
|
880
881
|
* with the `kendo<ComponentName>FooterTemplate` directive inside the component tag.
|
|
881
882
|
*
|
|
882
|
-
* - [Using `FooterTemplate` with the AutoComplete](
|
|
883
|
-
* - [Using `FooterTemplate` with the ComboBox](
|
|
884
|
-
* - [Using `FooterTemplate` with the MultiColumnComboBox](
|
|
885
|
-
* - [Using `FooterTemplate` with the DropDownList](
|
|
886
|
-
* - [Using `FooterTemplate` with the DropDownTree](
|
|
887
|
-
* - [Using `FooterTemplate` with the MultiSelect](
|
|
883
|
+
* - [Using `FooterTemplate` with the AutoComplete](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates#footer-template)
|
|
884
|
+
* - [Using `FooterTemplate` with the ComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/templates#footer-template)
|
|
885
|
+
* - [Using `FooterTemplate` with the MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/templates#footer-template)
|
|
886
|
+
* - [Using `FooterTemplate` with the DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates#footer-template)
|
|
887
|
+
* - [Using `FooterTemplate` with the DropDownTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/templates#footer-template)
|
|
888
|
+
* - [Using `FooterTemplate` with the MultiSelect](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#footer-template)
|
|
888
889
|
*
|
|
889
890
|
* @example
|
|
890
891
|
* ```ts
|
|
@@ -924,11 +925,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
924
925
|
* with the `kendo<ComponentName>GroupTemplate` directive inside the component tag. The template context is
|
|
925
926
|
* set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
|
|
926
927
|
*
|
|
927
|
-
* - [Using `GroupTemplate` with the AutoComplete](
|
|
928
|
-
* - [Using `GroupTemplate` with the ComboBox](
|
|
929
|
-
* - [Using `GroupTemplate` with the MultiColumnComboBox](
|
|
930
|
-
* - [Using `GroupTemplate` with the DropDownList](
|
|
931
|
-
* - [Using `GroupTemplate` with the MultiSelect](
|
|
928
|
+
* - [Using `GroupTemplate` with the AutoComplete](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates#group-header-template)
|
|
929
|
+
* - [Using `GroupTemplate` with the ComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/templates#group-header-template)
|
|
930
|
+
* - [Using `GroupTemplate` with the MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/templates#group-header-template)
|
|
931
|
+
* - [Using `GroupTemplate` with the DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates#group-header-template)
|
|
932
|
+
* - [Using `GroupTemplate` with the MultiSelect](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#group-header-template)
|
|
932
933
|
*
|
|
933
934
|
* @example
|
|
934
935
|
* ```ts
|
|
@@ -974,11 +975,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
974
975
|
* with the `kendo<ComponentName>FixedGroupTemplate` directive inside the component tag. The template context is
|
|
975
976
|
* set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
|
|
976
977
|
*
|
|
977
|
-
* - [Using `FixedGroupTemplate` with the AutoComplete](
|
|
978
|
-
* - [Using `FixedGroupTemplate` with the ComboBox](
|
|
979
|
-
* - [Using `FixedGroupTemplate` with the MultiColumnComboBox](
|
|
980
|
-
* - [Using `FixedGroupTemplate` with the DropDownList](
|
|
981
|
-
* - [Using `FixedGroupTemplate` with the MultiSelect](
|
|
978
|
+
* - [Using `FixedGroupTemplate` with the AutoComplete](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates#fixed-group-header-template)
|
|
979
|
+
* - [Using `FixedGroupTemplate` with the ComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/templates#fixed-group-header-template)
|
|
980
|
+
* - [Using `FixedGroupTemplate` with the MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/templates#fixed-group-header-template)
|
|
981
|
+
* - [Using `FixedGroupTemplate` with the DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates#fixed-group-header-template)
|
|
982
|
+
* - [Using `FixedGroupTemplate` with the MultiSelect](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#fixed-group-header-template)
|
|
982
983
|
*
|
|
983
984
|
* @example
|
|
984
985
|
* ```ts
|
|
@@ -1669,12 +1670,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1669
1670
|
* Renders content when no data is available. To define the no-data template, nest a `<ng-template>` tag
|
|
1670
1671
|
* with the `kendo<ComponentName>NoDataTemplate` directive inside the component tag.
|
|
1671
1672
|
*
|
|
1672
|
-
* - [Using `NoDataTemplate` with the AutoComplete](
|
|
1673
|
-
* - [Using `NoDataTemplate` with the ComboBox](
|
|
1674
|
-
* - [Using `NoDataTemplate` with the MultiColumnComboBox](
|
|
1675
|
-
* - [Using `NoDataTemplate` with the DropDownList](
|
|
1676
|
-
* - [Using `NoDataTemplate` with the DropDownTree](
|
|
1677
|
-
* - [Using `NoDataTemplate` with the MultiSelect](
|
|
1673
|
+
* - [Using `NoDataTemplate` with the AutoComplete](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates#no-data-template)
|
|
1674
|
+
* - [Using `NoDataTemplate` with the ComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/templates#no-data-template)
|
|
1675
|
+
* - [Using `NoDataTemplate` with the MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/templates#no-data-template)
|
|
1676
|
+
* - [Using `NoDataTemplate` with the DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates#no-data-template)
|
|
1677
|
+
* - [Using `NoDataTemplate` with the DropDownTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/templates#no-data-template)
|
|
1678
|
+
* - [Using `NoDataTemplate` with the MultiSelect](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#no-data-template)
|
|
1678
1679
|
*
|
|
1679
1680
|
* @example
|
|
1680
1681
|
* ```ts
|
|
@@ -1860,7 +1861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1860
1861
|
|
|
1861
1862
|
/**
|
|
1862
1863
|
* Renders the content of the custom list item in the MultiSelect
|
|
1863
|
-
* ([see example](
|
|
1864
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#rendering-custom-item-content)).
|
|
1864
1865
|
* The template context is set to the current component.
|
|
1865
1866
|
* To get a reference to the current text that is typed by the
|
|
1866
1867
|
* user, use the `let-customItem` directive.
|
|
@@ -1968,7 +1969,7 @@ class ListComponent {
|
|
|
1968
1969
|
return this._size;
|
|
1969
1970
|
}
|
|
1970
1971
|
groupedData;
|
|
1971
|
-
rounded =
|
|
1972
|
+
rounded = undefined;
|
|
1972
1973
|
onClick = new EventEmitter();
|
|
1973
1974
|
pageChange = new EventEmitter();
|
|
1974
1975
|
listResize = new EventEmitter();
|
|
@@ -1993,7 +1994,7 @@ class ListComponent {
|
|
|
1993
1994
|
_data;
|
|
1994
1995
|
scrollSubscription;
|
|
1995
1996
|
selectSubscription;
|
|
1996
|
-
_size
|
|
1997
|
+
_size;
|
|
1997
1998
|
get pageSize() {
|
|
1998
1999
|
if (this.virtual.pageSize) {
|
|
1999
2000
|
return this.virtual.pageSize;
|
|
@@ -2849,7 +2850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
2849
2850
|
*/
|
|
2850
2851
|
const DEFAULTS = {
|
|
2851
2852
|
pageSize: 50,
|
|
2852
|
-
itemHeight:
|
|
2853
|
+
itemHeight: 36
|
|
2853
2854
|
};
|
|
2854
2855
|
/**
|
|
2855
2856
|
* @hidden
|
|
@@ -3152,6 +3153,19 @@ class SharedDropDownEventsDirective {
|
|
|
3152
3153
|
this.handleBlur.emit();
|
|
3153
3154
|
}
|
|
3154
3155
|
}));
|
|
3156
|
+
this.subscriptions.add(this.renderer.listen(hostElement, 'click', (args) => {
|
|
3157
|
+
if (!this.isFocused) {
|
|
3158
|
+
return;
|
|
3159
|
+
}
|
|
3160
|
+
const element = args.target;
|
|
3161
|
+
const adornmentContainer = element.closest('.k-input-prefix') || element.closest('.k-input-suffix');
|
|
3162
|
+
if (adornmentContainer) {
|
|
3163
|
+
const isFocusable = hasFocusableParent(element, adornmentContainer);
|
|
3164
|
+
if (!isFocusable) {
|
|
3165
|
+
this.handleBlur.emit();
|
|
3166
|
+
}
|
|
3167
|
+
}
|
|
3168
|
+
}));
|
|
3155
3169
|
this.subscriptions.add(this.renderer.listen(hostElement, 'mouseenter', () => {
|
|
3156
3170
|
cursorInsideWrapper = true;
|
|
3157
3171
|
}));
|
|
@@ -3305,9 +3319,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
3305
3319
|
}], ctorParameters: () => [{ type: i1.LocalizationService }] });
|
|
3306
3320
|
|
|
3307
3321
|
const NO_VALUE = "";
|
|
3308
|
-
const DEFAULT_SIZE$5 = 'medium';
|
|
3309
|
-
const DEFAULT_ROUNDED$5 = 'medium';
|
|
3310
|
-
const DEFAULT_FILL_MODE$5 = 'solid';
|
|
3311
3322
|
/**
|
|
3312
3323
|
* @hidden
|
|
3313
3324
|
*/
|
|
@@ -3317,7 +3328,7 @@ const AUTOCOMPLETE_VALUE_ACCESSOR = {
|
|
|
3317
3328
|
useExisting: forwardRef(() => AutoCompleteComponent)
|
|
3318
3329
|
};
|
|
3319
3330
|
/**
|
|
3320
|
-
* Represents the [Kendo UI AutoComplete component for Angular](
|
|
3331
|
+
* Represents the [Kendo UI AutoComplete component for Angular](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete).
|
|
3321
3332
|
*
|
|
3322
3333
|
* @example
|
|
3323
3334
|
* ```html
|
|
@@ -3490,7 +3501,7 @@ class AutoCompleteComponent {
|
|
|
3490
3501
|
highlightFirst = true;
|
|
3491
3502
|
/**
|
|
3492
3503
|
* Shows or hides the current group sticky header when using grouped data.
|
|
3493
|
-
* By default, the sticky header is displayed ([see example](
|
|
3504
|
+
* By default, the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
|
|
3494
3505
|
*
|
|
3495
3506
|
* @default true
|
|
3496
3507
|
*/
|
|
@@ -3633,14 +3644,14 @@ class AutoCompleteComponent {
|
|
|
3633
3644
|
*/
|
|
3634
3645
|
suggest;
|
|
3635
3646
|
/**
|
|
3636
|
-
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](
|
|
3647
|
+
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/forms#managing-the-autocomplete-disabled-state-in-reactive-forms).
|
|
3637
3648
|
*
|
|
3638
3649
|
* @default false
|
|
3639
3650
|
*/
|
|
3640
3651
|
disabled = false;
|
|
3641
3652
|
/**
|
|
3642
3653
|
* Defines a Boolean function that is executed for each data item in the component
|
|
3643
|
-
* ([see examples](
|
|
3654
|
+
* ([see examples](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/disabled-items)).
|
|
3644
3655
|
* Determines whether the item will be disabled.
|
|
3645
3656
|
*/
|
|
3646
3657
|
set itemDisabled(fn) {
|
|
@@ -3671,14 +3682,14 @@ class AutoCompleteComponent {
|
|
|
3671
3682
|
return this.tabindex;
|
|
3672
3683
|
}
|
|
3673
3684
|
/**
|
|
3674
|
-
* Enables the [filtering](
|
|
3685
|
+
* Enables the [filtering](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/filtering) functionality.
|
|
3675
3686
|
* If set to `true`, the component emits the `filterChange` event.
|
|
3676
3687
|
*
|
|
3677
3688
|
* @default false
|
|
3678
3689
|
*/
|
|
3679
3690
|
filterable = false;
|
|
3680
3691
|
/**
|
|
3681
|
-
* Enables the [virtualization](
|
|
3692
|
+
* Enables the [virtualization](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/virtualization) functionality.
|
|
3682
3693
|
*
|
|
3683
3694
|
* @default false
|
|
3684
3695
|
*/
|
|
@@ -3691,15 +3702,14 @@ class AutoCompleteComponent {
|
|
|
3691
3702
|
/**
|
|
3692
3703
|
* Sets the size of the component.
|
|
3693
3704
|
*
|
|
3694
|
-
* @default
|
|
3705
|
+
* @default undefined
|
|
3695
3706
|
*/
|
|
3696
3707
|
set size(size) {
|
|
3697
|
-
const newSize = size ? size : DEFAULT_SIZE$5;
|
|
3698
3708
|
this.renderer.removeClass(this.wrapper, getSizeClass('input', this.size));
|
|
3699
|
-
if (size
|
|
3700
|
-
this.renderer.addClass(this.wrapper, getSizeClass('input',
|
|
3709
|
+
if (size) {
|
|
3710
|
+
this.renderer.addClass(this.wrapper, getSizeClass('input', size));
|
|
3701
3711
|
}
|
|
3702
|
-
this._size =
|
|
3712
|
+
this._size = size;
|
|
3703
3713
|
}
|
|
3704
3714
|
get size() {
|
|
3705
3715
|
return this._size;
|
|
@@ -3707,15 +3717,14 @@ class AutoCompleteComponent {
|
|
|
3707
3717
|
/**
|
|
3708
3718
|
* Sets the border radius of the component.
|
|
3709
3719
|
*
|
|
3710
|
-
* @default
|
|
3720
|
+
* @default undefined
|
|
3711
3721
|
*/
|
|
3712
3722
|
set rounded(rounded) {
|
|
3713
|
-
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$5;
|
|
3714
3723
|
this.renderer.removeClass(this.wrapper, getRoundedClass(this.rounded));
|
|
3715
|
-
if (rounded
|
|
3716
|
-
this.renderer.addClass(this.wrapper, getRoundedClass(
|
|
3724
|
+
if (rounded) {
|
|
3725
|
+
this.renderer.addClass(this.wrapper, getRoundedClass(rounded));
|
|
3717
3726
|
}
|
|
3718
|
-
this._rounded =
|
|
3727
|
+
this._rounded = rounded;
|
|
3719
3728
|
}
|
|
3720
3729
|
get rounded() {
|
|
3721
3730
|
return this._rounded;
|
|
@@ -3723,15 +3732,14 @@ class AutoCompleteComponent {
|
|
|
3723
3732
|
/**
|
|
3724
3733
|
* Sets the fillMode of the component.
|
|
3725
3734
|
*
|
|
3726
|
-
* @default
|
|
3735
|
+
* @default undefined
|
|
3727
3736
|
*/
|
|
3728
3737
|
set fillMode(fillMode) {
|
|
3729
|
-
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$5;
|
|
3730
3738
|
this.renderer.removeClass(this.wrapper, getFillModeClass('input', this.fillMode));
|
|
3731
|
-
if (fillMode
|
|
3732
|
-
this.renderer.addClass(this.wrapper, getFillModeClass('input',
|
|
3739
|
+
if (fillMode) {
|
|
3740
|
+
this.renderer.addClass(this.wrapper, getFillModeClass('input', fillMode));
|
|
3733
3741
|
}
|
|
3734
|
-
this._fillMode =
|
|
3742
|
+
this._fillMode = fillMode;
|
|
3735
3743
|
}
|
|
3736
3744
|
get fillMode() {
|
|
3737
3745
|
return this._fillMode;
|
|
@@ -3743,7 +3751,7 @@ class AutoCompleteComponent {
|
|
|
3743
3751
|
/**
|
|
3744
3752
|
* Fires each time the value changes—
|
|
3745
3753
|
* when the component is blurred or the value is cleared through the **Clear** button
|
|
3746
|
-
* ([see example](
|
|
3754
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/events).
|
|
3747
3755
|
* When the value of the component is programmatically changed to `ngModel` or `formControl`
|
|
3748
3756
|
* through its API or form binding, the `valueChange` event is not triggered because it
|
|
3749
3757
|
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
@@ -3752,7 +3760,7 @@ class AutoCompleteComponent {
|
|
|
3752
3760
|
/**
|
|
3753
3761
|
* Fires each time the user types in the input field.
|
|
3754
3762
|
* You can filter the source based on the passed filtration value
|
|
3755
|
-
* ([see example](
|
|
3763
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/events)).
|
|
3756
3764
|
*/
|
|
3757
3765
|
filterChange = new EventEmitter();
|
|
3758
3766
|
/**
|
|
@@ -4222,9 +4230,9 @@ class AutoCompleteComponent {
|
|
|
4222
4230
|
wrapper;
|
|
4223
4231
|
_isFocused = false;
|
|
4224
4232
|
direction;
|
|
4225
|
-
_size =
|
|
4226
|
-
_rounded =
|
|
4227
|
-
_fillMode =
|
|
4233
|
+
_size = undefined;
|
|
4234
|
+
_rounded = undefined;
|
|
4235
|
+
_fillMode = undefined;
|
|
4228
4236
|
subscribeEvents() {
|
|
4229
4237
|
if (!isDocumentAvailable()) {
|
|
4230
4238
|
return;
|
|
@@ -4400,13 +4408,13 @@ class AutoCompleteComponent {
|
|
|
4400
4408
|
}
|
|
4401
4409
|
}
|
|
4402
4410
|
setComponentClasses() {
|
|
4403
|
-
if (this.size
|
|
4411
|
+
if (this.size) {
|
|
4404
4412
|
this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
|
|
4405
4413
|
}
|
|
4406
|
-
if (this.rounded
|
|
4414
|
+
if (this.rounded) {
|
|
4407
4415
|
this.renderer.addClass(this.wrapper, getRoundedClass(this.rounded));
|
|
4408
4416
|
}
|
|
4409
|
-
if (this.fillMode
|
|
4417
|
+
if (this.fillMode) {
|
|
4410
4418
|
this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
|
|
4411
4419
|
}
|
|
4412
4420
|
}
|
|
@@ -4468,18 +4476,18 @@ class AutoCompleteComponent {
|
|
|
4468
4476
|
<ng-container kendoAutoCompleteLocalizedMessages
|
|
4469
4477
|
i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
|
|
4470
4478
|
noDataText="NO DATA FOUND"
|
|
4471
|
-
|
|
4479
|
+
|
|
4472
4480
|
i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
|
|
4473
4481
|
clearTitle="clear"
|
|
4474
|
-
|
|
4482
|
+
|
|
4475
4483
|
i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
4476
4484
|
popupLabel="Options list"
|
|
4477
|
-
|
|
4485
|
+
|
|
4478
4486
|
i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
4479
4487
|
adaptiveCloseButtonTitle="Close"
|
|
4480
4488
|
>
|
|
4481
4489
|
</ng-container>
|
|
4482
|
-
|
|
4490
|
+
|
|
4483
4491
|
<ng-container
|
|
4484
4492
|
kendoDropDownSharedEvents
|
|
4485
4493
|
[hostElement]="hostElement"
|
|
@@ -4549,7 +4557,7 @@ class AutoCompleteComponent {
|
|
|
4549
4557
|
</span>
|
|
4550
4558
|
}
|
|
4551
4559
|
</ng-container>
|
|
4552
|
-
|
|
4560
|
+
|
|
4553
4561
|
<ng-template #popupTemplate>
|
|
4554
4562
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
4555
4563
|
</ng-template>
|
|
@@ -4557,7 +4565,7 @@ class AutoCompleteComponent {
|
|
|
4557
4565
|
@if (isOpen || isAdaptiveModeEnabled) {
|
|
4558
4566
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
4559
4567
|
}
|
|
4560
|
-
|
|
4568
|
+
|
|
4561
4569
|
<kendo-adaptive-renderer
|
|
4562
4570
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
4563
4571
|
[title]="adaptiveTitle"
|
|
@@ -4569,7 +4577,7 @@ class AutoCompleteComponent {
|
|
|
4569
4577
|
[placeholder]="placeholder"
|
|
4570
4578
|
[searchBarValue]="text">
|
|
4571
4579
|
</kendo-adaptive-renderer>
|
|
4572
|
-
|
|
4580
|
+
|
|
4573
4581
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
4574
4582
|
<!--header template-->
|
|
4575
4583
|
@if (headerTemplate) {
|
|
@@ -4654,18 +4662,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4654
4662
|
<ng-container kendoAutoCompleteLocalizedMessages
|
|
4655
4663
|
i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
|
|
4656
4664
|
noDataText="NO DATA FOUND"
|
|
4657
|
-
|
|
4665
|
+
|
|
4658
4666
|
i18n-clearTitle="kendo.autocomplete.clearTitle|The title of the clear button"
|
|
4659
4667
|
clearTitle="clear"
|
|
4660
|
-
|
|
4668
|
+
|
|
4661
4669
|
i18n-popupLabel="kendo.autocomplete.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
4662
4670
|
popupLabel="Options list"
|
|
4663
|
-
|
|
4671
|
+
|
|
4664
4672
|
i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
4665
4673
|
adaptiveCloseButtonTitle="Close"
|
|
4666
4674
|
>
|
|
4667
4675
|
</ng-container>
|
|
4668
|
-
|
|
4676
|
+
|
|
4669
4677
|
<ng-container
|
|
4670
4678
|
kendoDropDownSharedEvents
|
|
4671
4679
|
[hostElement]="hostElement"
|
|
@@ -4735,7 +4743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4735
4743
|
</span>
|
|
4736
4744
|
}
|
|
4737
4745
|
</ng-container>
|
|
4738
|
-
|
|
4746
|
+
|
|
4739
4747
|
<ng-template #popupTemplate>
|
|
4740
4748
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
4741
4749
|
</ng-template>
|
|
@@ -4743,7 +4751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4743
4751
|
@if (isOpen || isAdaptiveModeEnabled) {
|
|
4744
4752
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
4745
4753
|
}
|
|
4746
|
-
|
|
4754
|
+
|
|
4747
4755
|
<kendo-adaptive-renderer
|
|
4748
4756
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
4749
4757
|
[title]="adaptiveTitle"
|
|
@@ -4755,7 +4763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4755
4763
|
[placeholder]="placeholder"
|
|
4756
4764
|
[searchBarValue]="text">
|
|
4757
4765
|
</kendo-adaptive-renderer>
|
|
4758
|
-
|
|
4766
|
+
|
|
4759
4767
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
4760
4768
|
<!--header template-->
|
|
4761
4769
|
@if (headerTemplate) {
|
|
@@ -4952,30 +4960,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
4952
4960
|
*/
|
|
4953
4961
|
const MultiselectMessages = {
|
|
4954
4962
|
'array': 'Expected values of array type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding',
|
|
4955
|
-
'object': 'Expected values of Object type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/#
|
|
4956
|
-
'primitive': 'Expected values of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/#
|
|
4957
|
-
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/data-binding/#
|
|
4963
|
+
'object': 'Expected values of Object type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/#object-values',
|
|
4964
|
+
'primitive': 'Expected values of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/#primitive-values',
|
|
4965
|
+
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/data-binding/#arrays-of-complex-data'
|
|
4958
4966
|
};
|
|
4959
4967
|
/**
|
|
4960
4968
|
* @hidden
|
|
4961
4969
|
*/
|
|
4962
4970
|
const MultiSelectTreeMessages = {
|
|
4963
4971
|
'array': 'Expected values of array type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding',
|
|
4964
|
-
'primitive': 'Expected values of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding/#
|
|
4965
|
-
'object': 'Expected values of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding/#
|
|
4966
|
-
'dataItems': 'Expected dataItems of type Object[] to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#
|
|
4967
|
-
'dataItemsLength': 'Expected dataItems length to match the number of provided values. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#
|
|
4972
|
+
'primitive': 'Expected values of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding/#primitive-values',
|
|
4973
|
+
'object': 'Expected values of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding/#object-values',
|
|
4974
|
+
'dataItems': 'Expected dataItems of type Object[] to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#dataitems',
|
|
4975
|
+
'dataItemsLength': 'Expected dataItems length to match the number of provided values. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#dataitems',
|
|
4968
4976
|
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/value-binding',
|
|
4969
|
-
'valueDepth': 'Expected valueDepth of type number[] to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#
|
|
4970
|
-
'valueDepthLength': 'Expected valueDepth length to match the number of provided values. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#
|
|
4977
|
+
'valueDepth': 'Expected valueDepth of type number[] to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#valuedepth',
|
|
4978
|
+
'valueDepthLength': 'Expected valueDepth length to match the number of provided values. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/MultiSelectTreeComponent/#valuedepth'
|
|
4971
4979
|
};
|
|
4972
4980
|
/**
|
|
4973
4981
|
* @hidden
|
|
4974
4982
|
*/
|
|
4975
4983
|
const ComboBoxMessages = {
|
|
4976
|
-
'object': 'Expected value of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding/#
|
|
4977
|
-
'primitive': 'Expected value of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding/#
|
|
4978
|
-
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/data-binding/#
|
|
4984
|
+
'object': 'Expected value of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding/#object-values',
|
|
4985
|
+
'primitive': 'Expected value of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding/#primitive-values',
|
|
4986
|
+
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/data-binding/#arrays-of-complex-data',
|
|
4979
4987
|
'noItemHeight': 'Expected virtual.itemHeight of type number.'
|
|
4980
4988
|
};
|
|
4981
4989
|
/**
|
|
@@ -4983,26 +4991,26 @@ const ComboBoxMessages = {
|
|
|
4983
4991
|
*/
|
|
4984
4992
|
const MultiColumnComboBoxMessages = {
|
|
4985
4993
|
'data': 'Provided data must consist only of objects. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/data-binding/',
|
|
4986
|
-
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/data-binding/#
|
|
4994
|
+
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/data-binding/#fields-configuration'
|
|
4987
4995
|
};
|
|
4988
4996
|
/**
|
|
4989
4997
|
* @hidden
|
|
4990
4998
|
*/
|
|
4991
4999
|
const DropDownListMessages = {
|
|
4992
|
-
'defaultItem': 'defaultItem and data items must be of same type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownListComponent/#
|
|
4993
|
-
'object': 'Expected value of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding/#
|
|
4994
|
-
'primitive': 'Expected value of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding/#
|
|
4995
|
-
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/#
|
|
5000
|
+
'defaultItem': 'defaultItem and data items must be of same type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownListComponent/#defaultitem',
|
|
5001
|
+
'object': 'Expected value of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding/#object-values',
|
|
5002
|
+
'primitive': 'Expected value of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding/#primitive-values',
|
|
5003
|
+
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/#arrays-of-complex-data'
|
|
4996
5004
|
};
|
|
4997
5005
|
/**
|
|
4998
5006
|
* @hidden
|
|
4999
5007
|
*/
|
|
5000
5008
|
const DropDownTreeMessages = {
|
|
5001
|
-
'primitive': 'Expected value of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding/#
|
|
5002
|
-
'object': 'Expected value of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding/#
|
|
5003
|
-
'dataItem': 'Expected dataItem of type Object to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownTreeComponent/#
|
|
5009
|
+
'primitive': 'Expected value of primitive type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding/#primitive-values',
|
|
5010
|
+
'object': 'Expected value of type Object. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding/#object-values',
|
|
5011
|
+
'dataItem': 'Expected dataItem of type Object to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownTreeComponent/#dataitem',
|
|
5004
5012
|
'textAndValue': 'Expected textField and valueField options to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding',
|
|
5005
|
-
'valueDepth': 'Expected valueDepth to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownTreeComponent/#
|
|
5013
|
+
'valueDepth': 'Expected valueDepth to be set. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/DropDownTreeComponent/#valuedepth'
|
|
5006
5014
|
};
|
|
5007
5015
|
|
|
5008
5016
|
/**
|
|
@@ -5013,11 +5021,8 @@ const COMBOBOX_VALUE_ACCESSOR = {
|
|
|
5013
5021
|
provide: NG_VALUE_ACCESSOR,
|
|
5014
5022
|
useExisting: forwardRef(() => ComboBoxComponent)
|
|
5015
5023
|
};
|
|
5016
|
-
const DEFAULT_SIZE$4 = 'medium';
|
|
5017
|
-
const DEFAULT_ROUNDED$4 = 'medium';
|
|
5018
|
-
const DEFAULT_FILL_MODE$4 = 'solid';
|
|
5019
5024
|
/**
|
|
5020
|
-
* Represents the [Kendo UI ComboBox component for Angular](
|
|
5025
|
+
* Represents the [Kendo UI ComboBox component for Angular](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox).
|
|
5021
5026
|
* @example
|
|
5022
5027
|
* ```html
|
|
5023
5028
|
* <kendo-combobox [data]="listItems"> </kendo-combobox>
|
|
@@ -5128,7 +5133,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5128
5133
|
selected = [];
|
|
5129
5134
|
/**
|
|
5130
5135
|
* Shows or hides the current group sticky header when using grouped data.
|
|
5131
|
-
* By default the sticky header is displayed ([see example](
|
|
5136
|
+
* By default the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
|
|
5132
5137
|
* @default true
|
|
5133
5138
|
*/
|
|
5134
5139
|
showStickyHeader = true;
|
|
@@ -5138,7 +5143,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5138
5143
|
focusableId = `k-${guid()}`;
|
|
5139
5144
|
/**
|
|
5140
5145
|
* Specifies whether the ComboBox allows user-defined values that are not present in the dataset
|
|
5141
|
-
* ([more information and examples](
|
|
5146
|
+
* ([more information and examples](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/custom-values)).
|
|
5142
5147
|
* Defaults to `false`.
|
|
5143
5148
|
*
|
|
5144
5149
|
* The feature is not available when using adaptive mode.
|
|
@@ -5203,7 +5208,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5203
5208
|
valueField;
|
|
5204
5209
|
/**
|
|
5205
5210
|
* Specifies the type of the selected value. If set to `true`, the selected value must be a primitive type.
|
|
5206
|
-
* ([more information and example](
|
|
5211
|
+
* ([more information and example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/value-binding#primitive-values-from-object-fields))
|
|
5207
5212
|
*/
|
|
5208
5213
|
set valuePrimitive(isPrimitive) {
|
|
5209
5214
|
this._valuePrimitive = isPrimitive;
|
|
@@ -5327,11 +5332,11 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5327
5332
|
*/
|
|
5328
5333
|
clearButton = true;
|
|
5329
5334
|
/**
|
|
5330
|
-
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the articles on [ComboBox Forms Support](
|
|
5335
|
+
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the articles on [ComboBox Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/forms#managing-the-combobox-disabled-state-in-reactive-forms) and [MultiColumnComboBox Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/forms#managing-the-multicolumncombobox-disabled-state-in-reactive-forms).
|
|
5331
5336
|
*/
|
|
5332
5337
|
disabled = false;
|
|
5333
5338
|
/**
|
|
5334
|
-
* Defines a Boolean function that is executed for each data item in the component ([see examples](
|
|
5339
|
+
* Defines a Boolean function that is executed for each data item in the component ([see examples](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/disabled-items)). Determines whether the item is disabled.
|
|
5335
5340
|
*/
|
|
5336
5341
|
set itemDisabled(fn) {
|
|
5337
5342
|
if (typeof fn !== 'function') {
|
|
@@ -5358,12 +5363,12 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5358
5363
|
return this.tabindex;
|
|
5359
5364
|
}
|
|
5360
5365
|
/**
|
|
5361
|
-
* Enables the [filtering](
|
|
5366
|
+
* Enables the [filtering](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/filtering) functionality.
|
|
5362
5367
|
* If set to `true`, the component emits the `filterChange` event.
|
|
5363
5368
|
*/
|
|
5364
5369
|
filterable = false;
|
|
5365
5370
|
/**
|
|
5366
|
-
* Enables the [virtualization](
|
|
5371
|
+
* Enables the [virtualization](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/virtualization) functionality.
|
|
5367
5372
|
*/
|
|
5368
5373
|
set virtual(settings) {
|
|
5369
5374
|
this._virtualSettings = normalizeVirtualizationSettings(settings, {
|
|
@@ -5379,18 +5384,17 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5379
5384
|
*
|
|
5380
5385
|
* The possible values are:
|
|
5381
5386
|
* * `small`
|
|
5382
|
-
* * `medium`
|
|
5387
|
+
* * `medium`
|
|
5383
5388
|
* * `large`
|
|
5384
|
-
* * `none`
|
|
5385
5389
|
*
|
|
5390
|
+
* @default undefined
|
|
5386
5391
|
*/
|
|
5387
5392
|
set size(size) {
|
|
5388
|
-
const newSize = size ? size : DEFAULT_SIZE$4;
|
|
5389
5393
|
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
|
|
5390
|
-
if (size
|
|
5391
|
-
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input',
|
|
5394
|
+
if (size) {
|
|
5395
|
+
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
|
|
5392
5396
|
}
|
|
5393
|
-
this._size =
|
|
5397
|
+
this._size = size;
|
|
5394
5398
|
}
|
|
5395
5399
|
get size() {
|
|
5396
5400
|
return this._size;
|
|
@@ -5400,19 +5404,19 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5400
5404
|
*
|
|
5401
5405
|
* The possible values are:
|
|
5402
5406
|
* * `small`
|
|
5403
|
-
* * `medium`
|
|
5407
|
+
* * `medium`
|
|
5404
5408
|
* * `large`
|
|
5405
5409
|
* * `full`
|
|
5406
5410
|
* * `none`
|
|
5407
5411
|
*
|
|
5412
|
+
* @default undefined
|
|
5408
5413
|
*/
|
|
5409
5414
|
set rounded(rounded) {
|
|
5410
|
-
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$4;
|
|
5411
5415
|
this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
5412
|
-
if (rounded
|
|
5413
|
-
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(
|
|
5416
|
+
if (rounded) {
|
|
5417
|
+
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
|
|
5414
5418
|
}
|
|
5415
|
-
this._rounded =
|
|
5419
|
+
this._rounded = rounded;
|
|
5416
5420
|
}
|
|
5417
5421
|
get rounded() {
|
|
5418
5422
|
return this._rounded;
|
|
@@ -5422,18 +5426,17 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5422
5426
|
*
|
|
5423
5427
|
* The possible values are:
|
|
5424
5428
|
* * `flat`
|
|
5425
|
-
* * `solid`
|
|
5429
|
+
* * `solid`
|
|
5426
5430
|
* * `outline`
|
|
5427
|
-
* * `none`
|
|
5428
5431
|
*
|
|
5432
|
+
* @default undefined
|
|
5429
5433
|
*/
|
|
5430
5434
|
set fillMode(fillMode) {
|
|
5431
|
-
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$4;
|
|
5432
5435
|
this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
|
|
5433
|
-
if (fillMode
|
|
5434
|
-
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input',
|
|
5436
|
+
if (fillMode) {
|
|
5437
|
+
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
|
|
5435
5438
|
}
|
|
5436
|
-
this._fillMode =
|
|
5439
|
+
this._fillMode = fillMode;
|
|
5437
5440
|
}
|
|
5438
5441
|
get fillMode() {
|
|
5439
5442
|
return this._fillMode;
|
|
@@ -5441,18 +5444,18 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5441
5444
|
/**
|
|
5442
5445
|
* Fires each time the value is changed—
|
|
5443
5446
|
* when the component is blurred or the value is cleared through the **Clear** button
|
|
5444
|
-
* ([see example](
|
|
5447
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/events)).
|
|
5445
5448
|
* When the value of the component is programmatically changed to `ngModel` or `formControl`
|
|
5446
5449
|
* through its API or form binding, the `valueChange` event is not triggered because it
|
|
5447
5450
|
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
5448
5451
|
*/
|
|
5449
5452
|
valueChange = new EventEmitter();
|
|
5450
5453
|
/**
|
|
5451
|
-
* Fires each time an item selection is changed ([see example](
|
|
5454
|
+
* Fires each time an item selection is changed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/events)).
|
|
5452
5455
|
*/
|
|
5453
5456
|
selectionChange = new EventEmitter();
|
|
5454
5457
|
/**
|
|
5455
|
-
* Fires each time the user types in the input field. You can filter the source based on the passed filtration value ([see example](
|
|
5458
|
+
* Fires each time the user types in the input field. You can filter the source based on the passed filtration value ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/events)).
|
|
5456
5459
|
*/
|
|
5457
5460
|
filterChange = new EventEmitter();
|
|
5458
5461
|
/**
|
|
@@ -5603,9 +5606,9 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5603
5606
|
subs = new Subscription();
|
|
5604
5607
|
touchstartDisposeHandler;
|
|
5605
5608
|
selectClickDisposeHandler;
|
|
5606
|
-
_size =
|
|
5607
|
-
_rounded =
|
|
5608
|
-
_fillMode =
|
|
5609
|
+
_size = undefined;
|
|
5610
|
+
_rounded = undefined;
|
|
5611
|
+
_fillMode = undefined;
|
|
5609
5612
|
constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, injector, hostElement, adaptiveService) {
|
|
5610
5613
|
super();
|
|
5611
5614
|
this.wrapper = wrapper;
|
|
@@ -5934,8 +5937,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5934
5937
|
* @hidden
|
|
5935
5938
|
*/
|
|
5936
5939
|
get selectButtonClasses() {
|
|
5937
|
-
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''}
|
|
5938
|
-
`;
|
|
5940
|
+
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''}`;
|
|
5939
5941
|
}
|
|
5940
5942
|
/**
|
|
5941
5943
|
* @hidden
|
|
@@ -6470,13 +6472,13 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6470
6472
|
this.selectClickDisposeHandler = this.renderer.listen(selectElement, event, this.selectClick.bind(this));
|
|
6471
6473
|
}
|
|
6472
6474
|
setComponentClasses() {
|
|
6473
|
-
if (this.size
|
|
6475
|
+
if (this.size) {
|
|
6474
6476
|
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
|
|
6475
6477
|
}
|
|
6476
|
-
if (this.rounded
|
|
6478
|
+
if (this.rounded) {
|
|
6477
6479
|
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
6478
6480
|
}
|
|
6479
|
-
if (this.fillMode
|
|
6481
|
+
if (this.fillMode) {
|
|
6480
6482
|
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
|
|
6481
6483
|
}
|
|
6482
6484
|
}
|
|
@@ -6561,21 +6563,21 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6561
6563
|
<ng-container kendoComboBoxLocalizedMessages
|
|
6562
6564
|
i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
|
|
6563
6565
|
noDataText="NO DATA FOUND"
|
|
6564
|
-
|
|
6566
|
+
|
|
6565
6567
|
i18n-clearTitle="kendo.combobox.clearTitle|The title of the clear button"
|
|
6566
6568
|
clearTitle="clear"
|
|
6567
|
-
|
|
6569
|
+
|
|
6568
6570
|
i18n-selectButtonText="kendo.combobox.selectButtonText|The text set as aria-label on the select button"
|
|
6569
6571
|
selectButtonText="Select"
|
|
6570
|
-
|
|
6572
|
+
|
|
6571
6573
|
i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
6572
6574
|
popupLabel="Options list"
|
|
6573
|
-
|
|
6575
|
+
|
|
6574
6576
|
i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
6575
6577
|
adaptiveCloseButtonTitle="Close"
|
|
6576
6578
|
>
|
|
6577
6579
|
</ng-container>
|
|
6578
|
-
|
|
6580
|
+
|
|
6579
6581
|
<ng-container
|
|
6580
6582
|
kendoDropDownSharedEvents
|
|
6581
6583
|
[hostElement]="hostElement"
|
|
@@ -6667,7 +6669,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6667
6669
|
</kendo-icon-wrapper>
|
|
6668
6670
|
</button>
|
|
6669
6671
|
</ng-container>
|
|
6670
|
-
|
|
6672
|
+
|
|
6671
6673
|
<ng-template #popupTemplate>
|
|
6672
6674
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
6673
6675
|
</ng-template>
|
|
@@ -6675,7 +6677,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6675
6677
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
6676
6678
|
}
|
|
6677
6679
|
<ng-container #container></ng-container>
|
|
6678
|
-
|
|
6680
|
+
|
|
6679
6681
|
<kendo-adaptive-renderer
|
|
6680
6682
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
6681
6683
|
[title]="adaptiveTitle"
|
|
@@ -6773,21 +6775,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
6773
6775
|
<ng-container kendoComboBoxLocalizedMessages
|
|
6774
6776
|
i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
|
|
6775
6777
|
noDataText="NO DATA FOUND"
|
|
6776
|
-
|
|
6778
|
+
|
|
6777
6779
|
i18n-clearTitle="kendo.combobox.clearTitle|The title of the clear button"
|
|
6778
6780
|
clearTitle="clear"
|
|
6779
|
-
|
|
6781
|
+
|
|
6780
6782
|
i18n-selectButtonText="kendo.combobox.selectButtonText|The text set as aria-label on the select button"
|
|
6781
6783
|
selectButtonText="Select"
|
|
6782
|
-
|
|
6784
|
+
|
|
6783
6785
|
i18n-popupLabel="kendo.combobox.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
6784
6786
|
popupLabel="Options list"
|
|
6785
|
-
|
|
6787
|
+
|
|
6786
6788
|
i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
6787
6789
|
adaptiveCloseButtonTitle="Close"
|
|
6788
6790
|
>
|
|
6789
6791
|
</ng-container>
|
|
6790
|
-
|
|
6792
|
+
|
|
6791
6793
|
<ng-container
|
|
6792
6794
|
kendoDropDownSharedEvents
|
|
6793
6795
|
[hostElement]="hostElement"
|
|
@@ -6879,7 +6881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
6879
6881
|
</kendo-icon-wrapper>
|
|
6880
6882
|
</button>
|
|
6881
6883
|
</ng-container>
|
|
6882
|
-
|
|
6884
|
+
|
|
6883
6885
|
<ng-template #popupTemplate>
|
|
6884
6886
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
6885
6887
|
</ng-template>
|
|
@@ -6887,7 +6889,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
6887
6889
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
6888
6890
|
}
|
|
6889
6891
|
<ng-container #container></ng-container>
|
|
6890
|
-
|
|
6892
|
+
|
|
6891
6893
|
<kendo-adaptive-renderer
|
|
6892
6894
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
6893
6895
|
[title]="adaptiveTitle"
|
|
@@ -7117,8 +7119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
7117
7119
|
*
|
|
7118
7120
|
* > The `ValueTemplate` directive can only be used with the DropDownList and DropDownTree components.
|
|
7119
7121
|
*
|
|
7120
|
-
* - [Using `ValueTemplate` with the DropDownList](
|
|
7121
|
-
* - [Using `ValueTemplate` with the DropDownTree](
|
|
7122
|
+
* - [Using `ValueTemplate` with the DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates#value-template)
|
|
7123
|
+
* - [Using `ValueTemplate` with the DropDownTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/templates#value-template)
|
|
7122
7124
|
*
|
|
7123
7125
|
* @example
|
|
7124
7126
|
* ```ts
|
|
@@ -7195,11 +7197,8 @@ const DROPDOWNLIST_VALUE_ACCESSOR = {
|
|
|
7195
7197
|
provide: NG_VALUE_ACCESSOR,
|
|
7196
7198
|
useExisting: forwardRef(() => DropDownListComponent)
|
|
7197
7199
|
};
|
|
7198
|
-
const DEFAULT_SIZE$3 = 'medium';
|
|
7199
|
-
const DEFAULT_ROUNDED$3 = 'medium';
|
|
7200
|
-
const DEFAULT_FILL_MODE$3 = 'solid';
|
|
7201
7200
|
/**
|
|
7202
|
-
* Represents the Kendo UI for Angular [DropDownList](
|
|
7201
|
+
* Represents the Kendo UI for Angular [DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist) component.
|
|
7203
7202
|
*
|
|
7204
7203
|
* @example
|
|
7205
7204
|
* ```html
|
|
@@ -7313,7 +7312,7 @@ class DropDownListComponent {
|
|
|
7313
7312
|
}
|
|
7314
7313
|
/**
|
|
7315
7314
|
* Shows or hides the current group sticky header when using grouped data.
|
|
7316
|
-
* The sticky header displays by default. [see example.](
|
|
7315
|
+
* The sticky header displays by default. [see example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)
|
|
7317
7316
|
*/
|
|
7318
7317
|
showStickyHeader = true;
|
|
7319
7318
|
/**
|
|
@@ -7460,11 +7459,11 @@ class DropDownListComponent {
|
|
|
7460
7459
|
*/
|
|
7461
7460
|
defaultItem;
|
|
7462
7461
|
/**
|
|
7463
|
-
* Sets the disabled state of the component. To disable the component in reactive forms, see [Forms Support](
|
|
7462
|
+
* Sets the disabled state of the component. To disable the component in reactive forms, see [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/forms#managing-the-dropdownlist-disabled-state-in-reactive-forms).
|
|
7464
7463
|
*/
|
|
7465
7464
|
disabled;
|
|
7466
7465
|
/**
|
|
7467
|
-
* Defines a Boolean function executed for each data item in the component. Determines whether the item is disabled. [See examples.](
|
|
7466
|
+
* Defines a Boolean function executed for each data item in the component. Determines whether the item is disabled. [See examples.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/disabled-items)
|
|
7468
7467
|
*/
|
|
7469
7468
|
set itemDisabled(fn) {
|
|
7470
7469
|
if (typeof fn !== 'function') {
|
|
@@ -7479,11 +7478,11 @@ class DropDownListComponent {
|
|
|
7479
7478
|
*/
|
|
7480
7479
|
readonly = false;
|
|
7481
7480
|
/**
|
|
7482
|
-
* Enables the [filtering](
|
|
7481
|
+
* Enables the [filtering](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/filtering) functionality of the `DropDownListComponent`.
|
|
7483
7482
|
*/
|
|
7484
7483
|
filterable = false;
|
|
7485
7484
|
/**
|
|
7486
|
-
* Enables the [virtualization](
|
|
7485
|
+
* Enables the [virtualization](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/virtualization) functionality.
|
|
7487
7486
|
*/
|
|
7488
7487
|
set virtual(settings) {
|
|
7489
7488
|
this._virtualSettings = normalizeVirtualizationSettings(settings);
|
|
@@ -7501,7 +7500,7 @@ class DropDownListComponent {
|
|
|
7501
7500
|
delay = 500;
|
|
7502
7501
|
/**
|
|
7503
7502
|
* Specifies the type of the selected value. If set to `true`, the selected value must be a primitive value.
|
|
7504
|
-
* * [More information and example.](
|
|
7503
|
+
* * [More information and example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/value-binding#primitive-values-from-object-fields)
|
|
7505
7504
|
*/
|
|
7506
7505
|
set valuePrimitive(isPrimitive) {
|
|
7507
7506
|
this._valuePrimitive = isPrimitive;
|
|
@@ -7530,19 +7529,17 @@ class DropDownListComponent {
|
|
|
7530
7529
|
*
|
|
7531
7530
|
* The possible values are:
|
|
7532
7531
|
* * `small`
|
|
7533
|
-
* * `medium`
|
|
7532
|
+
* * `medium`
|
|
7534
7533
|
* * `large`
|
|
7535
|
-
* * `none`
|
|
7536
7534
|
*
|
|
7537
|
-
* @default
|
|
7535
|
+
* @default undefined
|
|
7538
7536
|
*/
|
|
7539
7537
|
set size(size) {
|
|
7540
|
-
const newSize = size ? size : DEFAULT_SIZE$3;
|
|
7541
7538
|
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
|
|
7542
|
-
if (size
|
|
7543
|
-
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker',
|
|
7539
|
+
if (size) {
|
|
7540
|
+
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
|
|
7544
7541
|
}
|
|
7545
|
-
this._size =
|
|
7542
|
+
this._size = size;
|
|
7546
7543
|
}
|
|
7547
7544
|
get size() {
|
|
7548
7545
|
return this._size;
|
|
@@ -7560,10 +7557,9 @@ class DropDownListComponent {
|
|
|
7560
7557
|
* @default 'medium'
|
|
7561
7558
|
*/
|
|
7562
7559
|
set rounded(rounded) {
|
|
7563
|
-
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
|
|
7564
7560
|
this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
7565
|
-
if (rounded
|
|
7566
|
-
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(
|
|
7561
|
+
if (rounded) {
|
|
7562
|
+
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
|
|
7567
7563
|
}
|
|
7568
7564
|
this._rounded = rounded;
|
|
7569
7565
|
}
|
|
@@ -7575,19 +7571,17 @@ class DropDownListComponent {
|
|
|
7575
7571
|
*
|
|
7576
7572
|
* The possible values are:
|
|
7577
7573
|
* * `flat`
|
|
7578
|
-
* * `solid`
|
|
7574
|
+
* * `solid`
|
|
7579
7575
|
* * `outline`
|
|
7580
|
-
* * `none`
|
|
7581
7576
|
*
|
|
7582
|
-
* @default
|
|
7577
|
+
* @default undefined
|
|
7583
7578
|
*/
|
|
7584
7579
|
set fillMode(fillMode) {
|
|
7585
|
-
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
|
|
7586
7580
|
this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
|
|
7587
|
-
if (fillMode
|
|
7588
|
-
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker',
|
|
7581
|
+
if (fillMode) {
|
|
7582
|
+
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
|
|
7589
7583
|
}
|
|
7590
|
-
this._fillMode =
|
|
7584
|
+
this._fillMode = fillMode;
|
|
7591
7585
|
}
|
|
7592
7586
|
get fillMode() {
|
|
7593
7587
|
return this._fillMode;
|
|
@@ -7598,19 +7592,19 @@ class DropDownListComponent {
|
|
|
7598
7592
|
*/
|
|
7599
7593
|
leftRightArrowsNavigation = true;
|
|
7600
7594
|
/**
|
|
7601
|
-
* Fires each time the value changes. [See example.](
|
|
7595
|
+
* Fires each time the value changes. [See example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/events).
|
|
7602
7596
|
*/
|
|
7603
7597
|
valueChange = new EventEmitter();
|
|
7604
7598
|
/**
|
|
7605
|
-
** 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.](
|
|
7599
|
+
** 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.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/events).
|
|
7606
7600
|
*/
|
|
7607
7601
|
filterChange = new EventEmitter();
|
|
7608
7602
|
/**
|
|
7609
|
-
* Fires each time the item selection changes. [see example.](
|
|
7603
|
+
* Fires each time the item selection changes. [see example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/events).
|
|
7610
7604
|
*/
|
|
7611
7605
|
selectionChange = new EventEmitter();
|
|
7612
7606
|
/**
|
|
7613
|
-
* Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup remains closed. [see example.](
|
|
7607
|
+
* Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup remains closed. [see example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/open-state#preventing-opening-and-closing)
|
|
7614
7608
|
*/
|
|
7615
7609
|
open = new EventEmitter();
|
|
7616
7610
|
/**
|
|
@@ -7618,7 +7612,7 @@ class DropDownListComponent {
|
|
|
7618
7612
|
*/
|
|
7619
7613
|
opened = new EventEmitter();
|
|
7620
7614
|
/**
|
|
7621
|
-
* Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup remains open. [see example.](
|
|
7615
|
+
* Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup remains open. [see example.](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/open-state#preventing-opening-and-closing)
|
|
7622
7616
|
*/
|
|
7623
7617
|
close = new EventEmitter();
|
|
7624
7618
|
/**
|
|
@@ -7837,9 +7831,9 @@ class DropDownListComponent {
|
|
|
7837
7831
|
text;
|
|
7838
7832
|
_popupSettings = { animate: true };
|
|
7839
7833
|
_virtualSettings;
|
|
7840
|
-
_size =
|
|
7841
|
-
_rounded =
|
|
7842
|
-
_fillMode =
|
|
7834
|
+
_size = undefined;
|
|
7835
|
+
_rounded = undefined;
|
|
7836
|
+
_fillMode = undefined;
|
|
7843
7837
|
constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, _zone, renderer, cdr, injector, adaptiveService) {
|
|
7844
7838
|
this.wrapper = wrapper;
|
|
7845
7839
|
this.localization = localization;
|
|
@@ -8059,7 +8053,7 @@ class DropDownListComponent {
|
|
|
8059
8053
|
* @hidden
|
|
8060
8054
|
*/
|
|
8061
8055
|
get selectButtonClasses() {
|
|
8062
|
-
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''}
|
|
8056
|
+
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''}`;
|
|
8063
8057
|
}
|
|
8064
8058
|
/**
|
|
8065
8059
|
* @hidden
|
|
@@ -8561,13 +8555,13 @@ class DropDownListComponent {
|
|
|
8561
8555
|
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
|
|
8562
8556
|
}
|
|
8563
8557
|
setComponentClasses() {
|
|
8564
|
-
if (this.size
|
|
8558
|
+
if (this.size) {
|
|
8565
8559
|
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
|
|
8566
8560
|
}
|
|
8567
|
-
if (this.rounded
|
|
8561
|
+
if (this.rounded) {
|
|
8568
8562
|
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
8569
8563
|
}
|
|
8570
|
-
if (this.fillMode
|
|
8564
|
+
if (this.fillMode) {
|
|
8571
8565
|
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
|
|
8572
8566
|
}
|
|
8573
8567
|
}
|
|
@@ -8618,19 +8612,19 @@ class DropDownListComponent {
|
|
|
8618
8612
|
<ng-container kendoDropDownListLocalizedMessages
|
|
8619
8613
|
i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
|
|
8620
8614
|
noDataText="NO DATA FOUND"
|
|
8621
|
-
|
|
8615
|
+
|
|
8622
8616
|
i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
|
|
8623
8617
|
selectButtonText="Select"
|
|
8624
|
-
|
|
8618
|
+
|
|
8625
8619
|
i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
|
|
8626
8620
|
filterInputLabel="Filter"
|
|
8627
|
-
|
|
8621
|
+
|
|
8628
8622
|
i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
8629
8623
|
popupLabel="Options list"
|
|
8630
|
-
|
|
8624
|
+
|
|
8631
8625
|
i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
8632
8626
|
adaptiveCloseButtonTitle="Close"
|
|
8633
|
-
|
|
8627
|
+
|
|
8634
8628
|
i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
8635
8629
|
filterInputPlaceholder="Filter"
|
|
8636
8630
|
>
|
|
@@ -8678,7 +8672,7 @@ class DropDownListComponent {
|
|
|
8678
8672
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
8679
8673
|
}
|
|
8680
8674
|
<ng-container #container></ng-container>
|
|
8681
|
-
|
|
8675
|
+
|
|
8682
8676
|
<kendo-adaptive-renderer
|
|
8683
8677
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
8684
8678
|
[title]="adaptiveTitle"
|
|
@@ -8688,7 +8682,7 @@ class DropDownListComponent {
|
|
|
8688
8682
|
(textInputChange)="onFilterChange($event)"
|
|
8689
8683
|
[filterable]="filterable">
|
|
8690
8684
|
</kendo-adaptive-renderer>
|
|
8691
|
-
|
|
8685
|
+
|
|
8692
8686
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
8693
8687
|
<!--filterable-->
|
|
8694
8688
|
@if (filterable && !isActionSheetExpanded) {
|
|
@@ -8804,19 +8798,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
8804
8798
|
<ng-container kendoDropDownListLocalizedMessages
|
|
8805
8799
|
i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
|
|
8806
8800
|
noDataText="NO DATA FOUND"
|
|
8807
|
-
|
|
8801
|
+
|
|
8808
8802
|
i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
|
|
8809
8803
|
selectButtonText="Select"
|
|
8810
|
-
|
|
8804
|
+
|
|
8811
8805
|
i18n-filterInputLabel="kendo.dropdownlist.filterInputLabel|The text set as aria-label on the filter input"
|
|
8812
8806
|
filterInputLabel="Filter"
|
|
8813
|
-
|
|
8807
|
+
|
|
8814
8808
|
i18n-popupLabel="kendo.dropdownlist.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
8815
8809
|
popupLabel="Options list"
|
|
8816
|
-
|
|
8810
|
+
|
|
8817
8811
|
i18n-adaptiveCloseButtonTitle="kendo.dropdownlist.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
8818
8812
|
adaptiveCloseButtonTitle="Close"
|
|
8819
|
-
|
|
8813
|
+
|
|
8820
8814
|
i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
8821
8815
|
filterInputPlaceholder="Filter"
|
|
8822
8816
|
>
|
|
@@ -8864,7 +8858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
8864
8858
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
8865
8859
|
}
|
|
8866
8860
|
<ng-container #container></ng-container>
|
|
8867
|
-
|
|
8861
|
+
|
|
8868
8862
|
<kendo-adaptive-renderer
|
|
8869
8863
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
8870
8864
|
[title]="adaptiveTitle"
|
|
@@ -8874,7 +8868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
8874
8868
|
(textInputChange)="onFilterChange($event)"
|
|
8875
8869
|
[filterable]="filterable">
|
|
8876
8870
|
</kendo-adaptive-renderer>
|
|
8877
|
-
|
|
8871
|
+
|
|
8878
8872
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
8879
8873
|
<!--filterable-->
|
|
8880
8874
|
@if (filterable && !isActionSheetExpanded) {
|
|
@@ -9141,7 +9135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
9141
9135
|
|
|
9142
9136
|
/**
|
|
9143
9137
|
* Renders the selected tag value of the MultiSelect
|
|
9144
|
-
* ([see example](
|
|
9138
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates#tag-template)).
|
|
9145
9139
|
* The template context is set to the current component.
|
|
9146
9140
|
* To get a reference to the current data item, use the `let-dataItem` directive.
|
|
9147
9141
|
*
|
|
@@ -9182,7 +9176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
9182
9176
|
|
|
9183
9177
|
/**
|
|
9184
9178
|
* Renders the grouped tag values in the MultiSelect
|
|
9185
|
-
* ([see example](
|
|
9179
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode)).
|
|
9186
9180
|
* The template context is set to the current component.
|
|
9187
9181
|
* To get a reference to the current grouped
|
|
9188
9182
|
* data items collection, use the `let-dataItems` directive.
|
|
@@ -9282,8 +9276,8 @@ class TagListComponent {
|
|
|
9282
9276
|
get size() {
|
|
9283
9277
|
return this._size;
|
|
9284
9278
|
}
|
|
9285
|
-
rounded
|
|
9286
|
-
fillMode
|
|
9279
|
+
rounded;
|
|
9280
|
+
fillMode;
|
|
9287
9281
|
/**
|
|
9288
9282
|
* A collection with the disabled tags' indices.
|
|
9289
9283
|
*/
|
|
@@ -9295,7 +9289,7 @@ class TagListComponent {
|
|
|
9295
9289
|
}
|
|
9296
9290
|
taglistRole = 'listbox';
|
|
9297
9291
|
multiselectable = true;
|
|
9298
|
-
_size
|
|
9292
|
+
_size;
|
|
9299
9293
|
constructor(renderer, hostElement) {
|
|
9300
9294
|
this.renderer = renderer;
|
|
9301
9295
|
this.hostElement = hostElement;
|
|
@@ -9366,9 +9360,11 @@ class TagListComponent {
|
|
|
9366
9360
|
'k-rounded-md': rounded === 'medium',
|
|
9367
9361
|
'k-rounded-lg': rounded === 'large',
|
|
9368
9362
|
'k-rounded-full': rounded === 'full',
|
|
9369
|
-
'k-
|
|
9370
|
-
'k-chip-
|
|
9371
|
-
'k-chip-
|
|
9363
|
+
'k-rounded-none': rounded === 'none',
|
|
9364
|
+
'k-chip-solid': fillMode === 'solid',
|
|
9365
|
+
'k-chip-flat': fillMode === 'flat',
|
|
9366
|
+
'k-chip-outline': fillMode === 'outline',
|
|
9367
|
+
'k-chip-base': fillMode
|
|
9372
9368
|
}"
|
|
9373
9369
|
>
|
|
9374
9370
|
<span class="k-chip-content">
|
|
@@ -9438,9 +9434,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
9438
9434
|
'k-rounded-md': rounded === 'medium',
|
|
9439
9435
|
'k-rounded-lg': rounded === 'large',
|
|
9440
9436
|
'k-rounded-full': rounded === 'full',
|
|
9441
|
-
'k-
|
|
9442
|
-
'k-chip-
|
|
9443
|
-
'k-chip-
|
|
9437
|
+
'k-rounded-none': rounded === 'none',
|
|
9438
|
+
'k-chip-solid': fillMode === 'solid',
|
|
9439
|
+
'k-chip-flat': fillMode === 'flat',
|
|
9440
|
+
'k-chip-outline': fillMode === 'outline',
|
|
9441
|
+
'k-chip-base': fillMode
|
|
9444
9442
|
}"
|
|
9445
9443
|
>
|
|
9446
9444
|
<span class="k-chip-content">
|
|
@@ -9540,14 +9538,11 @@ const MULTISELECT_VALUE_ACCESSOR = {
|
|
|
9540
9538
|
provide: NG_VALUE_ACCESSOR,
|
|
9541
9539
|
useExisting: forwardRef(() => MultiSelectComponent)
|
|
9542
9540
|
};
|
|
9543
|
-
const DEFAULT_SIZE$2 = 'medium';
|
|
9544
|
-
const DEFAULT_ROUNDED$2 = 'medium';
|
|
9545
|
-
const DEFAULT_FILL_MODE$2 = 'solid';
|
|
9546
9541
|
/**
|
|
9547
|
-
* Represents the [Kendo UI MultiSelect component for Angular](
|
|
9542
|
+
* Represents the [Kendo UI MultiSelect component for Angular](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect).
|
|
9548
9543
|
*
|
|
9549
9544
|
* Use the `MultiSelectComponent` to show a dropdown list where users can select multiple items.
|
|
9550
|
-
* [See example](
|
|
9545
|
+
* [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect).
|
|
9551
9546
|
*
|
|
9552
9547
|
* @example
|
|
9553
9548
|
* ```typescript
|
|
@@ -9764,7 +9759,7 @@ class MultiSelectComponent {
|
|
|
9764
9759
|
}
|
|
9765
9760
|
/**
|
|
9766
9761
|
* Shows or hides the current group sticky header when using grouped data.
|
|
9767
|
-
* By default the sticky header is displayed ([see example](
|
|
9762
|
+
* By default the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
|
|
9768
9763
|
*/
|
|
9769
9764
|
showStickyHeader = true;
|
|
9770
9765
|
/**
|
|
@@ -9772,7 +9767,7 @@ class MultiSelectComponent {
|
|
|
9772
9767
|
*/
|
|
9773
9768
|
focusableId = `k-${guid()}`;
|
|
9774
9769
|
/**
|
|
9775
|
-
* Controls whether the options list closes after item selection finishes ([see example](
|
|
9770
|
+
* Controls whether the options list closes after item selection finishes ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/open-state#keeping-the-options-list-open-while-on-focus)).
|
|
9776
9771
|
* Set to `false` to keep the list open while the component has focus.
|
|
9777
9772
|
*
|
|
9778
9773
|
* @default true
|
|
@@ -9856,15 +9851,14 @@ class MultiSelectComponent {
|
|
|
9856
9851
|
/**
|
|
9857
9852
|
* Sets the size of the component.
|
|
9858
9853
|
*
|
|
9859
|
-
* @default
|
|
9854
|
+
* @default undefined
|
|
9860
9855
|
*/
|
|
9861
9856
|
set size(size) {
|
|
9862
|
-
const newSize = size ? size : DEFAULT_SIZE$2;
|
|
9863
9857
|
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
|
|
9864
|
-
if (size
|
|
9865
|
-
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input',
|
|
9858
|
+
if (size) {
|
|
9859
|
+
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
|
|
9866
9860
|
}
|
|
9867
|
-
this._size =
|
|
9861
|
+
this._size = size;
|
|
9868
9862
|
}
|
|
9869
9863
|
get size() {
|
|
9870
9864
|
return this._size;
|
|
@@ -9872,15 +9866,14 @@ class MultiSelectComponent {
|
|
|
9872
9866
|
/**
|
|
9873
9867
|
* Sets the border radius of the component.
|
|
9874
9868
|
*
|
|
9875
|
-
* @default
|
|
9869
|
+
* @default undefined
|
|
9876
9870
|
*/
|
|
9877
9871
|
set rounded(rounded) {
|
|
9878
|
-
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
|
|
9879
9872
|
this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
9880
|
-
if (rounded
|
|
9881
|
-
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(
|
|
9873
|
+
if (rounded) {
|
|
9874
|
+
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
|
|
9882
9875
|
}
|
|
9883
|
-
this._rounded =
|
|
9876
|
+
this._rounded = rounded;
|
|
9884
9877
|
}
|
|
9885
9878
|
get rounded() {
|
|
9886
9879
|
return this._rounded;
|
|
@@ -9888,15 +9881,14 @@ class MultiSelectComponent {
|
|
|
9888
9881
|
/**
|
|
9889
9882
|
* Sets the fill mode of the component.
|
|
9890
9883
|
*
|
|
9891
|
-
* @default
|
|
9884
|
+
* @default undefined
|
|
9892
9885
|
*/
|
|
9893
9886
|
set fillMode(fillMode) {
|
|
9894
|
-
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
|
|
9895
9887
|
this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
|
|
9896
|
-
if (fillMode
|
|
9897
|
-
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input',
|
|
9888
|
+
if (fillMode) {
|
|
9889
|
+
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
|
|
9898
9890
|
}
|
|
9899
|
-
this._fillMode =
|
|
9891
|
+
this._fillMode = fillMode;
|
|
9900
9892
|
}
|
|
9901
9893
|
get fillMode() {
|
|
9902
9894
|
return this._fillMode;
|
|
@@ -9937,7 +9929,7 @@ class MultiSelectComponent {
|
|
|
9937
9929
|
/**
|
|
9938
9930
|
* Controls the disabled state of the component.
|
|
9939
9931
|
* When true, sets the component to disabled.
|
|
9940
|
-
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](
|
|
9932
|
+
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/forms#managing-the-multiselect-disabled-state-in-reactive-forms).
|
|
9941
9933
|
*
|
|
9942
9934
|
* @default false
|
|
9943
9935
|
*/
|
|
@@ -10186,9 +10178,9 @@ class MultiSelectComponent {
|
|
|
10186
10178
|
}
|
|
10187
10179
|
disabledIndices;
|
|
10188
10180
|
initialized = false;
|
|
10189
|
-
_size
|
|
10190
|
-
_rounded
|
|
10191
|
-
_fillMode
|
|
10181
|
+
_size;
|
|
10182
|
+
_rounded;
|
|
10183
|
+
_fillMode;
|
|
10192
10184
|
_valueHolder = [];
|
|
10193
10185
|
isCustomValueSelected = false;
|
|
10194
10186
|
constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, hostElement, adaptiveService) {
|
|
@@ -10568,7 +10560,7 @@ class MultiSelectComponent {
|
|
|
10568
10560
|
}
|
|
10569
10561
|
/**
|
|
10570
10562
|
* Toggles the visibility of the popup or actionSheet
|
|
10571
|
-
* ([see example](
|
|
10563
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/open-state#setting-the-initially-opened-component)).
|
|
10572
10564
|
* If you use the `toggle` method to open or close the popup or actionSheet, the respective `open` and `close` events will not be fired.
|
|
10573
10565
|
*
|
|
10574
10566
|
* @param open - The state of the popup.
|
|
@@ -11226,13 +11218,13 @@ class MultiSelectComponent {
|
|
|
11226
11218
|
});
|
|
11227
11219
|
}
|
|
11228
11220
|
setComponentClasses() {
|
|
11229
|
-
if (this.size
|
|
11221
|
+
if (this.size) {
|
|
11230
11222
|
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
|
|
11231
11223
|
}
|
|
11232
|
-
if (this.rounded
|
|
11224
|
+
if (this.rounded) {
|
|
11233
11225
|
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
11234
11226
|
}
|
|
11235
|
-
if (this.fillMode
|
|
11227
|
+
if (this.fillMode) {
|
|
11236
11228
|
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
|
|
11237
11229
|
}
|
|
11238
11230
|
}
|
|
@@ -11866,12 +11858,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
11866
11858
|
/**
|
|
11867
11859
|
* Renders the column cell content of the MultiColumnComboBox component.
|
|
11868
11860
|
*
|
|
11869
|
-
* To define a column cell template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnCellTemplate` directive inside the [`<kendo-combobox-column>`](
|
|
11870
|
-
* [See example](
|
|
11861
|
+
* To define a column cell template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnCellTemplate` directive inside the [`<kendo-combobox-column>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent) tag.
|
|
11862
|
+
* [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/templates).
|
|
11871
11863
|
*
|
|
11872
11864
|
* The context variables are:
|
|
11873
11865
|
* - `let-dataItem="dataItem"` (`any`)—The current data item. Also available as the implicit context variable.
|
|
11874
|
-
* - `let-column="column"` ([`ColumnComponent`](
|
|
11866
|
+
* - `let-column="column"` ([`ColumnComponent`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent))—The current column configuration object.
|
|
11875
11867
|
*
|
|
11876
11868
|
* @example
|
|
11877
11869
|
* ```html
|
|
@@ -11881,7 +11873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
11881
11873
|
* {{ dataItem[column.field] }}
|
|
11882
11874
|
* </ng-template>
|
|
11883
11875
|
* </kendo-combobox-column>
|
|
11884
|
-
*
|
|
11876
|
+
* </kendo-multicolumncombobox>
|
|
11885
11877
|
* ```
|
|
11886
11878
|
*/
|
|
11887
11879
|
class ColumnCellTemplateDirective {
|
|
@@ -11903,10 +11895,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
11903
11895
|
/**
|
|
11904
11896
|
* Renders the column header content of the MultiColumnComboBox component.
|
|
11905
11897
|
*
|
|
11906
|
-
* To define a column header template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnHeaderTemplate` directive inside the [`<kendo-combobox-column>`](
|
|
11907
|
-
* [See example](
|
|
11898
|
+
* To define a column header template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnHeaderTemplate` directive inside the [`<kendo-combobox-column>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent) tag.
|
|
11899
|
+
* [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/templates).
|
|
11908
11900
|
*
|
|
11909
|
-
* The current [`column`](
|
|
11901
|
+
* The current [`column`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent) is available as the implicit context variable.
|
|
11910
11902
|
*
|
|
11911
11903
|
* @example
|
|
11912
11904
|
* ```html
|
|
@@ -11916,7 +11908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
11916
11908
|
* {{ column.title }}
|
|
11917
11909
|
* </ng-template>
|
|
11918
11910
|
* </kendo-combobox-column>
|
|
11919
|
-
*
|
|
11911
|
+
* </kendo-multicolumncombobox>
|
|
11920
11912
|
* ```
|
|
11921
11913
|
*/
|
|
11922
11914
|
class ColumnHeaderTemplateDirective {
|
|
@@ -11939,13 +11931,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
11939
11931
|
* Represents the column definition for the MultiColumnComboBox component.
|
|
11940
11932
|
*
|
|
11941
11933
|
* Use this component to define columns inside the MultiColumnComboBox.
|
|
11942
|
-
* [See example](
|
|
11934
|
+
* [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox/columns).
|
|
11943
11935
|
*
|
|
11944
11936
|
* @example
|
|
11945
11937
|
* ```html
|
|
11946
11938
|
* <kendo-multicolumncombobox ...>
|
|
11947
11939
|
* <kendo-combobox-column field="name" title="Name" width="200"></kendo-combobox-column>
|
|
11948
|
-
*
|
|
11940
|
+
* </kendo-multicolumncombobox>
|
|
11949
11941
|
* ```
|
|
11950
11942
|
*/
|
|
11951
11943
|
class ComboBoxColumnComponent {
|
|
@@ -12001,7 +11993,7 @@ class ComboBoxColumnComponent {
|
|
|
12001
11993
|
*/
|
|
12002
11994
|
headerClass;
|
|
12003
11995
|
/**
|
|
12004
|
-
* Sets the condition that needs to be satisfied for a column to remain visible. If you set the [`hidden`](
|
|
11996
|
+
* Sets the condition that needs to be satisfied for a column to remain visible. If you set the [`hidden`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent#hidden) property, the behavior of media is overridden.
|
|
12005
11997
|
*/
|
|
12006
11998
|
media;
|
|
12007
11999
|
/**
|
|
@@ -12104,7 +12096,7 @@ const getRowWidthFromColumnsMeta = (columns) => {
|
|
|
12104
12096
|
* Represents the Kendo UI MultiColumnComboBox component for Angular.
|
|
12105
12097
|
*
|
|
12106
12098
|
* Use the `MultiColumnComboBoxComponent` to show a dropdown list with multiple columns.
|
|
12107
|
-
* [See example](
|
|
12099
|
+
* [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multicolumncombobox).
|
|
12108
12100
|
*
|
|
12109
12101
|
* @example
|
|
12110
12102
|
* ```html
|
|
@@ -12978,12 +12970,9 @@ const hasChildren$1 = () => false;
|
|
|
12978
12970
|
const fetchChildren$1 = () => of([]);
|
|
12979
12971
|
const itemDisabled$1 = () => false;
|
|
12980
12972
|
const isNodeVisible$1 = () => true;
|
|
12981
|
-
const DEFAULT_SIZE$1 = 'medium';
|
|
12982
|
-
const DEFAULT_ROUNDED$1 = 'medium';
|
|
12983
|
-
const DEFAULT_FILL_MODE$1 = 'solid';
|
|
12984
12973
|
const stopPropagation = (event) => event.stopImmediatePropagation();
|
|
12985
12974
|
/**
|
|
12986
|
-
* Represents the [Kendo UI DropDownTree component for Angular](
|
|
12975
|
+
* Represents the [Kendo UI DropDownTree component for Angular](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree).
|
|
12987
12976
|
* @example
|
|
12988
12977
|
* ```html
|
|
12989
12978
|
* <kendo-dropdowntree [data]="data" textField="text" valueField="value"></kendo-dropdowntree>
|
|
@@ -13104,7 +13093,7 @@ class DropDownTreeComponent {
|
|
|
13104
13093
|
filterInput;
|
|
13105
13094
|
/**
|
|
13106
13095
|
* Fires each time the popup is about to open
|
|
13107
|
-
* ([see example](
|
|
13096
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/open-state)).
|
|
13108
13097
|
* This event is preventable. If you cancel it, the popup will remain closed.
|
|
13109
13098
|
*/
|
|
13110
13099
|
open = new EventEmitter();
|
|
@@ -13114,7 +13103,7 @@ class DropDownTreeComponent {
|
|
|
13114
13103
|
opened = new EventEmitter();
|
|
13115
13104
|
/**
|
|
13116
13105
|
* Fires each time the popup is about to close
|
|
13117
|
-
* ([see example](
|
|
13106
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/open-state)).
|
|
13118
13107
|
* This event is preventable. If you cancel it, the popup will remain open.
|
|
13119
13108
|
*/
|
|
13120
13109
|
close = new EventEmitter();
|
|
@@ -13140,7 +13129,7 @@ class DropDownTreeComponent {
|
|
|
13140
13129
|
onBlur = new EventEmitter();
|
|
13141
13130
|
/**
|
|
13142
13131
|
* Fires each time the value is changed
|
|
13143
|
-
* ([see example](
|
|
13132
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/events)).
|
|
13144
13133
|
*/
|
|
13145
13134
|
valueChange = new EventEmitter();
|
|
13146
13135
|
/**
|
|
@@ -13183,7 +13172,7 @@ class DropDownTreeComponent {
|
|
|
13183
13172
|
}
|
|
13184
13173
|
/**
|
|
13185
13174
|
* The fields of the data item that provide the text content of the nodes inside the
|
|
13186
|
-
* DropDownTree ([see example](
|
|
13175
|
+
* DropDownTree ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/data-binding)). If the `textField`
|
|
13187
13176
|
* input is set to an array, each hierarchical level uses the field that corresponds
|
|
13188
13177
|
* to the same index in the array, or the last item in the array.
|
|
13189
13178
|
*
|
|
@@ -13192,7 +13181,7 @@ class DropDownTreeComponent {
|
|
|
13192
13181
|
textField;
|
|
13193
13182
|
/**
|
|
13194
13183
|
* The fields of the data item that provide the value of the nodes inside the
|
|
13195
|
-
* DropDownTree ([see example](
|
|
13184
|
+
* DropDownTree ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/data-binding)). If the `valueField`
|
|
13196
13185
|
* input is set to an array, each hierarchical level uses the field that corresponds
|
|
13197
13186
|
* to the same index in the array, or the last item in the array.
|
|
13198
13187
|
*
|
|
@@ -13262,7 +13251,7 @@ class DropDownTreeComponent {
|
|
|
13262
13251
|
}
|
|
13263
13252
|
_listHeight = 200;
|
|
13264
13253
|
/**
|
|
13265
|
-
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](
|
|
13254
|
+
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/forms#managing-the-dropdowntree-disabled-state-in-reactive-forms).
|
|
13266
13255
|
*/
|
|
13267
13256
|
disabled = false;
|
|
13268
13257
|
/**
|
|
@@ -13273,7 +13262,7 @@ class DropDownTreeComponent {
|
|
|
13273
13262
|
readonly = false;
|
|
13274
13263
|
/**
|
|
13275
13264
|
* Specifies the type of the selected value
|
|
13276
|
-
* ([more information and example](
|
|
13265
|
+
* ([more information and example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/value-binding#primitive-values)).
|
|
13277
13266
|
* If set to `true`, the selected value has to be of a primitive value.
|
|
13278
13267
|
*/
|
|
13279
13268
|
valuePrimitive = false;
|
|
@@ -13293,18 +13282,17 @@ class DropDownTreeComponent {
|
|
|
13293
13282
|
*
|
|
13294
13283
|
* The possible values are:
|
|
13295
13284
|
* * `small`
|
|
13296
|
-
* * `medium`
|
|
13285
|
+
* * `medium`
|
|
13297
13286
|
* * `large`
|
|
13298
|
-
* * `none`
|
|
13299
13287
|
*
|
|
13288
|
+
* @default undefined
|
|
13300
13289
|
*/
|
|
13301
13290
|
set size(size) {
|
|
13302
|
-
const newSize = size ? size : DEFAULT_SIZE$1;
|
|
13303
13291
|
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
|
|
13304
|
-
if (size
|
|
13305
|
-
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker',
|
|
13292
|
+
if (size) {
|
|
13293
|
+
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', size));
|
|
13306
13294
|
}
|
|
13307
|
-
this._size =
|
|
13295
|
+
this._size = size;
|
|
13308
13296
|
}
|
|
13309
13297
|
get size() {
|
|
13310
13298
|
return this._size;
|
|
@@ -13314,19 +13302,19 @@ class DropDownTreeComponent {
|
|
|
13314
13302
|
*
|
|
13315
13303
|
* The possible values are:
|
|
13316
13304
|
* * `small`
|
|
13317
|
-
* * `medium`
|
|
13305
|
+
* * `medium`
|
|
13318
13306
|
* * `large`
|
|
13319
13307
|
* * `full`
|
|
13320
13308
|
* * `none`
|
|
13321
13309
|
*
|
|
13310
|
+
* @default undefined
|
|
13322
13311
|
*/
|
|
13323
13312
|
set rounded(rounded) {
|
|
13324
|
-
const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
|
|
13325
13313
|
this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
13326
|
-
if (rounded
|
|
13327
|
-
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(
|
|
13314
|
+
if (rounded) {
|
|
13315
|
+
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
|
|
13328
13316
|
}
|
|
13329
|
-
this._rounded =
|
|
13317
|
+
this._rounded = rounded;
|
|
13330
13318
|
}
|
|
13331
13319
|
get rounded() {
|
|
13332
13320
|
return this._rounded;
|
|
@@ -13336,18 +13324,17 @@ class DropDownTreeComponent {
|
|
|
13336
13324
|
*
|
|
13337
13325
|
* The possible values are:
|
|
13338
13326
|
* * `flat`
|
|
13339
|
-
* * `solid`
|
|
13327
|
+
* * `solid`
|
|
13340
13328
|
* * `outline`
|
|
13341
|
-
* * `none`
|
|
13342
13329
|
*
|
|
13330
|
+
* @default undefined
|
|
13343
13331
|
*/
|
|
13344
13332
|
set fillMode(fillMode) {
|
|
13345
|
-
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
|
|
13346
13333
|
this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
|
|
13347
|
-
if (fillMode
|
|
13348
|
-
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker',
|
|
13334
|
+
if (fillMode) {
|
|
13335
|
+
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', fillMode));
|
|
13349
13336
|
}
|
|
13350
|
-
this._fillMode =
|
|
13337
|
+
this._fillMode = fillMode;
|
|
13351
13338
|
}
|
|
13352
13339
|
get fillMode() {
|
|
13353
13340
|
return this._fillMode;
|
|
@@ -13372,8 +13359,8 @@ class DropDownTreeComponent {
|
|
|
13372
13359
|
loadOnDemand = true;
|
|
13373
13360
|
/**
|
|
13374
13361
|
* Renders the built-in input element for filtering the DropDownTree.
|
|
13375
|
-
* If set to `true`, the component emits the `filterChange` event, which can be used to [filter the DropDownTree manually](
|
|
13376
|
-
* A built-in filtering implementation is available to use with the [`kendoDropDownTreeHierarchyBinding`](
|
|
13362
|
+
* If set to `true`, the component emits the `filterChange` event, which can be used to [filter the DropDownTree manually](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/filtering#manual-filtering).
|
|
13363
|
+
* A built-in filtering implementation is available to use with the [`kendoDropDownTreeHierarchyBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreehierarchybindingdirective) and [`kendoDropDownTreeFlatBinding`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreeflatbindingdirective) directives.
|
|
13377
13364
|
*/
|
|
13378
13365
|
filterable = false;
|
|
13379
13366
|
/**
|
|
@@ -13570,9 +13557,9 @@ class DropDownTreeComponent {
|
|
|
13570
13557
|
_isFocused = false;
|
|
13571
13558
|
_dataItem;
|
|
13572
13559
|
_treeview;
|
|
13573
|
-
_size
|
|
13574
|
-
_rounded
|
|
13575
|
-
_fillMode
|
|
13560
|
+
_size;
|
|
13561
|
+
_rounded;
|
|
13562
|
+
_fillMode;
|
|
13576
13563
|
_searchableNodes = [];
|
|
13577
13564
|
_typedValue = '';
|
|
13578
13565
|
printableCharacters = new Subject();
|
|
@@ -13797,7 +13784,7 @@ class DropDownTreeComponent {
|
|
|
13797
13784
|
}
|
|
13798
13785
|
/**
|
|
13799
13786
|
* Toggles the visibility of the popup or actionSheet.
|
|
13800
|
-
* ([see example](
|
|
13787
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/open-state)).
|
|
13801
13788
|
* If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
|
|
13802
13789
|
*
|
|
13803
13790
|
* @param open - The state of the popup.
|
|
@@ -13929,7 +13916,7 @@ class DropDownTreeComponent {
|
|
|
13929
13916
|
* @hidden
|
|
13930
13917
|
*/
|
|
13931
13918
|
get selectButtonClasses() {
|
|
13932
|
-
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-
|
|
13919
|
+
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-input-' + this.fillMode : ''}`;
|
|
13933
13920
|
}
|
|
13934
13921
|
/**
|
|
13935
13922
|
* @hidden
|
|
@@ -14237,13 +14224,13 @@ class DropDownTreeComponent {
|
|
|
14237
14224
|
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-describedby', newValue);
|
|
14238
14225
|
}
|
|
14239
14226
|
setComponentClasses() {
|
|
14240
|
-
if (this.size
|
|
14227
|
+
if (this.size) {
|
|
14241
14228
|
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('picker', this.size));
|
|
14242
14229
|
}
|
|
14243
|
-
if (this.rounded
|
|
14230
|
+
if (this.rounded) {
|
|
14244
14231
|
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
14245
14232
|
}
|
|
14246
|
-
if (this.fillMode
|
|
14233
|
+
if (this.fillMode) {
|
|
14247
14234
|
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
|
|
14248
14235
|
}
|
|
14249
14236
|
}
|
|
@@ -14307,22 +14294,22 @@ class DropDownTreeComponent {
|
|
|
14307
14294
|
<ng-container kendoDropDownTreeLocalizedMessages
|
|
14308
14295
|
i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
|
|
14309
14296
|
noDataText="NO DATA FOUND"
|
|
14310
|
-
|
|
14297
|
+
|
|
14311
14298
|
i18n-clearTitle="kendo.dropdowntree.clearTitle|The title of the clear button"
|
|
14312
14299
|
clearTitle="clear"
|
|
14313
|
-
|
|
14300
|
+
|
|
14314
14301
|
i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
|
|
14315
14302
|
selectButtonText="Select"
|
|
14316
|
-
|
|
14303
|
+
|
|
14317
14304
|
i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
|
|
14318
14305
|
filterInputLabel="Filter"
|
|
14319
|
-
|
|
14306
|
+
|
|
14320
14307
|
i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
14321
14308
|
popupLabel="Options list"
|
|
14322
|
-
|
|
14309
|
+
|
|
14323
14310
|
i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
14324
14311
|
adaptiveCloseButtonTitle="Close"
|
|
14325
|
-
|
|
14312
|
+
|
|
14326
14313
|
i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
14327
14314
|
filterInputPlaceholder="Filter"
|
|
14328
14315
|
>
|
|
@@ -14385,7 +14372,7 @@ class DropDownTreeComponent {
|
|
|
14385
14372
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
14386
14373
|
</ng-template>
|
|
14387
14374
|
<ng-container #container></ng-container>
|
|
14388
|
-
|
|
14375
|
+
|
|
14389
14376
|
<kendo-adaptive-renderer
|
|
14390
14377
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
14391
14378
|
[title]="adaptiveTitle"
|
|
@@ -14397,7 +14384,7 @@ class DropDownTreeComponent {
|
|
|
14397
14384
|
[searchBarValue]="filter"
|
|
14398
14385
|
[filterable]="filterable">
|
|
14399
14386
|
</kendo-adaptive-renderer>
|
|
14400
|
-
|
|
14387
|
+
|
|
14401
14388
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
14402
14389
|
@if (filterable && !isActionSheetExpanded) {
|
|
14403
14390
|
<span
|
|
@@ -14495,7 +14482,7 @@ class DropDownTreeComponent {
|
|
|
14495
14482
|
</div>
|
|
14496
14483
|
}
|
|
14497
14484
|
</ng-template>
|
|
14498
|
-
|
|
14485
|
+
|
|
14499
14486
|
@if (isOpen || isAdaptiveModeEnabled) {
|
|
14500
14487
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
14501
14488
|
}
|
|
@@ -14538,22 +14525,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
14538
14525
|
<ng-container kendoDropDownTreeLocalizedMessages
|
|
14539
14526
|
i18n-noDataText="kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items"
|
|
14540
14527
|
noDataText="NO DATA FOUND"
|
|
14541
|
-
|
|
14528
|
+
|
|
14542
14529
|
i18n-clearTitle="kendo.dropdowntree.clearTitle|The title of the clear button"
|
|
14543
14530
|
clearTitle="clear"
|
|
14544
|
-
|
|
14531
|
+
|
|
14545
14532
|
i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
|
|
14546
14533
|
selectButtonText="Select"
|
|
14547
|
-
|
|
14534
|
+
|
|
14548
14535
|
i18n-filterInputLabel="kendo.dropdowntree.filterInputLabel|The text set as aria-label on the filter input"
|
|
14549
14536
|
filterInputLabel="Filter"
|
|
14550
|
-
|
|
14537
|
+
|
|
14551
14538
|
i18n-popupLabel="kendo.dropdowntree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
14552
14539
|
popupLabel="Options list"
|
|
14553
|
-
|
|
14540
|
+
|
|
14554
14541
|
i18n-adaptiveCloseButtonTitle="kendo.dropdowntree.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
14555
14542
|
adaptiveCloseButtonTitle="Close"
|
|
14556
|
-
|
|
14543
|
+
|
|
14557
14544
|
i18n-filterInputPlaceholder="kendo.dropdowntree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
14558
14545
|
filterInputPlaceholder="Filter"
|
|
14559
14546
|
>
|
|
@@ -14616,7 +14603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
14616
14603
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
14617
14604
|
</ng-template>
|
|
14618
14605
|
<ng-container #container></ng-container>
|
|
14619
|
-
|
|
14606
|
+
|
|
14620
14607
|
<kendo-adaptive-renderer
|
|
14621
14608
|
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
14622
14609
|
[title]="adaptiveTitle"
|
|
@@ -14628,7 +14615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
14628
14615
|
[searchBarValue]="filter"
|
|
14629
14616
|
[filterable]="filterable">
|
|
14630
14617
|
</kendo-adaptive-renderer>
|
|
14631
|
-
|
|
14618
|
+
|
|
14632
14619
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
14633
14620
|
@if (filterable && !isActionSheetExpanded) {
|
|
14634
14621
|
<span
|
|
@@ -14726,7 +14713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
14726
14713
|
</div>
|
|
14727
14714
|
}
|
|
14728
14715
|
</ng-template>
|
|
14729
|
-
|
|
14716
|
+
|
|
14730
14717
|
@if (isOpen || isAdaptiveModeEnabled) {
|
|
14731
14718
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
14732
14719
|
}
|
|
@@ -15375,11 +15362,8 @@ const hasChildren = () => false;
|
|
|
15375
15362
|
const fetchChildren = () => of([]);
|
|
15376
15363
|
const itemDisabled = () => false;
|
|
15377
15364
|
const isNodeVisible = () => true;
|
|
15378
|
-
const DEFAULT_SIZE = 'medium';
|
|
15379
|
-
const DEFAULT_ROUNDED = 'medium';
|
|
15380
|
-
const DEFAULT_FILL_MODE = 'solid';
|
|
15381
15365
|
/**
|
|
15382
|
-
* Represents the Kendo UI for Angular [MultiSelectTree](
|
|
15366
|
+
* Represents the Kendo UI for Angular [MultiSelectTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree) component.
|
|
15383
15367
|
*
|
|
15384
15368
|
* The `MultiSelectTree` lets you select multiple items from hierarchical data in a tree structure.
|
|
15385
15369
|
* It provides built-in filtering, checkboxes, and adaptive rendering for mobile devices.
|
|
@@ -15629,15 +15613,14 @@ class MultiSelectTreeComponent {
|
|
|
15629
15613
|
/**
|
|
15630
15614
|
* Sets the visual size of the component.
|
|
15631
15615
|
*
|
|
15632
|
-
* @default
|
|
15616
|
+
* @default undefined
|
|
15633
15617
|
*/
|
|
15634
15618
|
set size(size) {
|
|
15635
|
-
const newSize = size ? size : DEFAULT_SIZE;
|
|
15636
15619
|
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
|
|
15637
|
-
if (size
|
|
15638
|
-
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input',
|
|
15620
|
+
if (size) {
|
|
15621
|
+
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
|
|
15639
15622
|
}
|
|
15640
|
-
this._size =
|
|
15623
|
+
this._size = size;
|
|
15641
15624
|
}
|
|
15642
15625
|
get size() {
|
|
15643
15626
|
return this._size;
|
|
@@ -15648,12 +15631,11 @@ class MultiSelectTreeComponent {
|
|
|
15648
15631
|
* @default 'medium'
|
|
15649
15632
|
*/
|
|
15650
15633
|
set rounded(rounded) {
|
|
15651
|
-
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
|
|
15652
15634
|
this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
15653
|
-
if (rounded
|
|
15654
|
-
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(
|
|
15635
|
+
if (rounded) {
|
|
15636
|
+
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
|
|
15655
15637
|
}
|
|
15656
|
-
this._rounded =
|
|
15638
|
+
this._rounded = rounded;
|
|
15657
15639
|
}
|
|
15658
15640
|
get rounded() {
|
|
15659
15641
|
return this._rounded;
|
|
@@ -15664,12 +15646,11 @@ class MultiSelectTreeComponent {
|
|
|
15664
15646
|
* @default 'solid'
|
|
15665
15647
|
*/
|
|
15666
15648
|
set fillMode(fillMode) {
|
|
15667
|
-
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
|
15668
15649
|
this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
|
|
15669
|
-
if (fillMode
|
|
15670
|
-
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input',
|
|
15650
|
+
if (fillMode) {
|
|
15651
|
+
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
|
|
15671
15652
|
}
|
|
15672
|
-
this._fillMode =
|
|
15653
|
+
this._fillMode = fillMode;
|
|
15673
15654
|
}
|
|
15674
15655
|
get fillMode() {
|
|
15675
15656
|
return this._fillMode;
|
|
@@ -15894,7 +15875,7 @@ class MultiSelectTreeComponent {
|
|
|
15894
15875
|
*/
|
|
15895
15876
|
onBlur = new EventEmitter();
|
|
15896
15877
|
/**
|
|
15897
|
-
* Fires when the popup is about to open. ([See example](
|
|
15878
|
+
* Fires when the popup is about to open. ([See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/open-state)).
|
|
15898
15879
|
* This event is preventable. When cancelled, the popup remains closed.
|
|
15899
15880
|
*/
|
|
15900
15881
|
open = new EventEmitter();
|
|
@@ -16132,9 +16113,9 @@ class MultiSelectTreeComponent {
|
|
|
16132
16113
|
_isFocused = false;
|
|
16133
16114
|
_treeview;
|
|
16134
16115
|
_dataItems;
|
|
16135
|
-
_size
|
|
16136
|
-
_rounded
|
|
16137
|
-
_fillMode
|
|
16116
|
+
_size;
|
|
16117
|
+
_rounded;
|
|
16118
|
+
_fillMode;
|
|
16138
16119
|
_searchableNodes = [];
|
|
16139
16120
|
_typedValue = '';
|
|
16140
16121
|
printableCharacters = new Subject();
|
|
@@ -16911,13 +16892,13 @@ class MultiSelectTreeComponent {
|
|
|
16911
16892
|
}, []));
|
|
16912
16893
|
}
|
|
16913
16894
|
setComponentClasses() {
|
|
16914
|
-
if (this.size
|
|
16895
|
+
if (this.size) {
|
|
16915
16896
|
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
|
|
16916
16897
|
}
|
|
16917
|
-
if (this.rounded
|
|
16898
|
+
if (this.rounded) {
|
|
16918
16899
|
this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
|
|
16919
16900
|
}
|
|
16920
|
-
if (this.fillMode
|
|
16901
|
+
if (this.fillMode) {
|
|
16921
16902
|
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
|
|
16922
16903
|
}
|
|
16923
16904
|
}
|
|
@@ -17963,7 +17944,7 @@ const DEFAULT_FILTER_SETTINGS = {
|
|
|
17963
17944
|
/**
|
|
17964
17945
|
* Implements an event handler for the `filterChange` event of a DropDowns component
|
|
17965
17946
|
* which performs simple data filtering.
|
|
17966
|
-
* Currently, the built-in filtering does not work with [grouped data](
|
|
17947
|
+
* Currently, the built-in filtering does not work with [grouped data](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupby).
|
|
17967
17948
|
*
|
|
17968
17949
|
* @example
|
|
17969
17950
|
* ```ts
|
|
@@ -17998,7 +17979,7 @@ class FilterDirective {
|
|
|
17998
17979
|
}
|
|
17999
17980
|
/**
|
|
18000
17981
|
* The configuration object which sets the behavior of the `kendoDropDownFilter` directive.
|
|
18001
|
-
* If no [DropDownFilterSettings](
|
|
17982
|
+
* If no [DropDownFilterSettings](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdownfiltersettings) object is provided to this input, the directive will use the default interface settings.
|
|
18002
17983
|
*/
|
|
18003
17984
|
rawSettings;
|
|
18004
17985
|
/**
|
|
@@ -18086,7 +18067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
18086
18067
|
|
|
18087
18068
|
/**
|
|
18088
18069
|
* Custom component messages override default component messages
|
|
18089
|
-
* ([see example](
|
|
18070
|
+
* ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/globalization#messages)).
|
|
18090
18071
|
*
|
|
18091
18072
|
* @example
|
|
18092
18073
|
* ```html
|
|
@@ -18175,7 +18156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
18175
18156
|
/**
|
|
18176
18157
|
* Configures the MultiSelect to show one summary tag for all selected items.
|
|
18177
18158
|
* Set a number to display the summary tag after the respective number of items are selected.
|
|
18178
|
-
* [See example](
|
|
18159
|
+
* [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode).
|
|
18179
18160
|
*
|
|
18180
18161
|
* @example
|
|
18181
18162
|
* ```ts-no-run
|
|
@@ -18235,7 +18216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
18235
18216
|
/**
|
|
18236
18217
|
* Configures the MultiSelectTree to show one single summary tag for all selected data items.
|
|
18237
18218
|
* When a number is set, the summary tag is shown after the corresponding number of data items are selected (see examples).
|
|
18238
|
-
* See [more information and examples](
|
|
18219
|
+
* See [more information and examples](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multiselecttreesummarytagdirective).
|
|
18239
18220
|
*
|
|
18240
18221
|
* @example
|
|
18241
18222
|
* ```html
|