@progress/kendo-angular-dropdowns 25.0.0-develop.1 → 25.0.0-develop.13
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/fesm2022/progress-kendo-angular-dropdowns.mjs +1129 -577
- package/index.d.ts +123 -70
- package/package-metadata.mjs +2 -2
- package/package.json +11 -10
- package/schematics/ngAdd/index.js +2 -2
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
6
|
+
import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, afterNextRender, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, signal, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
7
7
|
import * as i10 from '@progress/kendo-angular-common';
|
|
8
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, KENDO_WEBMCP_HOST, MultiTabStop, anyChanged, EventsOutsideAngularDirective, scrollbarWidth, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
|
|
9
9
|
export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
|
|
@@ -20,10 +20,10 @@ import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime,
|
|
|
20
20
|
import * as i2 from '@progress/kendo-angular-popup';
|
|
21
21
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
22
22
|
import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
23
|
+
import { CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
|
|
24
|
+
import { checkIcon, searchIcon, xIcon, chevronDownIcon, xCircleIcon } from '@progress/kendo-svg-icons';
|
|
25
|
+
import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
|
|
25
26
|
import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
|
|
26
|
-
import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
|
|
27
27
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
28
28
|
import * as i1$1 from '@progress/kendo-angular-treeview';
|
|
29
29
|
import { TreeViewComponent, SelectDirective, DataBoundComponent, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, ExpandDirective } from '@progress/kendo-angular-treeview';
|
|
@@ -37,8 +37,8 @@ const packageMetadata = {
|
|
|
37
37
|
productName: 'Kendo UI for Angular',
|
|
38
38
|
productCode: 'KENDOUIANGULAR',
|
|
39
39
|
productCodes: ['KENDOUIANGULAR'],
|
|
40
|
-
publishDate:
|
|
41
|
-
version: '25.0.0-develop.
|
|
40
|
+
publishDate: 1785426798,
|
|
41
|
+
version: '25.0.0-develop.13',
|
|
42
42
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
43
43
|
};
|
|
44
44
|
|
|
@@ -211,6 +211,17 @@ const hasProps = (obj, props) => {
|
|
|
211
211
|
}
|
|
212
212
|
return props.every(prop => obj.hasOwnProperty(prop));
|
|
213
213
|
};
|
|
214
|
+
/**
|
|
215
|
+
* @hidden
|
|
216
|
+
*
|
|
217
|
+
* Checks whether an array contains grouped data.
|
|
218
|
+
* GroupResult { aggregates: AggregateResult, field: string, items: object[], value: any }
|
|
219
|
+
* https://www.telerik.com/kendo-angular-ui/components/dataquery/api/GroupResult/
|
|
220
|
+
*/
|
|
221
|
+
const isGroupedData = (data) => {
|
|
222
|
+
return isPresent(data) && data.length > 0 && isPresent(data[0])
|
|
223
|
+
&& hasProps(data[0], ['aggregates', 'field', 'items', 'value']);
|
|
224
|
+
};
|
|
214
225
|
/**
|
|
215
226
|
* @hidden
|
|
216
227
|
*
|
|
@@ -466,12 +477,12 @@ class SearchBarComponent {
|
|
|
466
477
|
get isSuggestable() {
|
|
467
478
|
return this._isSuggestable;
|
|
468
479
|
}
|
|
469
|
-
set
|
|
470
|
-
this.
|
|
480
|
+
set hasListAutocomplete(hasListAutocomplete) {
|
|
481
|
+
this._hasListAutocomplete = hasListAutocomplete;
|
|
471
482
|
this.setAriaAutocomplete();
|
|
472
483
|
}
|
|
473
|
-
get
|
|
474
|
-
return this.
|
|
484
|
+
get hasListAutocomplete() {
|
|
485
|
+
return this._hasListAutocomplete;
|
|
475
486
|
}
|
|
476
487
|
get userInput() {
|
|
477
488
|
return this._userInput;
|
|
@@ -510,7 +521,7 @@ class SearchBarComponent {
|
|
|
510
521
|
ariaControls;
|
|
511
522
|
ariaExpanded = null;
|
|
512
523
|
get attrAriaInvalid() {
|
|
513
|
-
return this.formControl?.invalid ? true : null;
|
|
524
|
+
return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
|
|
514
525
|
}
|
|
515
526
|
set placeholder(text) {
|
|
516
527
|
this._placeholder = text || '';
|
|
@@ -538,7 +549,7 @@ class SearchBarComponent {
|
|
|
538
549
|
_previousValue = "";
|
|
539
550
|
_placeholder = "";
|
|
540
551
|
_isSuggestable = false;
|
|
541
|
-
|
|
552
|
+
_hasListAutocomplete = false;
|
|
542
553
|
renderer;
|
|
543
554
|
subs = new Subscription();
|
|
544
555
|
_inputAttributes;
|
|
@@ -558,7 +569,7 @@ class SearchBarComponent {
|
|
|
558
569
|
'aria-controls': this.ariaControls,
|
|
559
570
|
'aria-activedescendant': this.activeDescendant,
|
|
560
571
|
'aria-busy': this.isLoading,
|
|
561
|
-
'aria-invalid': this.formControl?.invalid
|
|
572
|
+
'aria-invalid': this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)
|
|
562
573
|
};
|
|
563
574
|
}
|
|
564
575
|
get mutableAttributes() {
|
|
@@ -643,16 +654,16 @@ class SearchBarComponent {
|
|
|
643
654
|
}
|
|
644
655
|
}
|
|
645
656
|
setAriaAutocomplete() {
|
|
646
|
-
if (this.
|
|
657
|
+
if (this.hasListAutocomplete) {
|
|
647
658
|
this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'list');
|
|
648
659
|
}
|
|
649
660
|
if (this.isSuggestable) {
|
|
650
661
|
this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'inline');
|
|
651
662
|
}
|
|
652
|
-
if (this.
|
|
663
|
+
if (this.hasListAutocomplete && this.isSuggestable) {
|
|
653
664
|
this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'both');
|
|
654
665
|
}
|
|
655
|
-
if (!this.
|
|
666
|
+
if (!this.hasListAutocomplete && !this.isSuggestable) {
|
|
656
667
|
this.renderer.removeAttribute(this.input.nativeElement, 'aria-autocomplete');
|
|
657
668
|
}
|
|
658
669
|
}
|
|
@@ -702,12 +713,12 @@ class SearchBarComponent {
|
|
|
702
713
|
}
|
|
703
714
|
setInputAttributes() {
|
|
704
715
|
const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
|
|
705
|
-
setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.
|
|
716
|
+
setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
|
|
706
717
|
}
|
|
707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
718
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
719
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: SearchBarComponent, isStandalone: true, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", hasListAutocomplete: "hasListAutocomplete", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
|
|
709
720
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
711
722
|
type: Component,
|
|
712
723
|
args: [{
|
|
713
724
|
selector: 'input[kendoSearchbar]',
|
|
@@ -724,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
724
735
|
type: Input
|
|
725
736
|
}], isSuggestable: [{
|
|
726
737
|
type: Input
|
|
727
|
-
}],
|
|
738
|
+
}], hasListAutocomplete: [{
|
|
728
739
|
type: Input
|
|
729
740
|
}], userInput: [{
|
|
730
741
|
type: Input
|
|
@@ -820,10 +831,10 @@ class ItemTemplateDirective {
|
|
|
820
831
|
constructor(templateRef) {
|
|
821
832
|
this.templateRef = templateRef;
|
|
822
833
|
}
|
|
823
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
824
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
834
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
835
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]", ngImport: i0 });
|
|
825
836
|
}
|
|
826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
837
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
827
838
|
type: Directive,
|
|
828
839
|
args: [{
|
|
829
840
|
selector: '[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]',
|
|
@@ -864,10 +875,10 @@ class HeaderTemplateDirective {
|
|
|
864
875
|
constructor(templateRef) {
|
|
865
876
|
this.templateRef = templateRef;
|
|
866
877
|
}
|
|
867
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
868
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
879
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]", ngImport: i0 });
|
|
869
880
|
}
|
|
870
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
|
|
871
882
|
type: Directive,
|
|
872
883
|
args: [{
|
|
873
884
|
selector: '[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]',
|
|
@@ -908,10 +919,10 @@ class FooterTemplateDirective {
|
|
|
908
919
|
constructor(templateRef) {
|
|
909
920
|
this.templateRef = templateRef;
|
|
910
921
|
}
|
|
911
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
912
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
922
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
923
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]", ngImport: i0 });
|
|
913
924
|
}
|
|
914
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FooterTemplateDirective, decorators: [{
|
|
915
926
|
type: Directive,
|
|
916
927
|
args: [{
|
|
917
928
|
selector: '[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]',
|
|
@@ -958,10 +969,10 @@ class GroupTemplateDirective {
|
|
|
958
969
|
constructor(templateRef) {
|
|
959
970
|
this.templateRef = templateRef;
|
|
960
971
|
}
|
|
961
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
962
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
972
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
973
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: GroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]", ngImport: i0 });
|
|
963
974
|
}
|
|
964
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTemplateDirective, decorators: [{
|
|
965
976
|
type: Directive,
|
|
966
977
|
args: [{
|
|
967
978
|
selector: '[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]',
|
|
@@ -1008,10 +1019,10 @@ class FixedGroupTemplateDirective {
|
|
|
1008
1019
|
constructor(templateRef) {
|
|
1009
1020
|
this.templateRef = templateRef;
|
|
1010
1021
|
}
|
|
1011
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1012
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1022
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FixedGroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1023
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FixedGroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]", ngImport: i0 });
|
|
1013
1024
|
}
|
|
1014
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FixedGroupTemplateDirective, decorators: [{
|
|
1015
1026
|
type: Directive,
|
|
1016
1027
|
args: [{
|
|
1017
1028
|
selector: '[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]',
|
|
@@ -1058,9 +1069,7 @@ class DataService {
|
|
|
1058
1069
|
* Used to determine if the component received grouped data.
|
|
1059
1070
|
*/
|
|
1060
1071
|
isGrouped(data) {
|
|
1061
|
-
|
|
1062
|
-
// https://www.telerik.com/kendo-angular-ui/components/dataquery/api/GroupResult/
|
|
1063
|
-
return (isPresent(data) && data.length !== 0) && isPresent(data[0]) && hasProps(data[0], ['aggregates', 'field', 'items', 'value']);
|
|
1072
|
+
return isGroupedData(data);
|
|
1064
1073
|
}
|
|
1065
1074
|
/**
|
|
1066
1075
|
* @hidden
|
|
@@ -1256,10 +1265,10 @@ class DataService {
|
|
|
1256
1265
|
}
|
|
1257
1266
|
return flat;
|
|
1258
1267
|
}
|
|
1259
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1260
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1268
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1269
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DataService });
|
|
1261
1270
|
}
|
|
1262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DataService, decorators: [{
|
|
1263
1272
|
type: Injectable
|
|
1264
1273
|
}] });
|
|
1265
1274
|
|
|
@@ -1295,10 +1304,10 @@ class DisabledItemsService {
|
|
|
1295
1304
|
}
|
|
1296
1305
|
}
|
|
1297
1306
|
}
|
|
1298
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1299
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DisabledItemsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1308
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DisabledItemsService });
|
|
1300
1309
|
}
|
|
1301
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DisabledItemsService, decorators: [{
|
|
1302
1311
|
type: Injectable
|
|
1303
1312
|
}], ctorParameters: () => [{ type: DataService }] });
|
|
1304
1313
|
|
|
@@ -1453,10 +1462,10 @@ class SelectionService {
|
|
|
1453
1462
|
}
|
|
1454
1463
|
this.unselectMultiple(indicesToBeUnselected);
|
|
1455
1464
|
}
|
|
1456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1457
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1465
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectionService, deps: [{ token: DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1466
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectionService });
|
|
1458
1467
|
}
|
|
1459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectionService, decorators: [{
|
|
1460
1469
|
type: Injectable
|
|
1461
1470
|
}], ctorParameters: () => [{ type: DisabledItemsService }] });
|
|
1462
1471
|
|
|
@@ -1657,10 +1666,10 @@ class NavigationService {
|
|
|
1657
1666
|
return this.disabledItemsService.isIndexDisabled(index);
|
|
1658
1667
|
}
|
|
1659
1668
|
}
|
|
1660
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1661
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1669
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService, deps: [{ token: DisabledItemsService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1670
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService });
|
|
1662
1671
|
}
|
|
1663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService, decorators: [{
|
|
1664
1673
|
type: Injectable
|
|
1665
1674
|
}], ctorParameters: () => [{ type: DisabledItemsService }, { type: SelectionService }] });
|
|
1666
1675
|
|
|
@@ -1697,10 +1706,10 @@ class NoDataTemplateDirective {
|
|
|
1697
1706
|
constructor(templateRef) {
|
|
1698
1707
|
this.templateRef = templateRef;
|
|
1699
1708
|
}
|
|
1700
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1701
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1709
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1710
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]", ngImport: i0 });
|
|
1702
1711
|
}
|
|
1703
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
|
|
1704
1713
|
type: Directive,
|
|
1705
1714
|
args: [{
|
|
1706
1715
|
selector: '[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]',
|
|
@@ -1769,10 +1778,10 @@ class ListItemDirective {
|
|
|
1769
1778
|
constructor(element) {
|
|
1770
1779
|
this.element = element;
|
|
1771
1780
|
}
|
|
1772
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1773
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1782
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
|
|
1774
1783
|
}
|
|
1775
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListItemDirective, decorators: [{
|
|
1776
1785
|
type: Directive,
|
|
1777
1786
|
args: [{
|
|
1778
1787
|
selector: '"li[role=option], li[role=group], li[role=presentation]"',
|
|
@@ -1805,6 +1814,9 @@ class SelectableDirective {
|
|
|
1805
1814
|
if (this.checkboxes.enabled && !this.checkboxes.checkOnClick) {
|
|
1806
1815
|
return;
|
|
1807
1816
|
}
|
|
1817
|
+
if (this.index === -2) {
|
|
1818
|
+
return;
|
|
1819
|
+
}
|
|
1808
1820
|
if (this.multipleSelection) {
|
|
1809
1821
|
if (this.selectionService.isSelected(this.index)) {
|
|
1810
1822
|
this.selectionService.deselect(this.index);
|
|
@@ -1817,10 +1829,10 @@ class SelectableDirective {
|
|
|
1817
1829
|
this.selectionService.change(this.index);
|
|
1818
1830
|
}
|
|
1819
1831
|
}
|
|
1820
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1821
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1832
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1833
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: SelectableDirective, isStandalone: true, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", isMultiselect: "isMultiselect", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
|
|
1822
1834
|
}
|
|
1823
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1835
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectableDirective, decorators: [{
|
|
1824
1836
|
type: Directive,
|
|
1825
1837
|
args: [{
|
|
1826
1838
|
selector: '[kendoDropDownsSelectable]',
|
|
@@ -1888,10 +1900,10 @@ class CustomItemTemplateDirective {
|
|
|
1888
1900
|
constructor(templateRef) {
|
|
1889
1901
|
this.templateRef = templateRef;
|
|
1890
1902
|
}
|
|
1891
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1892
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1903
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1904
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: CustomItemTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
|
|
1893
1905
|
}
|
|
1894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1906
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
|
|
1895
1907
|
type: Directive,
|
|
1896
1908
|
args: [{
|
|
1897
1909
|
selector: '[kendoMultiSelectCustomItemTemplate]',
|
|
@@ -1911,6 +1923,7 @@ class ListComponent {
|
|
|
1911
1923
|
zone;
|
|
1912
1924
|
renderer;
|
|
1913
1925
|
localization;
|
|
1926
|
+
injector;
|
|
1914
1927
|
selected = [];
|
|
1915
1928
|
focused = -1;
|
|
1916
1929
|
textField;
|
|
@@ -1927,14 +1940,21 @@ class ListComponent {
|
|
|
1927
1940
|
type = 'list';
|
|
1928
1941
|
checkboxes = { enabled: false };
|
|
1929
1942
|
ariaLive;
|
|
1943
|
+
ariaLabel;
|
|
1930
1944
|
isMultiselect;
|
|
1931
1945
|
isActionSheetExpanded;
|
|
1932
1946
|
showStickyHeader;
|
|
1933
1947
|
rowWidth;
|
|
1948
|
+
columnsWidths;
|
|
1934
1949
|
customItemTemplate;
|
|
1935
1950
|
text;
|
|
1936
1951
|
allowCustom;
|
|
1937
1952
|
defaultItem;
|
|
1953
|
+
selectAll = false;
|
|
1954
|
+
selectAllText;
|
|
1955
|
+
isAllSelected = false;
|
|
1956
|
+
isPartiallySelected = false;
|
|
1957
|
+
selectAllClick = new EventEmitter();
|
|
1938
1958
|
set data(data) {
|
|
1939
1959
|
this._data = data[0]?.header ? data.slice(0) : data;
|
|
1940
1960
|
if (this.dataService.grouped) {
|
|
@@ -1955,12 +1975,12 @@ class ListComponent {
|
|
|
1955
1975
|
}
|
|
1956
1976
|
set size(size) {
|
|
1957
1977
|
if (this.type === 'list') {
|
|
1958
|
-
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.
|
|
1978
|
+
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this._size));
|
|
1959
1979
|
if (size) {
|
|
1960
1980
|
this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', size));
|
|
1961
1981
|
}
|
|
1962
|
-
this._size = size;
|
|
1963
1982
|
}
|
|
1983
|
+
this._size = size;
|
|
1964
1984
|
}
|
|
1965
1985
|
get size() {
|
|
1966
1986
|
return this._size;
|
|
@@ -1992,6 +2012,7 @@ class ListComponent {
|
|
|
1992
2012
|
scrollSubscription;
|
|
1993
2013
|
selectSubscription;
|
|
1994
2014
|
_size;
|
|
2015
|
+
selectAllCheckboxState = false;
|
|
1995
2016
|
get pageSize() {
|
|
1996
2017
|
if (this.virtual.pageSize) {
|
|
1997
2018
|
return this.virtual.pageSize;
|
|
@@ -2021,8 +2042,14 @@ class ListComponent {
|
|
|
2021
2042
|
get checkboxClasses() {
|
|
2022
2043
|
return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
|
|
2023
2044
|
}
|
|
2045
|
+
/**
|
|
2046
|
+
* @hidden
|
|
2047
|
+
*/
|
|
2048
|
+
isSelectAllFocused() {
|
|
2049
|
+
return this.selectionService.isFocused(-2);
|
|
2050
|
+
}
|
|
2024
2051
|
/* tslint:disable:member-ordering */
|
|
2025
|
-
constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization) {
|
|
2052
|
+
constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization, injector) {
|
|
2026
2053
|
this.dataService = dataService;
|
|
2027
2054
|
this.wrapper = wrapper;
|
|
2028
2055
|
this.selectionService = selectionService;
|
|
@@ -2031,12 +2058,14 @@ class ListComponent {
|
|
|
2031
2058
|
this.zone = zone;
|
|
2032
2059
|
this.renderer = renderer;
|
|
2033
2060
|
this.localization = localization;
|
|
2061
|
+
this.injector = injector;
|
|
2034
2062
|
this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
|
|
2035
2063
|
.pipe(
|
|
2036
2064
|
// handle only the very last onSelect/onFocus emission
|
|
2037
2065
|
switchMap(event => this.zone.onStable.pipe(take(1), map(() => event))))
|
|
2038
2066
|
.subscribe(this.scrollToItem.bind(this));
|
|
2039
2067
|
this.prepareClasses();
|
|
2068
|
+
this.initSelectAllCheckboxState();
|
|
2040
2069
|
}
|
|
2041
2070
|
ngOnChanges(changes) {
|
|
2042
2071
|
if (isChanged('data', changes, false)) {
|
|
@@ -2052,6 +2081,9 @@ class ListComponent {
|
|
|
2052
2081
|
if (isChanged('type', changes, false)) {
|
|
2053
2082
|
this.prepareClasses();
|
|
2054
2083
|
}
|
|
2084
|
+
if (isChanged('isAllSelected', changes, false) || isChanged('isPartiallySelected', changes, false)) {
|
|
2085
|
+
this.updateSelectAllCheckboxState();
|
|
2086
|
+
}
|
|
2055
2087
|
}
|
|
2056
2088
|
ngAfterViewInit() {
|
|
2057
2089
|
this.setComponentClasses();
|
|
@@ -2081,8 +2113,8 @@ class ListComponent {
|
|
|
2081
2113
|
this.scrollSubscription.unsubscribe();
|
|
2082
2114
|
}
|
|
2083
2115
|
}
|
|
2084
|
-
|
|
2085
|
-
const isChecked =
|
|
2116
|
+
onCheckboxStateChange(state, index) {
|
|
2117
|
+
const isChecked = state === true;
|
|
2086
2118
|
if (isChecked && !this.selectionService.isSelected(index)) {
|
|
2087
2119
|
this.selectionService.add(index);
|
|
2088
2120
|
}
|
|
@@ -2090,6 +2122,13 @@ class ListComponent {
|
|
|
2090
2122
|
this.selectionService.deselect(index);
|
|
2091
2123
|
}
|
|
2092
2124
|
}
|
|
2125
|
+
handleSelectAllClick() {
|
|
2126
|
+
const newState = !this.isAllSelected;
|
|
2127
|
+
this.selectAllClick.emit(newState);
|
|
2128
|
+
}
|
|
2129
|
+
handleSelectAllStateChange(state) {
|
|
2130
|
+
this.selectAllClick.emit(state);
|
|
2131
|
+
}
|
|
2093
2132
|
prepareClasses() {
|
|
2094
2133
|
if (this.type === 'list') {
|
|
2095
2134
|
this.listContentClass = 'k-list-content';
|
|
@@ -2273,6 +2312,10 @@ class ListComponent {
|
|
|
2273
2312
|
isItemSelected(index) {
|
|
2274
2313
|
return this.selectionService.isSelected(index) || null;
|
|
2275
2314
|
}
|
|
2315
|
+
itemAriaSelected(index) {
|
|
2316
|
+
const selected = this.isItemSelected(index);
|
|
2317
|
+
return this.type === 'list' ? (selected ?? false) : selected;
|
|
2318
|
+
}
|
|
2276
2319
|
get isDisabledDefaultItem() {
|
|
2277
2320
|
return this.disabledItemsService.isItemDisabled(this.defaultItem);
|
|
2278
2321
|
}
|
|
@@ -2284,8 +2327,10 @@ class ListComponent {
|
|
|
2284
2327
|
*/
|
|
2285
2328
|
setOverflow() {
|
|
2286
2329
|
if (this.virtual) {
|
|
2287
|
-
|
|
2288
|
-
|
|
2330
|
+
afterNextRender(() => {
|
|
2331
|
+
const overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
|
|
2332
|
+
this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
|
|
2333
|
+
}, { injector: this.injector });
|
|
2289
2334
|
}
|
|
2290
2335
|
}
|
|
2291
2336
|
/**
|
|
@@ -2299,7 +2344,7 @@ class ListComponent {
|
|
|
2299
2344
|
positionItems() {
|
|
2300
2345
|
this.items.forEach((item, index) => {
|
|
2301
2346
|
const offsetY = (index + this.startFrom) * this.virtual.itemHeight;
|
|
2302
|
-
this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px`);
|
|
2347
|
+
this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px)`);
|
|
2303
2348
|
});
|
|
2304
2349
|
}
|
|
2305
2350
|
setComponentClasses() {
|
|
@@ -2311,13 +2356,57 @@ class ListComponent {
|
|
|
2311
2356
|
}
|
|
2312
2357
|
if (this.type === 'dropdowngrid') {
|
|
2313
2358
|
this.renderer.setStyle(this.wrapper.nativeElement, 'overflow-y', 'scroll');
|
|
2359
|
+
if (this.size) {
|
|
2360
|
+
this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
|
|
2361
|
+
}
|
|
2314
2362
|
}
|
|
2315
2363
|
if (isPresent(this.virtual)) {
|
|
2316
2364
|
this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
|
|
2317
2365
|
}
|
|
2318
2366
|
}
|
|
2319
|
-
|
|
2320
|
-
|
|
2367
|
+
updateSelectAllCheckboxState() {
|
|
2368
|
+
if (this.isAllSelected) {
|
|
2369
|
+
this.selectAllCheckboxState = true;
|
|
2370
|
+
}
|
|
2371
|
+
else if (this.isPartiallySelected) {
|
|
2372
|
+
this.selectAllCheckboxState = 'indeterminate';
|
|
2373
|
+
}
|
|
2374
|
+
else {
|
|
2375
|
+
this.selectAllCheckboxState = false;
|
|
2376
|
+
}
|
|
2377
|
+
}
|
|
2378
|
+
initSelectAllCheckboxState() {
|
|
2379
|
+
this.updateSelectAllCheckboxState();
|
|
2380
|
+
}
|
|
2381
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
2382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", ariaLabel: "ariaLabel", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", columnsWidths: "columnsWidths", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", selectAll: "selectAll", selectAllText: "selectAllText", isAllSelected: "isAllSelected", isPartiallySelected: "isPartiallySelected", data: "data", size: "size", rounded: "rounded" }, outputs: { selectAllClick: "selectAllClick", onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
2383
|
+
@if (selectAll) {
|
|
2384
|
+
<div class="k-list-sticky-header">
|
|
2385
|
+
<div
|
|
2386
|
+
class="k-list-sticky-header-item"
|
|
2387
|
+
[class.k-selected]="!checkboxes.enabled && isAllSelected"
|
|
2388
|
+
[class.k-focus]="isSelectAllFocused()"
|
|
2389
|
+
kendoDropDownsSelectable
|
|
2390
|
+
[checkboxes]="checkboxes"
|
|
2391
|
+
[index]="-2"
|
|
2392
|
+
tabindex="0"
|
|
2393
|
+
[attr.aria-selected]="isAllSelected"
|
|
2394
|
+
[attr.aria-label]="selectAllText"
|
|
2395
|
+
(click)="handleSelectAllClick()">
|
|
2396
|
+
@if (checkboxes.enabled) {
|
|
2397
|
+
<kendo-checkbox
|
|
2398
|
+
[checkedState]="selectAllCheckboxState"
|
|
2399
|
+
[ngClass]="checkboxClasses"
|
|
2400
|
+
[inputAttributes]="{ 'aria-label': selectAllText }"
|
|
2401
|
+
(click)="$event.stopPropagation()"
|
|
2402
|
+
(checkedStateChange)="handleSelectAllStateChange($event)"
|
|
2403
|
+
>
|
|
2404
|
+
</kendo-checkbox>
|
|
2405
|
+
}
|
|
2406
|
+
<span class="k-list-item-text">{{ selectAllText }}</span>
|
|
2407
|
+
</div>
|
|
2408
|
+
</div>
|
|
2409
|
+
}
|
|
2321
2410
|
@if (defaultItem && !template) {
|
|
2322
2411
|
<div
|
|
2323
2412
|
class="k-list-optionlabel"
|
|
@@ -2387,11 +2476,12 @@ class ListComponent {
|
|
|
2387
2476
|
[style.maxHeight.px]="height"
|
|
2388
2477
|
unselectable="on"
|
|
2389
2478
|
(scroll)="popupListScroll.emit($event)"
|
|
2390
|
-
[attr.role]="dataService.grouped ? 'listbox' : null"
|
|
2391
|
-
[attr.id]="dataService.grouped ? id : null"
|
|
2392
|
-
[attr.aria-live]="dataService.grouped ? ariaLive : null"
|
|
2393
|
-
[attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
|
|
2394
|
-
[attr.aria-hidden]="dataService.grouped ? !show : null"
|
|
2479
|
+
[attr.role]="(dataService.grouped && type === 'list') ? 'listbox' : null"
|
|
2480
|
+
[attr.id]="(dataService.grouped && type === 'list') ? id : null"
|
|
2481
|
+
[attr.aria-live]="(dataService.grouped && type === 'list') ? ariaLive : null"
|
|
2482
|
+
[attr.aria-multiselectable]="(dataService.grouped && type === 'list') ? isMultiselect : null"
|
|
2483
|
+
[attr.aria-hidden]="(dataService.grouped && type === 'list') ? (!show ? true : null) : null"
|
|
2484
|
+
[attr.aria-label]="(dataService.grouped && type === 'list') ? (ariaLabel || null) : null"
|
|
2395
2485
|
>
|
|
2396
2486
|
@if (!dataService.grouped) {
|
|
2397
2487
|
<ul #list
|
|
@@ -2400,7 +2490,8 @@ class ListComponent {
|
|
|
2400
2490
|
[attr.id]="id"
|
|
2401
2491
|
[attr.aria-live]="ariaLive"
|
|
2402
2492
|
[attr.aria-multiselectable]="isMultiselect"
|
|
2403
|
-
[attr.aria-hidden]="!show"
|
|
2493
|
+
[attr.aria-hidden]="!show ? true : null"
|
|
2494
|
+
[attr.aria-label]="ariaLabel || null">
|
|
2404
2495
|
@for (dataItem of data; track $index; let itemIndex = $index) {
|
|
2405
2496
|
<li
|
|
2406
2497
|
role="option"
|
|
@@ -2411,7 +2502,7 @@ class ListComponent {
|
|
|
2411
2502
|
[multipleSelection]="multipleSelection"
|
|
2412
2503
|
[attr.id]="optionPrefix + '-' + itemIndex"
|
|
2413
2504
|
[attr.tabIndex]="-1"
|
|
2414
|
-
[attr.aria-selected]="
|
|
2505
|
+
[attr.aria-selected]="itemAriaSelected(itemIndex)"
|
|
2415
2506
|
[class]="listItemClass"
|
|
2416
2507
|
[ngClass]="{
|
|
2417
2508
|
'k-disabled': isDisabled(itemIndex),
|
|
@@ -2420,15 +2511,14 @@ class ListComponent {
|
|
|
2420
2511
|
[style.width.px]="rowWidth ?? null"
|
|
2421
2512
|
>
|
|
2422
2513
|
@if (checkboxes.enabled) {
|
|
2423
|
-
<
|
|
2424
|
-
|
|
2425
|
-
class="k-checkbox"
|
|
2514
|
+
<kendo-checkbox
|
|
2515
|
+
[checkedState]="isChecked(itemIndex)"
|
|
2426
2516
|
role="presentation"
|
|
2427
|
-
tabindex="-1"
|
|
2517
|
+
[tabindex]="-1"
|
|
2428
2518
|
[ngClass]="checkboxClasses"
|
|
2429
|
-
(
|
|
2430
|
-
|
|
2431
|
-
|
|
2519
|
+
(checkedStateChange)="onCheckboxStateChange($event, itemIndex + startFrom)"
|
|
2520
|
+
>
|
|
2521
|
+
</kendo-checkbox>
|
|
2432
2522
|
}
|
|
2433
2523
|
@if (template) {
|
|
2434
2524
|
<ng-template
|
|
@@ -2452,7 +2542,7 @@ class ListComponent {
|
|
|
2452
2542
|
</ul>
|
|
2453
2543
|
}
|
|
2454
2544
|
|
|
2455
|
-
@if (dataService.grouped) {
|
|
2545
|
+
@if (dataService.grouped && type === 'list') {
|
|
2456
2546
|
<ng-container #list>
|
|
2457
2547
|
@for (dataItem of groupedData; track dataItem.groupIndex) {
|
|
2458
2548
|
<ul
|
|
@@ -2499,7 +2589,7 @@ class ListComponent {
|
|
|
2499
2589
|
[attr.absolute-index]="item.index"
|
|
2500
2590
|
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
2501
2591
|
[attr.tabIndex]="-1"
|
|
2502
|
-
[attr.aria-selected]="
|
|
2592
|
+
[attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
|
|
2503
2593
|
[class]="listItemClass"
|
|
2504
2594
|
[ngClass]="{
|
|
2505
2595
|
'k-disabled': isDisabled(item.offsetIndex),
|
|
@@ -2529,21 +2619,130 @@ class ListComponent {
|
|
|
2529
2619
|
}
|
|
2530
2620
|
</ng-container>
|
|
2531
2621
|
}
|
|
2622
|
+
|
|
2623
|
+
@if (dataService.grouped && type === 'dropdowngrid') {
|
|
2624
|
+
<ul #list
|
|
2625
|
+
[attr.role]="'listbox'"
|
|
2626
|
+
[class]="listClass"
|
|
2627
|
+
[attr.id]="id"
|
|
2628
|
+
[attr.aria-live]="ariaLive"
|
|
2629
|
+
[attr.aria-label]="ariaLabel || null">
|
|
2630
|
+
@if (columnsWidths?.length) {
|
|
2631
|
+
<div
|
|
2632
|
+
role="presentation"
|
|
2633
|
+
aria-hidden="true"
|
|
2634
|
+
[style.display]="'table-column-group'"
|
|
2635
|
+
>
|
|
2636
|
+
@for (columnWidth of columnsWidths; track $index) {
|
|
2637
|
+
<div [style.display]="'table-column'" [style.width.px]="columnWidth ?? null"></div>
|
|
2638
|
+
}
|
|
2639
|
+
</div>
|
|
2640
|
+
}
|
|
2641
|
+
@for (dataItem of groupedData; track dataItem.groupIndex) {
|
|
2642
|
+
@if (dataItem.header) {
|
|
2643
|
+
<li
|
|
2644
|
+
role="presentation"
|
|
2645
|
+
[class]="listGroupItemClass"
|
|
2646
|
+
[attr.group-index]="dataItem.index"
|
|
2647
|
+
[style.width.px]="rowWidth ?? null"
|
|
2648
|
+
>
|
|
2649
|
+
<span [class]="listGroupItemTextClass">
|
|
2650
|
+
@if (groupTemplate) {
|
|
2651
|
+
<ng-template
|
|
2652
|
+
[templateContext]="{
|
|
2653
|
+
templateRef: groupTemplate.templateRef,
|
|
2654
|
+
$implicit: dataItem.value
|
|
2655
|
+
}">
|
|
2656
|
+
</ng-template>
|
|
2657
|
+
}
|
|
2658
|
+
@if (!groupTemplate) {
|
|
2659
|
+
{{ dataItem.value }}
|
|
2660
|
+
}
|
|
2661
|
+
</span>
|
|
2662
|
+
</li>
|
|
2663
|
+
}
|
|
2664
|
+
@for (item of dataItem.items; track item.offsetIndex) {
|
|
2665
|
+
<li
|
|
2666
|
+
role="option"
|
|
2667
|
+
kendoDropDownsSelectable
|
|
2668
|
+
[height]="virtual?.itemHeight"
|
|
2669
|
+
[index]="item.offsetIndex"
|
|
2670
|
+
[multipleSelection]="multipleSelection"
|
|
2671
|
+
[attr.absolute-index]="item.index"
|
|
2672
|
+
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
2673
|
+
[attr.tabIndex]="-1"
|
|
2674
|
+
[attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
|
|
2675
|
+
[class]="listItemClass"
|
|
2676
|
+
[ngClass]="{
|
|
2677
|
+
'k-disabled': isDisabled(item.offsetIndex),
|
|
2678
|
+
'k-table-alt-row': isAltRow(item.index - 1)
|
|
2679
|
+
}"
|
|
2680
|
+
[style.width.px]="rowWidth ?? null">
|
|
2681
|
+
@if (template) {
|
|
2682
|
+
<ng-template
|
|
2683
|
+
[templateContext]="{
|
|
2684
|
+
templateRef: template.templateRef,
|
|
2685
|
+
$implicit: item.value
|
|
2686
|
+
}">
|
|
2687
|
+
</ng-template>
|
|
2688
|
+
}
|
|
2689
|
+
@if (!template) {
|
|
2690
|
+
<span class="k-list-item-text">{{ getText(item.value) }}</span>
|
|
2691
|
+
}
|
|
2692
|
+
</li>
|
|
2693
|
+
}
|
|
2694
|
+
}
|
|
2695
|
+
@if (!virtual) {
|
|
2696
|
+
<kendo-resize-sensor
|
|
2697
|
+
(resize)="listResize.emit()"
|
|
2698
|
+
>
|
|
2699
|
+
</kendo-resize-sensor>
|
|
2700
|
+
}
|
|
2701
|
+
</ul>
|
|
2702
|
+
}
|
|
2532
2703
|
@if (virtual) {
|
|
2533
|
-
<div #virtualContainer class="k-height-container"
|
|
2704
|
+
<div #virtualContainer class="k-height-container">
|
|
2534
2705
|
<div [style.height.px]="scrollHeight">
|
|
2535
2706
|
<kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
|
|
2536
2707
|
</div>
|
|
2537
2708
|
</div>
|
|
2538
2709
|
}
|
|
2539
2710
|
</div>
|
|
2540
|
-
|
|
2711
|
+
<ng-content select=".k-no-data"></ng-content>
|
|
2712
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group], li[role=presentation]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
|
|
2541
2713
|
}
|
|
2542
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2714
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListComponent, decorators: [{
|
|
2543
2715
|
type: Component,
|
|
2544
2716
|
args: [{
|
|
2545
2717
|
selector: 'kendo-list',
|
|
2546
2718
|
template: `
|
|
2719
|
+
@if (selectAll) {
|
|
2720
|
+
<div class="k-list-sticky-header">
|
|
2721
|
+
<div
|
|
2722
|
+
class="k-list-sticky-header-item"
|
|
2723
|
+
[class.k-selected]="!checkboxes.enabled && isAllSelected"
|
|
2724
|
+
[class.k-focus]="isSelectAllFocused()"
|
|
2725
|
+
kendoDropDownsSelectable
|
|
2726
|
+
[checkboxes]="checkboxes"
|
|
2727
|
+
[index]="-2"
|
|
2728
|
+
tabindex="0"
|
|
2729
|
+
[attr.aria-selected]="isAllSelected"
|
|
2730
|
+
[attr.aria-label]="selectAllText"
|
|
2731
|
+
(click)="handleSelectAllClick()">
|
|
2732
|
+
@if (checkboxes.enabled) {
|
|
2733
|
+
<kendo-checkbox
|
|
2734
|
+
[checkedState]="selectAllCheckboxState"
|
|
2735
|
+
[ngClass]="checkboxClasses"
|
|
2736
|
+
[inputAttributes]="{ 'aria-label': selectAllText }"
|
|
2737
|
+
(click)="$event.stopPropagation()"
|
|
2738
|
+
(checkedStateChange)="handleSelectAllStateChange($event)"
|
|
2739
|
+
>
|
|
2740
|
+
</kendo-checkbox>
|
|
2741
|
+
}
|
|
2742
|
+
<span class="k-list-item-text">{{ selectAllText }}</span>
|
|
2743
|
+
</div>
|
|
2744
|
+
</div>
|
|
2745
|
+
}
|
|
2547
2746
|
@if (defaultItem && !template) {
|
|
2548
2747
|
<div
|
|
2549
2748
|
class="k-list-optionlabel"
|
|
@@ -2613,11 +2812,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2613
2812
|
[style.maxHeight.px]="height"
|
|
2614
2813
|
unselectable="on"
|
|
2615
2814
|
(scroll)="popupListScroll.emit($event)"
|
|
2616
|
-
[attr.role]="dataService.grouped ? 'listbox' : null"
|
|
2617
|
-
[attr.id]="dataService.grouped ? id : null"
|
|
2618
|
-
[attr.aria-live]="dataService.grouped ? ariaLive : null"
|
|
2619
|
-
[attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
|
|
2620
|
-
[attr.aria-hidden]="dataService.grouped ? !show : null"
|
|
2815
|
+
[attr.role]="(dataService.grouped && type === 'list') ? 'listbox' : null"
|
|
2816
|
+
[attr.id]="(dataService.grouped && type === 'list') ? id : null"
|
|
2817
|
+
[attr.aria-live]="(dataService.grouped && type === 'list') ? ariaLive : null"
|
|
2818
|
+
[attr.aria-multiselectable]="(dataService.grouped && type === 'list') ? isMultiselect : null"
|
|
2819
|
+
[attr.aria-hidden]="(dataService.grouped && type === 'list') ? (!show ? true : null) : null"
|
|
2820
|
+
[attr.aria-label]="(dataService.grouped && type === 'list') ? (ariaLabel || null) : null"
|
|
2621
2821
|
>
|
|
2622
2822
|
@if (!dataService.grouped) {
|
|
2623
2823
|
<ul #list
|
|
@@ -2626,7 +2826,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2626
2826
|
[attr.id]="id"
|
|
2627
2827
|
[attr.aria-live]="ariaLive"
|
|
2628
2828
|
[attr.aria-multiselectable]="isMultiselect"
|
|
2629
|
-
[attr.aria-hidden]="!show"
|
|
2829
|
+
[attr.aria-hidden]="!show ? true : null"
|
|
2830
|
+
[attr.aria-label]="ariaLabel || null">
|
|
2630
2831
|
@for (dataItem of data; track $index; let itemIndex = $index) {
|
|
2631
2832
|
<li
|
|
2632
2833
|
role="option"
|
|
@@ -2637,7 +2838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2637
2838
|
[multipleSelection]="multipleSelection"
|
|
2638
2839
|
[attr.id]="optionPrefix + '-' + itemIndex"
|
|
2639
2840
|
[attr.tabIndex]="-1"
|
|
2640
|
-
[attr.aria-selected]="
|
|
2841
|
+
[attr.aria-selected]="itemAriaSelected(itemIndex)"
|
|
2641
2842
|
[class]="listItemClass"
|
|
2642
2843
|
[ngClass]="{
|
|
2643
2844
|
'k-disabled': isDisabled(itemIndex),
|
|
@@ -2646,15 +2847,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2646
2847
|
[style.width.px]="rowWidth ?? null"
|
|
2647
2848
|
>
|
|
2648
2849
|
@if (checkboxes.enabled) {
|
|
2649
|
-
<
|
|
2650
|
-
|
|
2651
|
-
class="k-checkbox"
|
|
2850
|
+
<kendo-checkbox
|
|
2851
|
+
[checkedState]="isChecked(itemIndex)"
|
|
2652
2852
|
role="presentation"
|
|
2653
|
-
tabindex="-1"
|
|
2853
|
+
[tabindex]="-1"
|
|
2654
2854
|
[ngClass]="checkboxClasses"
|
|
2655
|
-
(
|
|
2656
|
-
|
|
2657
|
-
|
|
2855
|
+
(checkedStateChange)="onCheckboxStateChange($event, itemIndex + startFrom)"
|
|
2856
|
+
>
|
|
2857
|
+
</kendo-checkbox>
|
|
2658
2858
|
}
|
|
2659
2859
|
@if (template) {
|
|
2660
2860
|
<ng-template
|
|
@@ -2678,7 +2878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2678
2878
|
</ul>
|
|
2679
2879
|
}
|
|
2680
2880
|
|
|
2681
|
-
@if (dataService.grouped) {
|
|
2881
|
+
@if (dataService.grouped && type === 'list') {
|
|
2682
2882
|
<ng-container #list>
|
|
2683
2883
|
@for (dataItem of groupedData; track dataItem.groupIndex) {
|
|
2684
2884
|
<ul
|
|
@@ -2725,7 +2925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2725
2925
|
[attr.absolute-index]="item.index"
|
|
2726
2926
|
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
2727
2927
|
[attr.tabIndex]="-1"
|
|
2728
|
-
[attr.aria-selected]="
|
|
2928
|
+
[attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
|
|
2729
2929
|
[class]="listItemClass"
|
|
2730
2930
|
[ngClass]="{
|
|
2731
2931
|
'k-disabled': isDisabled(item.offsetIndex),
|
|
@@ -2755,19 +2955,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2755
2955
|
}
|
|
2756
2956
|
</ng-container>
|
|
2757
2957
|
}
|
|
2958
|
+
|
|
2959
|
+
@if (dataService.grouped && type === 'dropdowngrid') {
|
|
2960
|
+
<ul #list
|
|
2961
|
+
[attr.role]="'listbox'"
|
|
2962
|
+
[class]="listClass"
|
|
2963
|
+
[attr.id]="id"
|
|
2964
|
+
[attr.aria-live]="ariaLive"
|
|
2965
|
+
[attr.aria-label]="ariaLabel || null">
|
|
2966
|
+
@if (columnsWidths?.length) {
|
|
2967
|
+
<div
|
|
2968
|
+
role="presentation"
|
|
2969
|
+
aria-hidden="true"
|
|
2970
|
+
[style.display]="'table-column-group'"
|
|
2971
|
+
>
|
|
2972
|
+
@for (columnWidth of columnsWidths; track $index) {
|
|
2973
|
+
<div [style.display]="'table-column'" [style.width.px]="columnWidth ?? null"></div>
|
|
2974
|
+
}
|
|
2975
|
+
</div>
|
|
2976
|
+
}
|
|
2977
|
+
@for (dataItem of groupedData; track dataItem.groupIndex) {
|
|
2978
|
+
@if (dataItem.header) {
|
|
2979
|
+
<li
|
|
2980
|
+
role="presentation"
|
|
2981
|
+
[class]="listGroupItemClass"
|
|
2982
|
+
[attr.group-index]="dataItem.index"
|
|
2983
|
+
[style.width.px]="rowWidth ?? null"
|
|
2984
|
+
>
|
|
2985
|
+
<span [class]="listGroupItemTextClass">
|
|
2986
|
+
@if (groupTemplate) {
|
|
2987
|
+
<ng-template
|
|
2988
|
+
[templateContext]="{
|
|
2989
|
+
templateRef: groupTemplate.templateRef,
|
|
2990
|
+
$implicit: dataItem.value
|
|
2991
|
+
}">
|
|
2992
|
+
</ng-template>
|
|
2993
|
+
}
|
|
2994
|
+
@if (!groupTemplate) {
|
|
2995
|
+
{{ dataItem.value }}
|
|
2996
|
+
}
|
|
2997
|
+
</span>
|
|
2998
|
+
</li>
|
|
2999
|
+
}
|
|
3000
|
+
@for (item of dataItem.items; track item.offsetIndex) {
|
|
3001
|
+
<li
|
|
3002
|
+
role="option"
|
|
3003
|
+
kendoDropDownsSelectable
|
|
3004
|
+
[height]="virtual?.itemHeight"
|
|
3005
|
+
[index]="item.offsetIndex"
|
|
3006
|
+
[multipleSelection]="multipleSelection"
|
|
3007
|
+
[attr.absolute-index]="item.index"
|
|
3008
|
+
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
3009
|
+
[attr.tabIndex]="-1"
|
|
3010
|
+
[attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
|
|
3011
|
+
[class]="listItemClass"
|
|
3012
|
+
[ngClass]="{
|
|
3013
|
+
'k-disabled': isDisabled(item.offsetIndex),
|
|
3014
|
+
'k-table-alt-row': isAltRow(item.index - 1)
|
|
3015
|
+
}"
|
|
3016
|
+
[style.width.px]="rowWidth ?? null">
|
|
3017
|
+
@if (template) {
|
|
3018
|
+
<ng-template
|
|
3019
|
+
[templateContext]="{
|
|
3020
|
+
templateRef: template.templateRef,
|
|
3021
|
+
$implicit: item.value
|
|
3022
|
+
}">
|
|
3023
|
+
</ng-template>
|
|
3024
|
+
}
|
|
3025
|
+
@if (!template) {
|
|
3026
|
+
<span class="k-list-item-text">{{ getText(item.value) }}</span>
|
|
3027
|
+
}
|
|
3028
|
+
</li>
|
|
3029
|
+
}
|
|
3030
|
+
}
|
|
3031
|
+
@if (!virtual) {
|
|
3032
|
+
<kendo-resize-sensor
|
|
3033
|
+
(resize)="listResize.emit()"
|
|
3034
|
+
>
|
|
3035
|
+
</kendo-resize-sensor>
|
|
3036
|
+
}
|
|
3037
|
+
</ul>
|
|
3038
|
+
}
|
|
2758
3039
|
@if (virtual) {
|
|
2759
|
-
<div #virtualContainer class="k-height-container"
|
|
3040
|
+
<div #virtualContainer class="k-height-container">
|
|
2760
3041
|
<div [style.height.px]="scrollHeight">
|
|
2761
3042
|
<kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
|
|
2762
3043
|
</div>
|
|
2763
3044
|
</div>
|
|
2764
3045
|
}
|
|
2765
3046
|
</div>
|
|
3047
|
+
<ng-content select=".k-no-data"></ng-content>
|
|
2766
3048
|
`,
|
|
2767
3049
|
standalone: true,
|
|
2768
|
-
imports: [NgStyle, TemplateContextDirective, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent]
|
|
3050
|
+
imports: [NgStyle, TemplateContextDirective, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent, CheckBoxComponent]
|
|
2769
3051
|
}]
|
|
2770
|
-
}], ctorParameters: () => [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { selected: [{
|
|
3052
|
+
}], ctorParameters: () => [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.Injector }], propDecorators: { selected: [{
|
|
2771
3053
|
type: Input
|
|
2772
3054
|
}], focused: [{
|
|
2773
3055
|
type: Input
|
|
@@ -2799,6 +3081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2799
3081
|
type: Input
|
|
2800
3082
|
}], ariaLive: [{
|
|
2801
3083
|
type: Input
|
|
3084
|
+
}], ariaLabel: [{
|
|
3085
|
+
type: Input
|
|
2802
3086
|
}], isMultiselect: [{
|
|
2803
3087
|
type: Input
|
|
2804
3088
|
}], isActionSheetExpanded: [{
|
|
@@ -2807,6 +3091,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2807
3091
|
type: Input
|
|
2808
3092
|
}], rowWidth: [{
|
|
2809
3093
|
type: Input
|
|
3094
|
+
}], columnsWidths: [{
|
|
3095
|
+
type: Input
|
|
2810
3096
|
}], customItemTemplate: [{
|
|
2811
3097
|
type: Input
|
|
2812
3098
|
}], text: [{
|
|
@@ -2815,6 +3101,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
2815
3101
|
type: Input
|
|
2816
3102
|
}], defaultItem: [{
|
|
2817
3103
|
type: Input
|
|
3104
|
+
}], selectAll: [{
|
|
3105
|
+
type: Input
|
|
3106
|
+
}], selectAllText: [{
|
|
3107
|
+
type: Input
|
|
3108
|
+
}], isAllSelected: [{
|
|
3109
|
+
type: Input
|
|
3110
|
+
}], isPartiallySelected: [{
|
|
3111
|
+
type: Input
|
|
3112
|
+
}], selectAllClick: [{
|
|
3113
|
+
type: Output
|
|
2818
3114
|
}], data: [{
|
|
2819
3115
|
type: Input
|
|
2820
3116
|
}], size: [{
|
|
@@ -2878,6 +3174,7 @@ class AdaptiveRendererComponent {
|
|
|
2878
3174
|
placeholder;
|
|
2879
3175
|
searchBarValue;
|
|
2880
3176
|
filterable;
|
|
3177
|
+
showListContainer = true;
|
|
2881
3178
|
closePopup = new EventEmitter();
|
|
2882
3179
|
textInputChange = new EventEmitter();
|
|
2883
3180
|
navigate = new EventEmitter();
|
|
@@ -2890,6 +3187,7 @@ class AdaptiveRendererComponent {
|
|
|
2890
3187
|
}
|
|
2891
3188
|
animationDuration = animationDuration;
|
|
2892
3189
|
checkIcon = checkIcon;
|
|
3190
|
+
searchIcon = searchIcon;
|
|
2893
3191
|
expanded = false;
|
|
2894
3192
|
messageFor(key) {
|
|
2895
3193
|
return this.localization.get(key);
|
|
@@ -2914,8 +3212,8 @@ class AdaptiveRendererComponent {
|
|
|
2914
3212
|
get windowSize() {
|
|
2915
3213
|
return this.adaptiveService.size;
|
|
2916
3214
|
}
|
|
2917
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2918
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3215
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3216
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable", showListContainer: "showListContainer" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
|
|
2919
3217
|
<kendo-actionsheet
|
|
2920
3218
|
#actionSheet
|
|
2921
3219
|
[animation]="{ duration: animationDuration }"
|
|
@@ -2934,7 +3232,7 @@ class AdaptiveRendererComponent {
|
|
|
2934
3232
|
(collapse)="closePopup.emit()"
|
|
2935
3233
|
>
|
|
2936
3234
|
<ng-template kendoActionSheetTemplate>
|
|
2937
|
-
<div class="k-
|
|
3235
|
+
<div class="k-actionsheet-titlebar">
|
|
2938
3236
|
<div class="k-actionsheet-titlebar-group">
|
|
2939
3237
|
<div class="k-actionsheet-title">
|
|
2940
3238
|
@if (title) {
|
|
@@ -2950,6 +3248,7 @@ class AdaptiveRendererComponent {
|
|
|
2950
3248
|
icon="check"
|
|
2951
3249
|
type="button"
|
|
2952
3250
|
[attr.title]="messageFor('adaptiveCloseButtonTitle')"
|
|
3251
|
+
[attr.aria-label]="messageFor('adaptiveCloseButtonTitle')"
|
|
2953
3252
|
[svgIcon]="checkIcon"
|
|
2954
3253
|
fillMode="flat"
|
|
2955
3254
|
themeColor="primary"
|
|
@@ -2967,13 +3266,13 @@ class AdaptiveRendererComponent {
|
|
|
2967
3266
|
[value]="searchBarValue || ''"
|
|
2968
3267
|
size="large"
|
|
2969
3268
|
[placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
|
|
2970
|
-
|
|
3269
|
+
[inputAttributes]="{'aria-label': title}"
|
|
2971
3270
|
autocomplete="off"
|
|
2972
3271
|
(valueChange)="onValueChange($event)"
|
|
2973
3272
|
>
|
|
2974
3273
|
@if (filterable) {
|
|
2975
3274
|
<ng-template kendoTextBoxPrefixTemplate>
|
|
2976
|
-
<kendo-icon name="search"></kendo-icon>
|
|
3275
|
+
<kendo-icon-wrapper name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
|
|
2977
3276
|
</ng-template>
|
|
2978
3277
|
}
|
|
2979
3278
|
</kendo-textbox>
|
|
@@ -2981,15 +3280,19 @@ class AdaptiveRendererComponent {
|
|
|
2981
3280
|
}
|
|
2982
3281
|
</div>
|
|
2983
3282
|
<div class="k-actionsheet-content">
|
|
3283
|
+
@if (showListContainer) {
|
|
2984
3284
|
<div class="k-list-container">
|
|
2985
3285
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
2986
3286
|
</div>
|
|
3287
|
+
} @else {
|
|
3288
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
3289
|
+
}
|
|
2987
3290
|
</div>
|
|
2988
3291
|
</ng-template>
|
|
2989
3292
|
</kendo-actionsheet>
|
|
2990
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type:
|
|
3293
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
2991
3294
|
}
|
|
2992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
|
|
2993
3296
|
type: Component,
|
|
2994
3297
|
args: [{
|
|
2995
3298
|
selector: 'kendo-adaptive-renderer',
|
|
@@ -3012,7 +3315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3012
3315
|
(collapse)="closePopup.emit()"
|
|
3013
3316
|
>
|
|
3014
3317
|
<ng-template kendoActionSheetTemplate>
|
|
3015
|
-
<div class="k-
|
|
3318
|
+
<div class="k-actionsheet-titlebar">
|
|
3016
3319
|
<div class="k-actionsheet-titlebar-group">
|
|
3017
3320
|
<div class="k-actionsheet-title">
|
|
3018
3321
|
@if (title) {
|
|
@@ -3028,6 +3331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3028
3331
|
icon="check"
|
|
3029
3332
|
type="button"
|
|
3030
3333
|
[attr.title]="messageFor('adaptiveCloseButtonTitle')"
|
|
3334
|
+
[attr.aria-label]="messageFor('adaptiveCloseButtonTitle')"
|
|
3031
3335
|
[svgIcon]="checkIcon"
|
|
3032
3336
|
fillMode="flat"
|
|
3033
3337
|
themeColor="primary"
|
|
@@ -3045,13 +3349,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3045
3349
|
[value]="searchBarValue || ''"
|
|
3046
3350
|
size="large"
|
|
3047
3351
|
[placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
|
|
3048
|
-
|
|
3352
|
+
[inputAttributes]="{'aria-label': title}"
|
|
3049
3353
|
autocomplete="off"
|
|
3050
3354
|
(valueChange)="onValueChange($event)"
|
|
3051
3355
|
>
|
|
3052
3356
|
@if (filterable) {
|
|
3053
3357
|
<ng-template kendoTextBoxPrefixTemplate>
|
|
3054
|
-
<kendo-icon name="search"></kendo-icon>
|
|
3358
|
+
<kendo-icon-wrapper name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
|
|
3055
3359
|
</ng-template>
|
|
3056
3360
|
}
|
|
3057
3361
|
</kendo-textbox>
|
|
@@ -3059,15 +3363,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3059
3363
|
}
|
|
3060
3364
|
</div>
|
|
3061
3365
|
<div class="k-actionsheet-content">
|
|
3366
|
+
@if (showListContainer) {
|
|
3062
3367
|
<div class="k-list-container">
|
|
3063
3368
|
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
3064
3369
|
</div>
|
|
3370
|
+
} @else {
|
|
3371
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
3372
|
+
}
|
|
3065
3373
|
</div>
|
|
3066
3374
|
</ng-template>
|
|
3067
3375
|
</kendo-actionsheet>
|
|
3068
3376
|
`,
|
|
3069
3377
|
standalone: true,
|
|
3070
|
-
imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective,
|
|
3378
|
+
imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, NgTemplateOutlet]
|
|
3071
3379
|
}]
|
|
3072
3380
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i7.AdaptiveService }], propDecorators: { title: [{
|
|
3073
3381
|
type: Input
|
|
@@ -3085,6 +3393,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3085
3393
|
type: Input
|
|
3086
3394
|
}], filterable: [{
|
|
3087
3395
|
type: Input
|
|
3396
|
+
}], showListContainer: [{
|
|
3397
|
+
type: Input
|
|
3088
3398
|
}], closePopup: [{
|
|
3089
3399
|
type: Output
|
|
3090
3400
|
}], textInputChange: [{
|
|
@@ -3183,10 +3493,10 @@ class SharedDropDownEventsDirective {
|
|
|
3183
3493
|
ngOnDestroy() {
|
|
3184
3494
|
this.subscriptions.unsubscribe();
|
|
3185
3495
|
}
|
|
3186
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3187
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
3496
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SharedDropDownEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3497
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: SharedDropDownEventsDirective, isStandalone: true, selector: "[kendoDropDownSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
|
|
3188
3498
|
}
|
|
3189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3499
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SharedDropDownEventsDirective, decorators: [{
|
|
3190
3500
|
type: Directive,
|
|
3191
3501
|
args: [{
|
|
3192
3502
|
selector: '[kendoDropDownSharedEvents]',
|
|
@@ -3219,15 +3529,19 @@ class Messages extends ComponentMessages {
|
|
|
3219
3529
|
*/
|
|
3220
3530
|
clearTitle;
|
|
3221
3531
|
/**
|
|
3222
|
-
* The text
|
|
3532
|
+
* The text of the Select All item in the popup.
|
|
3533
|
+
*/
|
|
3534
|
+
selectAllText;
|
|
3535
|
+
/**
|
|
3536
|
+
* The text of the Check All checkbox label in the tree popup.
|
|
3223
3537
|
*/
|
|
3224
3538
|
checkAllText;
|
|
3225
3539
|
/**
|
|
3226
|
-
|
|
3540
|
+
* The text set as aria-label on the select button. Available for DropDownList, ComboBox, MultiColumnComboBox, and DropDownTree.
|
|
3227
3541
|
*/
|
|
3228
3542
|
selectButtonText;
|
|
3229
3543
|
/**
|
|
3230
|
-
|
|
3544
|
+
* The text set as aria-label on the list filter input. Available for DropDownList, DropDownTree, and MultiSelectTree.
|
|
3231
3545
|
*/
|
|
3232
3546
|
filterInputLabel;
|
|
3233
3547
|
/**
|
|
@@ -3239,11 +3553,15 @@ class Messages extends ComponentMessages {
|
|
|
3239
3553
|
*/
|
|
3240
3554
|
adaptiveCloseButtonTitle;
|
|
3241
3555
|
/**
|
|
3242
|
-
|
|
3556
|
+
* The text for the input's placeholder when filtering is enabled. Available for DropDownTree and MultiSelectTree.
|
|
3243
3557
|
*/
|
|
3244
3558
|
filterInputPlaceholder;
|
|
3245
3559
|
/**
|
|
3246
|
-
|
|
3560
|
+
* The accessible label of the tag list element that contains the selected items. Available for MultiSelect and MultiSelectTree.
|
|
3561
|
+
*/
|
|
3562
|
+
chipListLabel;
|
|
3563
|
+
/**
|
|
3564
|
+
* The text displayed when the user types a custom value that is not in the list of options. Available for ComboBox and MultiSelect.
|
|
3247
3565
|
*
|
|
3248
3566
|
* The text includes a localizable string and the custom value.
|
|
3249
3567
|
* For example, when adding a custom value **Test**, the default text is **Use "Test"**.
|
|
@@ -3252,15 +3570,25 @@ class Messages extends ComponentMessages {
|
|
|
3252
3570
|
* Use `{customValue}` to insert the value, for example, **Add: {customValue}**.
|
|
3253
3571
|
*/
|
|
3254
3572
|
useCustomValueText;
|
|
3255
|
-
|
|
3256
|
-
|
|
3573
|
+
/**
|
|
3574
|
+
* The accessible label of the listbox that contains the list of options. Available for DropDownList, ComboBox, MultiColumnComboBox, AutoComplete, and MultiSelect.
|
|
3575
|
+
*/
|
|
3576
|
+
listboxLabel;
|
|
3577
|
+
/**
|
|
3578
|
+
* The accessible label of the input element. Available for MultiSelectTree.
|
|
3579
|
+
*/
|
|
3580
|
+
inputLabel;
|
|
3581
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
3582
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: Messages, isStandalone: true, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", selectAllText: "selectAllText", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", chipListLabel: "chipListLabel", useCustomValueText: "useCustomValueText", listboxLabel: "listboxLabel", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
|
|
3257
3583
|
}
|
|
3258
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: Messages, decorators: [{
|
|
3259
3585
|
type: Directive
|
|
3260
3586
|
}], propDecorators: { noDataText: [{
|
|
3261
3587
|
type: Input
|
|
3262
3588
|
}], clearTitle: [{
|
|
3263
3589
|
type: Input
|
|
3590
|
+
}], selectAllText: [{
|
|
3591
|
+
type: Input
|
|
3264
3592
|
}], checkAllText: [{
|
|
3265
3593
|
type: Input
|
|
3266
3594
|
}], selectButtonText: [{
|
|
@@ -3273,8 +3601,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
3273
3601
|
type: Input
|
|
3274
3602
|
}], filterInputPlaceholder: [{
|
|
3275
3603
|
type: Input
|
|
3604
|
+
}], chipListLabel: [{
|
|
3605
|
+
type: Input
|
|
3276
3606
|
}], useCustomValueText: [{
|
|
3277
3607
|
type: Input
|
|
3608
|
+
}], listboxLabel: [{
|
|
3609
|
+
type: Input
|
|
3610
|
+
}], inputLabel: [{
|
|
3611
|
+
type: Input
|
|
3278
3612
|
}] } });
|
|
3279
3613
|
|
|
3280
3614
|
/**
|
|
@@ -3286,15 +3620,15 @@ class LocalizedMessagesDirective extends Messages {
|
|
|
3286
3620
|
super();
|
|
3287
3621
|
this.service = service;
|
|
3288
3622
|
}
|
|
3289
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3290
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
3623
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3624
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n ", providers: [
|
|
3291
3625
|
{
|
|
3292
3626
|
provide: Messages,
|
|
3293
3627
|
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
3294
3628
|
}
|
|
3295
3629
|
], usesInheritance: true, ngImport: i0 });
|
|
3296
3630
|
}
|
|
3297
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
3298
3632
|
type: Directive,
|
|
3299
3633
|
args: [{
|
|
3300
3634
|
providers: [
|
|
@@ -3431,7 +3765,7 @@ class AutoCompleteComponent {
|
|
|
3431
3765
|
* @hidden
|
|
3432
3766
|
*/
|
|
3433
3767
|
get ariaControls() {
|
|
3434
|
-
return this.isOpen ? this.listBoxId : undefined;
|
|
3768
|
+
return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
|
|
3435
3769
|
}
|
|
3436
3770
|
/**
|
|
3437
3771
|
* @hidden
|
|
@@ -4451,8 +4785,8 @@ class AutoCompleteComponent {
|
|
|
4451
4785
|
this.togglePopup(false);
|
|
4452
4786
|
}
|
|
4453
4787
|
}
|
|
4454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4788
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4789
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
|
|
4456
4790
|
AUTOCOMPLETE_VALUE_ACCESSOR,
|
|
4457
4791
|
DataService,
|
|
4458
4792
|
SelectionService,
|
|
@@ -4485,6 +4819,9 @@ class AutoCompleteComponent {
|
|
|
4485
4819
|
|
|
4486
4820
|
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"
|
|
4487
4821
|
adaptiveCloseButtonTitle="Close"
|
|
4822
|
+
|
|
4823
|
+
i18n-listboxLabel="kendo.autocomplete.listboxLabel|The accessible label of the list of suggestions"
|
|
4824
|
+
listboxLabel="Suggestions"
|
|
4488
4825
|
>
|
|
4489
4826
|
</ng-container>
|
|
4490
4827
|
|
|
@@ -4506,9 +4843,9 @@ class AutoCompleteComponent {
|
|
|
4506
4843
|
}
|
|
4507
4844
|
<input
|
|
4508
4845
|
kendoSearchbar
|
|
4509
|
-
[ariaExpanded]="isOpen"
|
|
4846
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
4510
4847
|
[isSuggestable]="suggest"
|
|
4511
|
-
[
|
|
4848
|
+
[hasListAutocomplete]="filterable"
|
|
4512
4849
|
[isLoading]="isLoading"
|
|
4513
4850
|
[ariaControls]="ariaControls"
|
|
4514
4851
|
[id]="focusableId"
|
|
@@ -4604,24 +4941,25 @@ class AutoCompleteComponent {
|
|
|
4604
4941
|
[show]="isOpen"
|
|
4605
4942
|
[virtual]="virtual"
|
|
4606
4943
|
[showStickyHeader]="showStickyHeader"
|
|
4944
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
4607
4945
|
(pageChange)="pageChange($event)"
|
|
4608
4946
|
>
|
|
4947
|
+
<!--no-data template-->
|
|
4948
|
+
@if (data.length === 0) {
|
|
4949
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
4950
|
+
@if (noDataTemplate) {
|
|
4951
|
+
<ng-template
|
|
4952
|
+
[templateContext]="{
|
|
4953
|
+
templateRef: noDataTemplate?.templateRef
|
|
4954
|
+
}">
|
|
4955
|
+
</ng-template>
|
|
4956
|
+
}
|
|
4957
|
+
@if (!noDataTemplate) {
|
|
4958
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
4959
|
+
}
|
|
4960
|
+
</div>
|
|
4961
|
+
}
|
|
4609
4962
|
</kendo-list>
|
|
4610
|
-
<!--no-data template-->
|
|
4611
|
-
@if (data.length === 0) {
|
|
4612
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
4613
|
-
@if (noDataTemplate) {
|
|
4614
|
-
<ng-template
|
|
4615
|
-
[templateContext]="{
|
|
4616
|
-
templateRef: noDataTemplate?.templateRef
|
|
4617
|
-
}">
|
|
4618
|
-
</ng-template>
|
|
4619
|
-
}
|
|
4620
|
-
@if (!noDataTemplate) {
|
|
4621
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
4622
|
-
}
|
|
4623
|
-
</div>
|
|
4624
|
-
}
|
|
4625
4963
|
<!--footer template-->
|
|
4626
4964
|
@if (footerTemplate) {
|
|
4627
4965
|
<ng-template
|
|
@@ -4631,9 +4969,9 @@ class AutoCompleteComponent {
|
|
|
4631
4969
|
</ng-template>
|
|
4632
4970
|
}
|
|
4633
4971
|
</ng-template>
|
|
4634
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "
|
|
4972
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
|
|
4635
4973
|
}
|
|
4636
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
4637
4975
|
type: Component,
|
|
4638
4976
|
args: [{
|
|
4639
4977
|
exportAs: 'kendoAutoComplete',
|
|
@@ -4672,6 +5010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4672
5010
|
|
|
4673
5011
|
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"
|
|
4674
5012
|
adaptiveCloseButtonTitle="Close"
|
|
5013
|
+
|
|
5014
|
+
i18n-listboxLabel="kendo.autocomplete.listboxLabel|The accessible label of the list of suggestions"
|
|
5015
|
+
listboxLabel="Suggestions"
|
|
4675
5016
|
>
|
|
4676
5017
|
</ng-container>
|
|
4677
5018
|
|
|
@@ -4693,9 +5034,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4693
5034
|
}
|
|
4694
5035
|
<input
|
|
4695
5036
|
kendoSearchbar
|
|
4696
|
-
[ariaExpanded]="isOpen"
|
|
5037
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
4697
5038
|
[isSuggestable]="suggest"
|
|
4698
|
-
[
|
|
5039
|
+
[hasListAutocomplete]="filterable"
|
|
4699
5040
|
[isLoading]="isLoading"
|
|
4700
5041
|
[ariaControls]="ariaControls"
|
|
4701
5042
|
[id]="focusableId"
|
|
@@ -4791,24 +5132,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
4791
5132
|
[show]="isOpen"
|
|
4792
5133
|
[virtual]="virtual"
|
|
4793
5134
|
[showStickyHeader]="showStickyHeader"
|
|
5135
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
4794
5136
|
(pageChange)="pageChange($event)"
|
|
4795
5137
|
>
|
|
5138
|
+
<!--no-data template-->
|
|
5139
|
+
@if (data.length === 0) {
|
|
5140
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
5141
|
+
@if (noDataTemplate) {
|
|
5142
|
+
<ng-template
|
|
5143
|
+
[templateContext]="{
|
|
5144
|
+
templateRef: noDataTemplate?.templateRef
|
|
5145
|
+
}">
|
|
5146
|
+
</ng-template>
|
|
5147
|
+
}
|
|
5148
|
+
@if (!noDataTemplate) {
|
|
5149
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
5150
|
+
}
|
|
5151
|
+
</div>
|
|
5152
|
+
}
|
|
4796
5153
|
</kendo-list>
|
|
4797
|
-
<!--no-data template-->
|
|
4798
|
-
@if (data.length === 0) {
|
|
4799
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
4800
|
-
@if (noDataTemplate) {
|
|
4801
|
-
<ng-template
|
|
4802
|
-
[templateContext]="{
|
|
4803
|
-
templateRef: noDataTemplate?.templateRef
|
|
4804
|
-
}">
|
|
4805
|
-
</ng-template>
|
|
4806
|
-
}
|
|
4807
|
-
@if (!noDataTemplate) {
|
|
4808
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
4809
|
-
}
|
|
4810
|
-
</div>
|
|
4811
|
-
}
|
|
4812
5154
|
<!--footer template-->
|
|
4813
5155
|
@if (footerTemplate) {
|
|
4814
5156
|
<ng-template
|
|
@@ -5092,7 +5434,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5092
5434
|
* @hidden
|
|
5093
5435
|
*/
|
|
5094
5436
|
get ariaControls() {
|
|
5095
|
-
return this.isOpen ? this.listBoxId : undefined;
|
|
5437
|
+
return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
|
|
5096
5438
|
}
|
|
5097
5439
|
/**
|
|
5098
5440
|
* @hidden
|
|
@@ -5915,7 +6257,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
5915
6257
|
* @hidden
|
|
5916
6258
|
*/
|
|
5917
6259
|
get selectButtonClasses() {
|
|
5918
|
-
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''}`;
|
|
6260
|
+
return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.disabled ? 'k-disabled' : ''}`;
|
|
5919
6261
|
}
|
|
5920
6262
|
/**
|
|
5921
6263
|
* @hidden
|
|
@@ -6182,7 +6524,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6182
6524
|
this.zone.run(() => {
|
|
6183
6525
|
if (valueHasChanged) {
|
|
6184
6526
|
const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
|
|
6185
|
-
if (lowerCaseMatch || unresolvedSelection) {
|
|
6527
|
+
if ((lowerCaseMatch && this.shouldResolveSuggestedItem(currentText)) || unresolvedSelection) {
|
|
6186
6528
|
this.selectionService.change(this.selectionService.focused);
|
|
6187
6529
|
}
|
|
6188
6530
|
else {
|
|
@@ -6315,6 +6657,9 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6315
6657
|
const itemText = getter(this.dataService.itemAt(focused), this.textField);
|
|
6316
6658
|
return !isPresent(itemText) ? "" : itemText.toString();
|
|
6317
6659
|
}
|
|
6660
|
+
shouldResolveSuggestedItem(currentText) {
|
|
6661
|
+
return !(this.allowCustom && this.suggest && this.focusedItemText !== currentText);
|
|
6662
|
+
}
|
|
6318
6663
|
/**
|
|
6319
6664
|
* Focuses the first match when there's text in the input field, but no focused item.
|
|
6320
6665
|
*/
|
|
@@ -6503,7 +6848,7 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6503
6848
|
this.zone.run(() => {
|
|
6504
6849
|
if (valueHasChanged) {
|
|
6505
6850
|
const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
|
|
6506
|
-
if (lowerCaseMatch || unresolvedSelection) {
|
|
6851
|
+
if ((lowerCaseMatch && this.shouldResolveSuggestedItem(currentText)) || unresolvedSelection) {
|
|
6507
6852
|
this.selectionService.change(this.selectionService.focused);
|
|
6508
6853
|
}
|
|
6509
6854
|
else {
|
|
@@ -6519,8 +6864,8 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6519
6864
|
this.togglePopup(false);
|
|
6520
6865
|
}
|
|
6521
6866
|
}
|
|
6522
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6523
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
6867
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6868
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
|
|
6524
6869
|
COMBOBOX_VALUE_ACCESSOR,
|
|
6525
6870
|
DataService,
|
|
6526
6871
|
SelectionService,
|
|
@@ -6557,6 +6902,12 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6557
6902
|
|
|
6558
6903
|
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"
|
|
6559
6904
|
adaptiveCloseButtonTitle="Close"
|
|
6905
|
+
|
|
6906
|
+
i18n-listboxLabel="kendo.combobox.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
6907
|
+
listboxLabel="Options"
|
|
6908
|
+
|
|
6909
|
+
i18n-useCustomValueText="kendo.combobox.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
|
|
6910
|
+
useCustomValueText="{{ 'Use "{customValue}"' }}"
|
|
6560
6911
|
>
|
|
6561
6912
|
</ng-container>
|
|
6562
6913
|
|
|
@@ -6578,12 +6929,12 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6578
6929
|
}
|
|
6579
6930
|
<input
|
|
6580
6931
|
kendoSearchbar
|
|
6581
|
-
[ariaExpanded]="isOpen"
|
|
6932
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
6582
6933
|
[ariaControls]="ariaControls"
|
|
6583
6934
|
[id]="focusableId"
|
|
6584
6935
|
[isLoading]="loading"
|
|
6585
6936
|
[isSuggestable]="suggest"
|
|
6586
|
-
[
|
|
6937
|
+
[hasListAutocomplete]="filterable"
|
|
6587
6938
|
[activeDescendant]="activeDescendant"
|
|
6588
6939
|
[userInput]="text"
|
|
6589
6940
|
[suggestedText]="getSuggestion()"
|
|
@@ -6603,7 +6954,6 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6603
6954
|
<span
|
|
6604
6955
|
class="k-clear-value"
|
|
6605
6956
|
[style.visibility]="clearButtonVisibility"
|
|
6606
|
-
aria-hidden="true"
|
|
6607
6957
|
[attr.title]="messageFor('clearTitle')"
|
|
6608
6958
|
(click)="clearValue($event)"
|
|
6609
6959
|
[kendoEventsOutsideAngular]="{
|
|
@@ -6698,24 +7048,27 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6698
7048
|
[show]="isOpen"
|
|
6699
7049
|
[virtual]="virtual"
|
|
6700
7050
|
[showStickyHeader]="showStickyHeader"
|
|
7051
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
7052
|
+
[text]="text"
|
|
7053
|
+
[allowCustom]="allowCustom"
|
|
6701
7054
|
(pageChange)="pageChange($event)"
|
|
6702
7055
|
>
|
|
7056
|
+
<!--no-data template-->
|
|
7057
|
+
@if (data.length === 0) {
|
|
7058
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
7059
|
+
@if (noDataTemplate) {
|
|
7060
|
+
<ng-template
|
|
7061
|
+
[templateContext]="{
|
|
7062
|
+
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
7063
|
+
}">
|
|
7064
|
+
</ng-template>
|
|
7065
|
+
}
|
|
7066
|
+
@if (!noDataTemplate) {
|
|
7067
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
7068
|
+
}
|
|
7069
|
+
</div>
|
|
7070
|
+
}
|
|
6703
7071
|
</kendo-list>
|
|
6704
|
-
<!--no-data template-->
|
|
6705
|
-
@if (data.length === 0) {
|
|
6706
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
6707
|
-
@if (noDataTemplate) {
|
|
6708
|
-
<ng-template
|
|
6709
|
-
[templateContext]="{
|
|
6710
|
-
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
6711
|
-
}">
|
|
6712
|
-
</ng-template>
|
|
6713
|
-
}
|
|
6714
|
-
@if (!noDataTemplate) {
|
|
6715
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
6716
|
-
}
|
|
6717
|
-
</div>
|
|
6718
|
-
}
|
|
6719
7072
|
<!--footer template-->
|
|
6720
7073
|
@if (footerTemplate) {
|
|
6721
7074
|
<ng-template
|
|
@@ -6725,9 +7078,9 @@ class ComboBoxComponent extends MultiTabStop {
|
|
|
6725
7078
|
</ng-template>
|
|
6726
7079
|
}
|
|
6727
7080
|
</ng-template>
|
|
6728
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "
|
|
7081
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
|
|
6729
7082
|
}
|
|
6730
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
7083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxComponent, decorators: [{
|
|
6731
7084
|
type: Component,
|
|
6732
7085
|
args: [{
|
|
6733
7086
|
exportAs: 'kendoComboBox',
|
|
@@ -6770,6 +7123,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
6770
7123
|
|
|
6771
7124
|
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"
|
|
6772
7125
|
adaptiveCloseButtonTitle="Close"
|
|
7126
|
+
|
|
7127
|
+
i18n-listboxLabel="kendo.combobox.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
7128
|
+
listboxLabel="Options"
|
|
7129
|
+
|
|
7130
|
+
i18n-useCustomValueText="kendo.combobox.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
|
|
7131
|
+
useCustomValueText="{{ 'Use "{customValue}"' }}"
|
|
6773
7132
|
>
|
|
6774
7133
|
</ng-container>
|
|
6775
7134
|
|
|
@@ -6791,12 +7150,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
6791
7150
|
}
|
|
6792
7151
|
<input
|
|
6793
7152
|
kendoSearchbar
|
|
6794
|
-
[ariaExpanded]="isOpen"
|
|
7153
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
6795
7154
|
[ariaControls]="ariaControls"
|
|
6796
7155
|
[id]="focusableId"
|
|
6797
7156
|
[isLoading]="loading"
|
|
6798
7157
|
[isSuggestable]="suggest"
|
|
6799
|
-
[
|
|
7158
|
+
[hasListAutocomplete]="filterable"
|
|
6800
7159
|
[activeDescendant]="activeDescendant"
|
|
6801
7160
|
[userInput]="text"
|
|
6802
7161
|
[suggestedText]="getSuggestion()"
|
|
@@ -6816,7 +7175,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
6816
7175
|
<span
|
|
6817
7176
|
class="k-clear-value"
|
|
6818
7177
|
[style.visibility]="clearButtonVisibility"
|
|
6819
|
-
aria-hidden="true"
|
|
6820
7178
|
[attr.title]="messageFor('clearTitle')"
|
|
6821
7179
|
(click)="clearValue($event)"
|
|
6822
7180
|
[kendoEventsOutsideAngular]="{
|
|
@@ -6911,24 +7269,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
6911
7269
|
[show]="isOpen"
|
|
6912
7270
|
[virtual]="virtual"
|
|
6913
7271
|
[showStickyHeader]="showStickyHeader"
|
|
7272
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
7273
|
+
[text]="text"
|
|
7274
|
+
[allowCustom]="allowCustom"
|
|
6914
7275
|
(pageChange)="pageChange($event)"
|
|
6915
7276
|
>
|
|
7277
|
+
<!--no-data template-->
|
|
7278
|
+
@if (data.length === 0) {
|
|
7279
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
7280
|
+
@if (noDataTemplate) {
|
|
7281
|
+
<ng-template
|
|
7282
|
+
[templateContext]="{
|
|
7283
|
+
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
7284
|
+
}">
|
|
7285
|
+
</ng-template>
|
|
7286
|
+
}
|
|
7287
|
+
@if (!noDataTemplate) {
|
|
7288
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
7289
|
+
}
|
|
7290
|
+
</div>
|
|
7291
|
+
}
|
|
6916
7292
|
</kendo-list>
|
|
6917
|
-
<!--no-data template-->
|
|
6918
|
-
@if (data.length === 0) {
|
|
6919
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
6920
|
-
@if (noDataTemplate) {
|
|
6921
|
-
<ng-template
|
|
6922
|
-
[templateContext]="{
|
|
6923
|
-
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
6924
|
-
}">
|
|
6925
|
-
</ng-template>
|
|
6926
|
-
}
|
|
6927
|
-
@if (!noDataTemplate) {
|
|
6928
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
6929
|
-
}
|
|
6930
|
-
</div>
|
|
6931
|
-
}
|
|
6932
7293
|
<!--footer template-->
|
|
6933
7294
|
@if (footerTemplate) {
|
|
6934
7295
|
<ng-template
|
|
@@ -7121,10 +7482,10 @@ class ValueTemplateDirective {
|
|
|
7121
7482
|
constructor(templateRef) {
|
|
7122
7483
|
this.templateRef = templateRef;
|
|
7123
7484
|
}
|
|
7124
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
7125
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
7485
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7486
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ValueTemplateDirective, isStandalone: true, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]", ngImport: i0 });
|
|
7126
7487
|
}
|
|
7127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
7488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ValueTemplateDirective, decorators: [{
|
|
7128
7489
|
type: Directive,
|
|
7129
7490
|
args: [{
|
|
7130
7491
|
selector: '[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]',
|
|
@@ -7151,10 +7512,10 @@ class FilterInputDirective {
|
|
|
7151
7512
|
nextTick(fn) {
|
|
7152
7513
|
this.zone.runOutsideAngular(() => setTimeout(fn));
|
|
7153
7514
|
}
|
|
7154
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
7155
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
7515
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7516
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FilterInputDirective, isStandalone: true, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
|
|
7156
7517
|
}
|
|
7157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
7518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterInputDirective, decorators: [{
|
|
7158
7519
|
type: Directive,
|
|
7159
7520
|
args: [{
|
|
7160
7521
|
selector: '[filterInput]',
|
|
@@ -7287,7 +7648,7 @@ class DropDownListComponent {
|
|
|
7287
7648
|
* @hidden
|
|
7288
7649
|
*/
|
|
7289
7650
|
get ariaLive() {
|
|
7290
|
-
return this.filterable ? 'polite' :
|
|
7651
|
+
return this.filterable ? 'polite' : null;
|
|
7291
7652
|
}
|
|
7292
7653
|
/**
|
|
7293
7654
|
* Shows or hides the current group sticky header when using grouped data.
|
|
@@ -7676,7 +8037,7 @@ class DropDownListComponent {
|
|
|
7676
8037
|
role = 'combobox';
|
|
7677
8038
|
haspopup = 'listbox';
|
|
7678
8039
|
get hostAriaInvalid() {
|
|
7679
|
-
return this.formControl?.invalid ? true : null;
|
|
8040
|
+
return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
|
|
7680
8041
|
}
|
|
7681
8042
|
/**
|
|
7682
8043
|
* @hidden
|
|
@@ -8525,8 +8886,6 @@ class DropDownListComponent {
|
|
|
8525
8886
|
}
|
|
8526
8887
|
closeActionSheet() {
|
|
8527
8888
|
this.actionSheet.toggle(false);
|
|
8528
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
|
|
8529
|
-
this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
|
|
8530
8889
|
if (this.filterable) {
|
|
8531
8890
|
this.adaptiveRenderer.searchBarValue = '';
|
|
8532
8891
|
this.filterChange.emit('');
|
|
@@ -8536,8 +8895,6 @@ class DropDownListComponent {
|
|
|
8536
8895
|
openActionSheet() {
|
|
8537
8896
|
this.actionSheet.toggle(true);
|
|
8538
8897
|
this.cdr.detectChanges();
|
|
8539
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
|
|
8540
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
|
|
8541
8898
|
if (!this.dataService.grouped) {
|
|
8542
8899
|
setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
|
|
8543
8900
|
}
|
|
@@ -8551,8 +8908,8 @@ class DropDownListComponent {
|
|
|
8551
8908
|
this.selectionService.focus(this.selectionService.focused);
|
|
8552
8909
|
this.opened.emit();
|
|
8553
8910
|
}
|
|
8554
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
8555
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
8911
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8912
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
|
|
8556
8913
|
DROPDOWNLIST_VALUE_ACCESSOR,
|
|
8557
8914
|
DataService,
|
|
8558
8915
|
SelectionService,
|
|
@@ -8589,6 +8946,9 @@ class DropDownListComponent {
|
|
|
8589
8946
|
|
|
8590
8947
|
i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
8591
8948
|
filterInputPlaceholder="Filter"
|
|
8949
|
+
|
|
8950
|
+
i18n-listboxLabel="kendo.dropdownlist.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
8951
|
+
listboxLabel="Options"
|
|
8592
8952
|
>
|
|
8593
8953
|
</ng-container>
|
|
8594
8954
|
<span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
|
|
@@ -8653,7 +9013,6 @@ class DropDownListComponent {
|
|
|
8653
9013
|
class="k-searchbox k-input"
|
|
8654
9014
|
[ngClass]="filterInputClasses">
|
|
8655
9015
|
<kendo-icon-wrapper
|
|
8656
|
-
class="k-icon"
|
|
8657
9016
|
innerCssClass="k-input-icon"
|
|
8658
9017
|
name="search"
|
|
8659
9018
|
[svgIcon]="searchIcon">
|
|
@@ -8704,24 +9063,25 @@ class DropDownListComponent {
|
|
|
8704
9063
|
[virtual]="virtual"
|
|
8705
9064
|
[ariaLive]="ariaLive"
|
|
8706
9065
|
[showStickyHeader]="showStickyHeader"
|
|
9066
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
8707
9067
|
(pageChange)="pageChange($event)"
|
|
8708
9068
|
[defaultItem]="defaultItem">
|
|
9069
|
+
<!--no-data template-->
|
|
9070
|
+
@if (data.length === 0) {
|
|
9071
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
9072
|
+
@if (noDataTemplate) {
|
|
9073
|
+
<ng-template
|
|
9074
|
+
[templateContext]="{
|
|
9075
|
+
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
9076
|
+
}">
|
|
9077
|
+
</ng-template>
|
|
9078
|
+
}
|
|
9079
|
+
@if (!noDataTemplate) {
|
|
9080
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
9081
|
+
}
|
|
9082
|
+
</div>
|
|
9083
|
+
}
|
|
8709
9084
|
</kendo-list>
|
|
8710
|
-
<!--no-data template-->
|
|
8711
|
-
@if (data.length === 0) {
|
|
8712
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
8713
|
-
@if (noDataTemplate) {
|
|
8714
|
-
<ng-template
|
|
8715
|
-
[templateContext]="{
|
|
8716
|
-
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
8717
|
-
}">
|
|
8718
|
-
</ng-template>
|
|
8719
|
-
}
|
|
8720
|
-
@if (!noDataTemplate) {
|
|
8721
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
8722
|
-
}
|
|
8723
|
-
</div>
|
|
8724
|
-
}
|
|
8725
9085
|
<!--footer template-->
|
|
8726
9086
|
@if (footerTemplate) {
|
|
8727
9087
|
<ng-template
|
|
@@ -8731,9 +9091,9 @@ class DropDownListComponent {
|
|
|
8731
9091
|
</ng-template>
|
|
8732
9092
|
}
|
|
8733
9093
|
</ng-template>
|
|
8734
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
|
|
9094
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
|
|
8735
9095
|
}
|
|
8736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
9096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListComponent, decorators: [{
|
|
8737
9097
|
type: Component,
|
|
8738
9098
|
args: [{
|
|
8739
9099
|
exportAs: 'kendoDropDownList',
|
|
@@ -8776,6 +9136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
8776
9136
|
|
|
8777
9137
|
i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
8778
9138
|
filterInputPlaceholder="Filter"
|
|
9139
|
+
|
|
9140
|
+
i18n-listboxLabel="kendo.dropdownlist.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
9141
|
+
listboxLabel="Options"
|
|
8779
9142
|
>
|
|
8780
9143
|
</ng-container>
|
|
8781
9144
|
<span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
|
|
@@ -8840,7 +9203,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
8840
9203
|
class="k-searchbox k-input"
|
|
8841
9204
|
[ngClass]="filterInputClasses">
|
|
8842
9205
|
<kendo-icon-wrapper
|
|
8843
|
-
class="k-icon"
|
|
8844
9206
|
innerCssClass="k-input-icon"
|
|
8845
9207
|
name="search"
|
|
8846
9208
|
[svgIcon]="searchIcon">
|
|
@@ -8891,24 +9253,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
8891
9253
|
[virtual]="virtual"
|
|
8892
9254
|
[ariaLive]="ariaLive"
|
|
8893
9255
|
[showStickyHeader]="showStickyHeader"
|
|
9256
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
8894
9257
|
(pageChange)="pageChange($event)"
|
|
8895
9258
|
[defaultItem]="defaultItem">
|
|
9259
|
+
<!--no-data template-->
|
|
9260
|
+
@if (data.length === 0) {
|
|
9261
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
9262
|
+
@if (noDataTemplate) {
|
|
9263
|
+
<ng-template
|
|
9264
|
+
[templateContext]="{
|
|
9265
|
+
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
9266
|
+
}">
|
|
9267
|
+
</ng-template>
|
|
9268
|
+
}
|
|
9269
|
+
@if (!noDataTemplate) {
|
|
9270
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
9271
|
+
}
|
|
9272
|
+
</div>
|
|
9273
|
+
}
|
|
8896
9274
|
</kendo-list>
|
|
8897
|
-
<!--no-data template-->
|
|
8898
|
-
@if (data.length === 0) {
|
|
8899
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
8900
|
-
@if (noDataTemplate) {
|
|
8901
|
-
<ng-template
|
|
8902
|
-
[templateContext]="{
|
|
8903
|
-
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
8904
|
-
}">
|
|
8905
|
-
</ng-template>
|
|
8906
|
-
}
|
|
8907
|
-
@if (!noDataTemplate) {
|
|
8908
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
8909
|
-
}
|
|
8910
|
-
</div>
|
|
8911
|
-
}
|
|
8912
9275
|
<!--footer template-->
|
|
8913
9276
|
@if (footerTemplate) {
|
|
8914
9277
|
<ng-template
|
|
@@ -9126,10 +9489,10 @@ class TagTemplateDirective {
|
|
|
9126
9489
|
constructor(templateRef) {
|
|
9127
9490
|
this.templateRef = templateRef;
|
|
9128
9491
|
}
|
|
9129
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9130
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
9492
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
9493
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: TagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]", ngImport: i0 });
|
|
9131
9494
|
}
|
|
9132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
9495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagTemplateDirective, decorators: [{
|
|
9133
9496
|
type: Directive,
|
|
9134
9497
|
args: [{
|
|
9135
9498
|
selector: '[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]',
|
|
@@ -9148,10 +9511,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9148
9511
|
*
|
|
9149
9512
|
* @example
|
|
9150
9513
|
* ```ts
|
|
9151
|
-
*
|
|
9514
|
+
* @Component({
|
|
9152
9515
|
* selector: 'my-app',
|
|
9153
9516
|
* template: `
|
|
9154
|
-
* <kendo-multiselect
|
|
9517
|
+
* <kendo-multiselect [summaryTagAfter]="1" [data]="items">
|
|
9155
9518
|
* <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
|
|
9156
9519
|
* <span>{{dataItems.length}} item(s) selected</span>
|
|
9157
9520
|
* </ng-template>
|
|
@@ -9168,10 +9531,10 @@ class GroupTagTemplateDirective {
|
|
|
9168
9531
|
constructor(templateRef) {
|
|
9169
9532
|
this.templateRef = templateRef;
|
|
9170
9533
|
}
|
|
9171
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9172
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
9534
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
9535
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: GroupTagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]", ngImport: i0 });
|
|
9173
9536
|
}
|
|
9174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
9537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTagTemplateDirective, decorators: [{
|
|
9175
9538
|
type: Directive,
|
|
9176
9539
|
args: [{
|
|
9177
9540
|
selector: '[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]',
|
|
@@ -9229,6 +9592,7 @@ class TagListComponent {
|
|
|
9229
9592
|
disabled;
|
|
9230
9593
|
tagPrefix;
|
|
9231
9594
|
id;
|
|
9595
|
+
ariaLabel;
|
|
9232
9596
|
set size(size) {
|
|
9233
9597
|
this.renderer.removeClass(this.hostElement.nativeElement, getSizeClass('chip-list', this.size));
|
|
9234
9598
|
if (size) {
|
|
@@ -9251,7 +9615,11 @@ class TagListComponent {
|
|
|
9251
9615
|
return this.id;
|
|
9252
9616
|
}
|
|
9253
9617
|
taglistRole = 'listbox';
|
|
9618
|
+
get hostAriaLabel() {
|
|
9619
|
+
return this.ariaLabel || null;
|
|
9620
|
+
}
|
|
9254
9621
|
multiselectable = true;
|
|
9622
|
+
ariaOrientation = 'horizontal';
|
|
9255
9623
|
_size;
|
|
9256
9624
|
constructor(renderer, hostElement) {
|
|
9257
9625
|
this.renderer = renderer;
|
|
@@ -9305,8 +9673,8 @@ class TagListComponent {
|
|
|
9305
9673
|
return prop.find(item => item in tag);
|
|
9306
9674
|
}
|
|
9307
9675
|
}
|
|
9308
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
9309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
9676
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", ariaLabel: "ariaLabel", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-label": "this.hostAriaLabel", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-orientation": "this.ariaOrientation" } }, ngImport: i0, template: `
|
|
9310
9678
|
@for (tag of tags; track $index; let index = $index) {
|
|
9311
9679
|
<div
|
|
9312
9680
|
[attr.id]="itemId(tag, index)"
|
|
@@ -9332,7 +9700,7 @@ class TagListComponent {
|
|
|
9332
9700
|
>
|
|
9333
9701
|
<span class="k-chip-content">
|
|
9334
9702
|
@if (isGroupTag(tag)) {
|
|
9335
|
-
<span class="k-chip-label
|
|
9703
|
+
<span class="k-chip-label">
|
|
9336
9704
|
@if (groupTemplate) {
|
|
9337
9705
|
<ng-template
|
|
9338
9706
|
[templateContext]="{
|
|
@@ -9346,7 +9714,7 @@ class TagListComponent {
|
|
|
9346
9714
|
}
|
|
9347
9715
|
</span>
|
|
9348
9716
|
} @else {
|
|
9349
|
-
<span class="k-chip-label
|
|
9717
|
+
<span class="k-chip-label">
|
|
9350
9718
|
@if (template) {
|
|
9351
9719
|
<ng-template
|
|
9352
9720
|
[templateContext]="{
|
|
@@ -9362,11 +9730,13 @@ class TagListComponent {
|
|
|
9362
9730
|
}
|
|
9363
9731
|
</span>
|
|
9364
9732
|
<span class="k-chip-actions">
|
|
9365
|
-
<span
|
|
9733
|
+
<span class="k-chip-action k-chip-remove-action">
|
|
9366
9734
|
<kendo-icon-wrapper
|
|
9735
|
+
[attr.aria-hidden]="index !== focused"
|
|
9367
9736
|
(mousedown)="deleteTag($event, tag, index)"
|
|
9368
9737
|
name="x-circle"
|
|
9369
9738
|
[svgIcon]="xCircleIcon"
|
|
9739
|
+
size="small"
|
|
9370
9740
|
>
|
|
9371
9741
|
</kendo-icon-wrapper>
|
|
9372
9742
|
</span>
|
|
@@ -9376,7 +9746,7 @@ class TagListComponent {
|
|
|
9376
9746
|
<ng-content></ng-content>
|
|
9377
9747
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
9378
9748
|
}
|
|
9379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
9749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagListComponent, decorators: [{
|
|
9380
9750
|
type: Component,
|
|
9381
9751
|
args: [{
|
|
9382
9752
|
selector: 'kendo-taglist',
|
|
@@ -9406,7 +9776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9406
9776
|
>
|
|
9407
9777
|
<span class="k-chip-content">
|
|
9408
9778
|
@if (isGroupTag(tag)) {
|
|
9409
|
-
<span class="k-chip-label
|
|
9779
|
+
<span class="k-chip-label">
|
|
9410
9780
|
@if (groupTemplate) {
|
|
9411
9781
|
<ng-template
|
|
9412
9782
|
[templateContext]="{
|
|
@@ -9420,7 +9790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9420
9790
|
}
|
|
9421
9791
|
</span>
|
|
9422
9792
|
} @else {
|
|
9423
|
-
<span class="k-chip-label
|
|
9793
|
+
<span class="k-chip-label">
|
|
9424
9794
|
@if (template) {
|
|
9425
9795
|
<ng-template
|
|
9426
9796
|
[templateContext]="{
|
|
@@ -9436,11 +9806,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9436
9806
|
}
|
|
9437
9807
|
</span>
|
|
9438
9808
|
<span class="k-chip-actions">
|
|
9439
|
-
<span
|
|
9809
|
+
<span class="k-chip-action k-chip-remove-action">
|
|
9440
9810
|
<kendo-icon-wrapper
|
|
9811
|
+
[attr.aria-hidden]="index !== focused"
|
|
9441
9812
|
(mousedown)="deleteTag($event, tag, index)"
|
|
9442
9813
|
name="x-circle"
|
|
9443
9814
|
[svgIcon]="xCircleIcon"
|
|
9815
|
+
size="small"
|
|
9444
9816
|
>
|
|
9445
9817
|
</kendo-icon-wrapper>
|
|
9446
9818
|
</span>
|
|
@@ -9472,6 +9844,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9472
9844
|
type: Input
|
|
9473
9845
|
}], id: [{
|
|
9474
9846
|
type: Input
|
|
9847
|
+
}], ariaLabel: [{
|
|
9848
|
+
type: Input
|
|
9475
9849
|
}], size: [{
|
|
9476
9850
|
type: Input
|
|
9477
9851
|
}], rounded: [{
|
|
@@ -9491,9 +9865,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
9491
9865
|
}], taglistRole: [{
|
|
9492
9866
|
type: HostBinding,
|
|
9493
9867
|
args: ['attr.role']
|
|
9868
|
+
}], hostAriaLabel: [{
|
|
9869
|
+
type: HostBinding,
|
|
9870
|
+
args: ['attr.aria-label']
|
|
9494
9871
|
}], multiselectable: [{
|
|
9495
9872
|
type: HostBinding,
|
|
9496
9873
|
args: ['attr.aria-multiselectable']
|
|
9874
|
+
}], ariaOrientation: [{
|
|
9875
|
+
type: HostBinding,
|
|
9876
|
+
args: ['attr.aria-orientation']
|
|
9497
9877
|
}] } });
|
|
9498
9878
|
|
|
9499
9879
|
const MULTISELECT_VALUE_ACCESSOR = {
|
|
@@ -9560,6 +9940,8 @@ class MultiSelectComponent {
|
|
|
9560
9940
|
popupRef;
|
|
9561
9941
|
text;
|
|
9562
9942
|
tags;
|
|
9943
|
+
isAllSelected = false;
|
|
9944
|
+
isPartiallySelected = false;
|
|
9563
9945
|
focusedTagIndex = undefined;
|
|
9564
9946
|
/**
|
|
9565
9947
|
* @hidden
|
|
@@ -9581,7 +9963,7 @@ class MultiSelectComponent {
|
|
|
9581
9963
|
* @hidden
|
|
9582
9964
|
*/
|
|
9583
9965
|
get ariaControls() {
|
|
9584
|
-
return this.isOpen ? this.listBoxId : undefined;
|
|
9966
|
+
return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
|
|
9585
9967
|
}
|
|
9586
9968
|
/**
|
|
9587
9969
|
* @hidden
|
|
@@ -9598,12 +9980,12 @@ class MultiSelectComponent {
|
|
|
9598
9980
|
}
|
|
9599
9981
|
/**
|
|
9600
9982
|
* Focuses a specific item in the MultiSelect based on the provided index.
|
|
9601
|
-
* Sets the index to `-1` to focus the custom item if available.
|
|
9983
|
+
* Sets the index to `-1` to focus the custom item if available, or `-2` to focus the Select All item.
|
|
9602
9984
|
* Pass `null` or an invalid index to remove focus.
|
|
9603
9985
|
*/
|
|
9604
9986
|
focusItemAt(index) {
|
|
9605
|
-
const minIndex = this.allowCustom ? -1 : 0;
|
|
9606
|
-
const isInRange = minIndex <=
|
|
9987
|
+
const minIndex = this.selectAll ? -2 : this.allowCustom ? -1 : 0;
|
|
9988
|
+
const isInRange = minIndex <= index && index < this.data.length;
|
|
9607
9989
|
if (isPresent(index) && isInRange && !this.disabledItemsService.isIndexDisabled(index)) {
|
|
9608
9990
|
this.selectionService.focus(index);
|
|
9609
9991
|
}
|
|
@@ -9619,6 +10001,31 @@ class MultiSelectComponent {
|
|
|
9619
10001
|
this.searchbar.focus();
|
|
9620
10002
|
}
|
|
9621
10003
|
}
|
|
10004
|
+
/**
|
|
10005
|
+
* @hidden
|
|
10006
|
+
*/
|
|
10007
|
+
handleSelectAllStateChange(checkBoxState) {
|
|
10008
|
+
const availableItems = this.availableItemsForSelectAll;
|
|
10009
|
+
let newValue;
|
|
10010
|
+
if (checkBoxState === true) {
|
|
10011
|
+
const toAdd = availableItems.filter(item => !this.isItemSelected(item));
|
|
10012
|
+
newValue = [...this.value, ...toAdd];
|
|
10013
|
+
}
|
|
10014
|
+
else if (checkBoxState === false) {
|
|
10015
|
+
newValue = this.value.filter(v => !availableItems.some(item => getter(item, this.valueField) === getter(v, this.valueField)));
|
|
10016
|
+
}
|
|
10017
|
+
else {
|
|
10018
|
+
return;
|
|
10019
|
+
}
|
|
10020
|
+
this.preserveFocusIndex = -2;
|
|
10021
|
+
this.value = newValue;
|
|
10022
|
+
this.isAllSelected = this.isAllSelectedComputed;
|
|
10023
|
+
this.isPartiallySelected = this.isPartiallySelectedComputed;
|
|
10024
|
+
this.emitValueChange();
|
|
10025
|
+
this.cdr.markForCheck();
|
|
10026
|
+
const state = this.isAllSelected ? 'checked' : this.isPartiallySelected ? 'indeterminate' : 'unchecked';
|
|
10027
|
+
this.selectAllChange.emit(state);
|
|
10028
|
+
}
|
|
9622
10029
|
/**
|
|
9623
10030
|
* @hidden
|
|
9624
10031
|
*/
|
|
@@ -9724,6 +10131,22 @@ class MultiSelectComponent {
|
|
|
9724
10131
|
* By default the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
|
|
9725
10132
|
*/
|
|
9726
10133
|
showStickyHeader = true;
|
|
10134
|
+
/**
|
|
10135
|
+
* Renders a Select All sticky header item at the top of the popup list.
|
|
10136
|
+
* Clicking it selects or deselects all currently available items and triggers the `valueChange` event.
|
|
10137
|
+
*
|
|
10138
|
+
* @default false
|
|
10139
|
+
*/
|
|
10140
|
+
selectAll = false;
|
|
10141
|
+
/**
|
|
10142
|
+
* Sets the number of selected items after which a summary chip replaces the remaining individual chips.
|
|
10143
|
+
* Set to `0` to always show a single summary chip.
|
|
10144
|
+
* Pass `null` to disable summarization.
|
|
10145
|
+
* When `selectAll` is enabled and this input is not explicitly set, defaults to `10`.
|
|
10146
|
+
*
|
|
10147
|
+
* @default null
|
|
10148
|
+
*/
|
|
10149
|
+
summaryTagAfter;
|
|
9727
10150
|
/**
|
|
9728
10151
|
* @hidden
|
|
9729
10152
|
*/
|
|
@@ -10068,6 +10491,11 @@ class MultiSelectComponent {
|
|
|
10068
10491
|
* You can prevent tag removal by calling `preventDefault()` on the event.
|
|
10069
10492
|
*/
|
|
10070
10493
|
removeTag = new EventEmitter();
|
|
10494
|
+
/**
|
|
10495
|
+
* Emitted when the Select All item state changes.
|
|
10496
|
+
* Useful for virtualization scenarios where the consumer manages the full dataset.
|
|
10497
|
+
*/
|
|
10498
|
+
selectAllChange = new EventEmitter();
|
|
10071
10499
|
container;
|
|
10072
10500
|
searchbar;
|
|
10073
10501
|
tagList;
|
|
@@ -10141,6 +10569,33 @@ class MultiSelectComponent {
|
|
|
10141
10569
|
_fillMode;
|
|
10142
10570
|
_valueHolder = [];
|
|
10143
10571
|
isCustomValueSelected = false;
|
|
10572
|
+
preserveFocusIndex = null;
|
|
10573
|
+
get isAllSelectedComputed() {
|
|
10574
|
+
const availableItems = this.availableItemsForSelectAll;
|
|
10575
|
+
if (availableItems.length === 0) {
|
|
10576
|
+
return false;
|
|
10577
|
+
}
|
|
10578
|
+
const allItemsSelected = availableItems.every(item => this.isItemSelected(item));
|
|
10579
|
+
return allItemsSelected;
|
|
10580
|
+
}
|
|
10581
|
+
get isPartiallySelectedComputed() {
|
|
10582
|
+
if (this.isAllSelected) {
|
|
10583
|
+
return false;
|
|
10584
|
+
}
|
|
10585
|
+
const availableItems = this.availableItemsForSelectAll;
|
|
10586
|
+
const hasPartialSelection = availableItems.some(item => this.isItemSelected(item));
|
|
10587
|
+
return hasPartialSelection;
|
|
10588
|
+
}
|
|
10589
|
+
get hasCustomValueItem() {
|
|
10590
|
+
return this.allowCustom && !!this.text;
|
|
10591
|
+
}
|
|
10592
|
+
get availableItemsForSelectAll() {
|
|
10593
|
+
const pageData = this.data;
|
|
10594
|
+
const data = this.dataService.grouped
|
|
10595
|
+
? pageData.filter(item => !item.header).map(item => item.value)
|
|
10596
|
+
: pageData;
|
|
10597
|
+
return data;
|
|
10598
|
+
}
|
|
10144
10599
|
constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, adaptiveService) {
|
|
10145
10600
|
this.wrapper = wrapper;
|
|
10146
10601
|
this.localization = localization;
|
|
@@ -10244,6 +10699,7 @@ class MultiSelectComponent {
|
|
|
10244
10699
|
* @hidden
|
|
10245
10700
|
*/
|
|
10246
10701
|
change(event) {
|
|
10702
|
+
this.preserveFocusIndex = null;
|
|
10247
10703
|
if (event.isMultipleSelection) {
|
|
10248
10704
|
// Existing items.
|
|
10249
10705
|
if (isPresent(event.added) && event.added.length > 0) {
|
|
@@ -10315,14 +10771,17 @@ class MultiSelectComponent {
|
|
|
10315
10771
|
const data = this.getDataItems();
|
|
10316
10772
|
const selection = selectedIndices(this.value, data, this.valueField);
|
|
10317
10773
|
this.selectionService.resetSelection(selection);
|
|
10318
|
-
if (this.
|
|
10774
|
+
if (this.preserveFocusIndex !== null) {
|
|
10775
|
+
this.selectionService.focused = this.preserveFocusIndex;
|
|
10776
|
+
}
|
|
10777
|
+
else if (this.disabledItemsService.isIndexDisabled(this.selectionService.focused)) {
|
|
10319
10778
|
this.selectionService.focused = this.firstFocusableIndex(0);
|
|
10320
10779
|
}
|
|
10321
10780
|
if (this.isOpen && this.selectionService.focused === undefined) {
|
|
10322
10781
|
if (this.dataService.itemsCount > 0) {
|
|
10323
10782
|
this.selectionService.focused = this.firstFocusableIndex(0);
|
|
10324
|
-
if (this.
|
|
10325
|
-
this.selectionService.focused =
|
|
10783
|
+
if (this.hasCustomValueItem) {
|
|
10784
|
+
this.selectionService.focused = -1;
|
|
10326
10785
|
}
|
|
10327
10786
|
}
|
|
10328
10787
|
else if (this.allowCustom) {
|
|
@@ -10343,8 +10802,9 @@ class MultiSelectComponent {
|
|
|
10343
10802
|
})
|
|
10344
10803
|
.filter(dataItem => isPresent(dataItem));
|
|
10345
10804
|
}
|
|
10346
|
-
this.tags = this.
|
|
10805
|
+
this.tags = this.buildTags(this.selectedDataItems.slice(0));
|
|
10347
10806
|
this.disabledIndices = this.disabledItemsMapper();
|
|
10807
|
+
this.updateSelectAllState();
|
|
10348
10808
|
this.cdr.markForCheck();
|
|
10349
10809
|
}
|
|
10350
10810
|
/**
|
|
@@ -10365,6 +10825,9 @@ class MultiSelectComponent {
|
|
|
10365
10825
|
else {
|
|
10366
10826
|
this.searchTextAndFocus(text);
|
|
10367
10827
|
}
|
|
10828
|
+
if (this.selectAll && this.allowCustom && text) {
|
|
10829
|
+
this.selectionService.focused = -1;
|
|
10830
|
+
}
|
|
10368
10831
|
this.searchbar.setInputSize();
|
|
10369
10832
|
}
|
|
10370
10833
|
/**
|
|
@@ -10373,6 +10836,7 @@ class MultiSelectComponent {
|
|
|
10373
10836
|
pageChange(event) {
|
|
10374
10837
|
const virtual = this.virtual;
|
|
10375
10838
|
virtual.skip = event.skip;
|
|
10839
|
+
this.updateSelectAllState();
|
|
10376
10840
|
}
|
|
10377
10841
|
/**
|
|
10378
10842
|
* @hidden
|
|
@@ -10411,7 +10875,7 @@ class MultiSelectComponent {
|
|
|
10411
10875
|
const action = this.navigationService.process({
|
|
10412
10876
|
current: focused,
|
|
10413
10877
|
max: this.dataService.itemsCount - 1,
|
|
10414
|
-
min: this.
|
|
10878
|
+
min: this.selectAll ? -2 : (this.hasCustomValueItem ? -1 : 0),
|
|
10415
10879
|
open: this.isOpen,
|
|
10416
10880
|
originalEvent: eventData
|
|
10417
10881
|
});
|
|
@@ -10499,7 +10963,10 @@ class MultiSelectComponent {
|
|
|
10499
10963
|
if (isChanged('valueNormalizer', changes)) {
|
|
10500
10964
|
this.createCustomValueStream();
|
|
10501
10965
|
}
|
|
10502
|
-
if (anyChanged(['
|
|
10966
|
+
if (anyChanged(['selectAll', 'summaryTagAfter'], changes, false)) {
|
|
10967
|
+
this.refreshSummaryTagMapper();
|
|
10968
|
+
}
|
|
10969
|
+
if (anyChanged(['textField', 'valueField', 'valuePrimitive', 'selectAll', 'summaryTagAfter'], changes)) {
|
|
10503
10970
|
this.setState(this.value);
|
|
10504
10971
|
}
|
|
10505
10972
|
}
|
|
@@ -10583,13 +11050,6 @@ class MultiSelectComponent {
|
|
|
10583
11050
|
this.cdr.markForCheck();
|
|
10584
11051
|
this.disabled = isDisabled;
|
|
10585
11052
|
}
|
|
10586
|
-
/**
|
|
10587
|
-
* @hidden
|
|
10588
|
-
*/
|
|
10589
|
-
onTagMapperChange() {
|
|
10590
|
-
this.tags = this.tagMapper(this.selectedDataItems.slice(0));
|
|
10591
|
-
this.cdr.markForCheck();
|
|
10592
|
-
}
|
|
10593
11053
|
/**
|
|
10594
11054
|
* @hidden
|
|
10595
11055
|
*/
|
|
@@ -10776,7 +11236,7 @@ class MultiSelectComponent {
|
|
|
10776
11236
|
const itemIndex = this.dataService.indexOf(newValue);
|
|
10777
11237
|
const customItem = itemIndex === -1;
|
|
10778
11238
|
if (this.value.indexOf(newValue) === -1) {
|
|
10779
|
-
!this.isActionSheetExpanded && (this.tags = this.
|
|
11239
|
+
!this.isActionSheetExpanded && (this.tags = this.buildTags([...this.selectedDataItems, normalizedValue]));
|
|
10780
11240
|
if (!customItem) {
|
|
10781
11241
|
this.selectionService.add(itemIndex);
|
|
10782
11242
|
}
|
|
@@ -10867,6 +11327,13 @@ class MultiSelectComponent {
|
|
|
10867
11327
|
if (this.isOpen) {
|
|
10868
11328
|
event.originalEvent.preventDefault();
|
|
10869
11329
|
}
|
|
11330
|
+
if (focusedIndex === -2) {
|
|
11331
|
+
if (this.selectAll && this.data.length > 0) {
|
|
11332
|
+
const newState = !this.isAllSelected;
|
|
11333
|
+
this.handleSelectAllStateChange(newState);
|
|
11334
|
+
}
|
|
11335
|
+
return;
|
|
11336
|
+
}
|
|
10870
11337
|
if (focusedIndex === -1) {
|
|
10871
11338
|
if (this.allowCustom && this.text) {
|
|
10872
11339
|
this.addCustomValue(this.text);
|
|
@@ -10977,7 +11444,8 @@ class MultiSelectComponent {
|
|
|
10977
11444
|
this.nextTick(() => this.selectionService.focus(indexToSelect));
|
|
10978
11445
|
}
|
|
10979
11446
|
handleUp(index) {
|
|
10980
|
-
this.
|
|
11447
|
+
this.preserveFocusIndex = null;
|
|
11448
|
+
this.selectionService.focused = this.calculateNavigationIndex(index);
|
|
10981
11449
|
}
|
|
10982
11450
|
handleBackspace() {
|
|
10983
11451
|
if (this.focusedTagIndex !== undefined) {
|
|
@@ -11003,13 +11471,24 @@ class MultiSelectComponent {
|
|
|
11003
11471
|
}
|
|
11004
11472
|
}
|
|
11005
11473
|
handleDownKey(index) {
|
|
11474
|
+
this.preserveFocusIndex = null;
|
|
11006
11475
|
if (this.isOpen) {
|
|
11476
|
+
index = this.calculateNavigationIndex(index);
|
|
11007
11477
|
this.selectionService.focused = index || this.firstFocusableIndex(0);
|
|
11008
11478
|
}
|
|
11009
11479
|
else {
|
|
11010
11480
|
this.openPopup();
|
|
11011
11481
|
}
|
|
11012
11482
|
}
|
|
11483
|
+
calculateNavigationIndex(index) {
|
|
11484
|
+
if (index === 0 && !isPresent(this.selectionService.focused)) {
|
|
11485
|
+
return this.hasCustomValueItem ? -1 : (this.selectAll ? -2 : 0);
|
|
11486
|
+
}
|
|
11487
|
+
if (index === -1 && !this.hasCustomValueItem) {
|
|
11488
|
+
return this.selectionService.focused < index ? 0 : (this.selectAll ? -2 : 0);
|
|
11489
|
+
}
|
|
11490
|
+
return index;
|
|
11491
|
+
}
|
|
11013
11492
|
handleRightKey() {
|
|
11014
11493
|
const last = this.tags.length - 1;
|
|
11015
11494
|
if (this.focusedTagIndex === last) {
|
|
@@ -11149,6 +11628,71 @@ class MultiSelectComponent {
|
|
|
11149
11628
|
this.togglePopup(false);
|
|
11150
11629
|
});
|
|
11151
11630
|
}
|
|
11631
|
+
buildTags(items) {
|
|
11632
|
+
if (this.allowCustom && this.selectAll && this.valueField) {
|
|
11633
|
+
const data = this.getDataItems();
|
|
11634
|
+
const dataItemValues = new Set(data.map(item => getter(item, this.valueField)));
|
|
11635
|
+
const listItems = [];
|
|
11636
|
+
const customItems = [];
|
|
11637
|
+
items.forEach(item => {
|
|
11638
|
+
const itemValue = getter(item, this.valueField);
|
|
11639
|
+
if (dataItemValues.has(itemValue)) {
|
|
11640
|
+
listItems.push(item);
|
|
11641
|
+
}
|
|
11642
|
+
else {
|
|
11643
|
+
customItems.push(item);
|
|
11644
|
+
}
|
|
11645
|
+
});
|
|
11646
|
+
const hasExplicitSummaryTagAfter = this.summaryTagAfter !== undefined;
|
|
11647
|
+
const totalItems = listItems.length + customItems.length;
|
|
11648
|
+
const result = [];
|
|
11649
|
+
const effectiveSummaryAfter = hasExplicitSummaryTagAfter ? this.summaryTagAfter : (this.selectAll ? 10 : null);
|
|
11650
|
+
const shouldCreateSummaryTag = listItems.length > 0 &&
|
|
11651
|
+
(effectiveSummaryAfter !== null && totalItems > effectiveSummaryAfter);
|
|
11652
|
+
if (shouldCreateSummaryTag) {
|
|
11653
|
+
result.push(listItems);
|
|
11654
|
+
customItems.forEach(item => {
|
|
11655
|
+
result.push(item);
|
|
11656
|
+
});
|
|
11657
|
+
}
|
|
11658
|
+
else {
|
|
11659
|
+
if (listItems.length > 0) {
|
|
11660
|
+
listItems.forEach(item => {
|
|
11661
|
+
result.push(item);
|
|
11662
|
+
});
|
|
11663
|
+
}
|
|
11664
|
+
customItems.forEach(item => {
|
|
11665
|
+
result.push(item);
|
|
11666
|
+
});
|
|
11667
|
+
if (effectiveSummaryAfter !== null && result.length > effectiveSummaryAfter) {
|
|
11668
|
+
const summarized = result.slice(0, effectiveSummaryAfter);
|
|
11669
|
+
summarized.push(result.slice(effectiveSummaryAfter));
|
|
11670
|
+
return summarized;
|
|
11671
|
+
}
|
|
11672
|
+
}
|
|
11673
|
+
return result;
|
|
11674
|
+
}
|
|
11675
|
+
return this.tagMapper(items);
|
|
11676
|
+
}
|
|
11677
|
+
refreshSummaryTagMapper() {
|
|
11678
|
+
const effectiveSummaryAfter = this.summaryTagAfter !== undefined
|
|
11679
|
+
? this.summaryTagAfter
|
|
11680
|
+
: (this.selectAll ? 10 : null);
|
|
11681
|
+
if (effectiveSummaryAfter !== null) {
|
|
11682
|
+
const showAfter = effectiveSummaryAfter;
|
|
11683
|
+
this.tagMapper = (tags) => {
|
|
11684
|
+
if (tags.length > showAfter) {
|
|
11685
|
+
const result = tags.slice(0, showAfter);
|
|
11686
|
+
result.push(tags.slice(showAfter, tags.length));
|
|
11687
|
+
return result;
|
|
11688
|
+
}
|
|
11689
|
+
return tags.slice ? tags.slice() : tags;
|
|
11690
|
+
};
|
|
11691
|
+
}
|
|
11692
|
+
else {
|
|
11693
|
+
this.tagMapper = (tags) => tags || [];
|
|
11694
|
+
}
|
|
11695
|
+
}
|
|
11152
11696
|
emitValueChange() {
|
|
11153
11697
|
this.onChangeCallback(this.value);
|
|
11154
11698
|
this.valueChange.emit(this.value);
|
|
@@ -11236,8 +11780,17 @@ class MultiSelectComponent {
|
|
|
11236
11780
|
this.closePopup();
|
|
11237
11781
|
}
|
|
11238
11782
|
}
|
|
11239
|
-
|
|
11240
|
-
|
|
11783
|
+
isItemSelected(item) {
|
|
11784
|
+
return this.value.some(v => getter(v, this.valueField) === getter(item, this.valueField));
|
|
11785
|
+
}
|
|
11786
|
+
updateSelectAllState() {
|
|
11787
|
+
if (this.selectAll) {
|
|
11788
|
+
this.isAllSelected = this.isAllSelectedComputed;
|
|
11789
|
+
this.isPartiallySelected = this.isPartiallySelectedComputed;
|
|
11790
|
+
}
|
|
11791
|
+
}
|
|
11792
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
11793
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", selectAll: "selectAll", summaryTagAfter: "summaryTagAfter", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag", selectAllChange: "selectAllChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
|
|
11241
11794
|
MULTISELECT_VALUE_ACCESSOR,
|
|
11242
11795
|
DataService,
|
|
11243
11796
|
SelectionService,
|
|
@@ -11265,6 +11818,9 @@ class MultiSelectComponent {
|
|
|
11265
11818
|
i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
|
|
11266
11819
|
clearTitle="clear"
|
|
11267
11820
|
|
|
11821
|
+
i18n-chipListLabel="kendo.multiselect.chipListLabel|The accessible label of the tag list element that contains the selected items"
|
|
11822
|
+
chipListLabel="chip list"
|
|
11823
|
+
|
|
11268
11824
|
i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
11269
11825
|
popupLabel="Options list"
|
|
11270
11826
|
|
|
@@ -11272,7 +11828,13 @@ class MultiSelectComponent {
|
|
|
11272
11828
|
adaptiveCloseButtonTitle="Close"
|
|
11273
11829
|
|
|
11274
11830
|
i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
|
|
11275
|
-
useCustomValueText="
|
|
11831
|
+
useCustomValueText="Use "[[customValue]]""
|
|
11832
|
+
|
|
11833
|
+
i18n-listboxLabel="kendo.multiselect.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
11834
|
+
listboxLabel="Options"
|
|
11835
|
+
|
|
11836
|
+
i18n-selectAllText="kendo.multiselect.selectAllText|The text of the Select All item in the popup"
|
|
11837
|
+
selectAllText="Select All"
|
|
11276
11838
|
>
|
|
11277
11839
|
</ng-container>
|
|
11278
11840
|
|
|
@@ -11307,17 +11869,18 @@ class MultiSelectComponent {
|
|
|
11307
11869
|
[groupTemplate]="groupTagTemplate"
|
|
11308
11870
|
[tagPrefix]="tagPrefix"
|
|
11309
11871
|
[disabledIndices]="disabledIndices"
|
|
11872
|
+
[ariaLabel]="messageFor('chipListLabel')"
|
|
11310
11873
|
(removeTag)="handleRemoveTag($event)"
|
|
11311
11874
|
>
|
|
11312
11875
|
</kendo-taglist>
|
|
11313
11876
|
<input
|
|
11314
11877
|
kendoSearchbar
|
|
11315
11878
|
[ariaControls]="ariaControls"
|
|
11316
|
-
[ariaExpanded]="isOpen"
|
|
11879
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
11317
11880
|
[id]="focusableId"
|
|
11318
11881
|
[tagListId]="tagListId"
|
|
11319
11882
|
[isLoading]="loading"
|
|
11320
|
-
[
|
|
11883
|
+
[hasListAutocomplete]="filterable"
|
|
11321
11884
|
[activeDescendant]="activeDescendant"
|
|
11322
11885
|
[userInput]="text"
|
|
11323
11886
|
[disabled]="disabled"
|
|
@@ -11344,7 +11907,6 @@ class MultiSelectComponent {
|
|
|
11344
11907
|
(mousedown)="clearAll($event)"
|
|
11345
11908
|
>
|
|
11346
11909
|
<kendo-icon-wrapper
|
|
11347
|
-
class="k-icon"
|
|
11348
11910
|
name="x"
|
|
11349
11911
|
[svgIcon]="xIcon"
|
|
11350
11912
|
>
|
|
@@ -11419,26 +11981,32 @@ class MultiSelectComponent {
|
|
|
11419
11981
|
[isMultiselect]="true"
|
|
11420
11982
|
[isActionSheetExpanded]="isActionSheetExpanded"
|
|
11421
11983
|
[showStickyHeader]="showStickyHeader"
|
|
11984
|
+
[selectAll]="selectAll && data.length > 0"
|
|
11985
|
+
[selectAllText]="messageFor('selectAllText')"
|
|
11986
|
+
[isAllSelected]="isAllSelected"
|
|
11987
|
+
[isPartiallySelected]="isPartiallySelected"
|
|
11988
|
+
(selectAllClick)="handleSelectAllStateChange($event)"
|
|
11422
11989
|
[customItemTemplate]="customItemTemplate"
|
|
11423
11990
|
[text]="text"
|
|
11424
11991
|
[allowCustom]="allowCustom"
|
|
11992
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
11425
11993
|
>
|
|
11994
|
+
<!--no data template-->
|
|
11995
|
+
@if (data.length === 0) {
|
|
11996
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
11997
|
+
@if (noDataTemplate) {
|
|
11998
|
+
<ng-template
|
|
11999
|
+
[templateContext]="{
|
|
12000
|
+
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
12001
|
+
}">
|
|
12002
|
+
</ng-template>
|
|
12003
|
+
}
|
|
12004
|
+
@if (!noDataTemplate) {
|
|
12005
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
12006
|
+
}
|
|
12007
|
+
</div>
|
|
12008
|
+
}
|
|
11426
12009
|
</kendo-list>
|
|
11427
|
-
<!--no data template-->
|
|
11428
|
-
@if (data.length === 0) {
|
|
11429
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
11430
|
-
@if (noDataTemplate) {
|
|
11431
|
-
<ng-template
|
|
11432
|
-
[templateContext]="{
|
|
11433
|
-
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
11434
|
-
}">
|
|
11435
|
-
</ng-template>
|
|
11436
|
-
}
|
|
11437
|
-
@if (!noDataTemplate) {
|
|
11438
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
11439
|
-
}
|
|
11440
|
-
</div>
|
|
11441
|
-
}
|
|
11442
12010
|
<!--footer template-->
|
|
11443
12011
|
@if (footerTemplate) {
|
|
11444
12012
|
<ng-template
|
|
@@ -11448,9 +12016,9 @@ class MultiSelectComponent {
|
|
|
11448
12016
|
</ng-template>
|
|
11449
12017
|
}
|
|
11450
12018
|
</ng-template>
|
|
11451
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "
|
|
12019
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
|
|
11452
12020
|
}
|
|
11453
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
12021
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
11454
12022
|
type: Component,
|
|
11455
12023
|
args: [{
|
|
11456
12024
|
exportAs: 'kendoMultiSelect',
|
|
@@ -11484,6 +12052,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
11484
12052
|
i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
|
|
11485
12053
|
clearTitle="clear"
|
|
11486
12054
|
|
|
12055
|
+
i18n-chipListLabel="kendo.multiselect.chipListLabel|The accessible label of the tag list element that contains the selected items"
|
|
12056
|
+
chipListLabel="chip list"
|
|
12057
|
+
|
|
11487
12058
|
i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
11488
12059
|
popupLabel="Options list"
|
|
11489
12060
|
|
|
@@ -11491,7 +12062,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
11491
12062
|
adaptiveCloseButtonTitle="Close"
|
|
11492
12063
|
|
|
11493
12064
|
i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
|
|
11494
|
-
useCustomValueText="
|
|
12065
|
+
useCustomValueText="Use "[[customValue]]""
|
|
12066
|
+
|
|
12067
|
+
i18n-listboxLabel="kendo.multiselect.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
12068
|
+
listboxLabel="Options"
|
|
12069
|
+
|
|
12070
|
+
i18n-selectAllText="kendo.multiselect.selectAllText|The text of the Select All item in the popup"
|
|
12071
|
+
selectAllText="Select All"
|
|
11495
12072
|
>
|
|
11496
12073
|
</ng-container>
|
|
11497
12074
|
|
|
@@ -11526,17 +12103,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
11526
12103
|
[groupTemplate]="groupTagTemplate"
|
|
11527
12104
|
[tagPrefix]="tagPrefix"
|
|
11528
12105
|
[disabledIndices]="disabledIndices"
|
|
12106
|
+
[ariaLabel]="messageFor('chipListLabel')"
|
|
11529
12107
|
(removeTag)="handleRemoveTag($event)"
|
|
11530
12108
|
>
|
|
11531
12109
|
</kendo-taglist>
|
|
11532
12110
|
<input
|
|
11533
12111
|
kendoSearchbar
|
|
11534
12112
|
[ariaControls]="ariaControls"
|
|
11535
|
-
[ariaExpanded]="isOpen"
|
|
12113
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
11536
12114
|
[id]="focusableId"
|
|
11537
12115
|
[tagListId]="tagListId"
|
|
11538
12116
|
[isLoading]="loading"
|
|
11539
|
-
[
|
|
12117
|
+
[hasListAutocomplete]="filterable"
|
|
11540
12118
|
[activeDescendant]="activeDescendant"
|
|
11541
12119
|
[userInput]="text"
|
|
11542
12120
|
[disabled]="disabled"
|
|
@@ -11563,7 +12141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
11563
12141
|
(mousedown)="clearAll($event)"
|
|
11564
12142
|
>
|
|
11565
12143
|
<kendo-icon-wrapper
|
|
11566
|
-
class="k-icon"
|
|
11567
12144
|
name="x"
|
|
11568
12145
|
[svgIcon]="xIcon"
|
|
11569
12146
|
>
|
|
@@ -11638,26 +12215,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
11638
12215
|
[isMultiselect]="true"
|
|
11639
12216
|
[isActionSheetExpanded]="isActionSheetExpanded"
|
|
11640
12217
|
[showStickyHeader]="showStickyHeader"
|
|
12218
|
+
[selectAll]="selectAll && data.length > 0"
|
|
12219
|
+
[selectAllText]="messageFor('selectAllText')"
|
|
12220
|
+
[isAllSelected]="isAllSelected"
|
|
12221
|
+
[isPartiallySelected]="isPartiallySelected"
|
|
12222
|
+
(selectAllClick)="handleSelectAllStateChange($event)"
|
|
11641
12223
|
[customItemTemplate]="customItemTemplate"
|
|
11642
12224
|
[text]="text"
|
|
11643
12225
|
[allowCustom]="allowCustom"
|
|
12226
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
11644
12227
|
>
|
|
12228
|
+
<!--no data template-->
|
|
12229
|
+
@if (data.length === 0) {
|
|
12230
|
+
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
12231
|
+
@if (noDataTemplate) {
|
|
12232
|
+
<ng-template
|
|
12233
|
+
[templateContext]="{
|
|
12234
|
+
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
12235
|
+
}">
|
|
12236
|
+
</ng-template>
|
|
12237
|
+
}
|
|
12238
|
+
@if (!noDataTemplate) {
|
|
12239
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
12240
|
+
}
|
|
12241
|
+
</div>
|
|
12242
|
+
}
|
|
11645
12243
|
</kendo-list>
|
|
11646
|
-
<!--no data template-->
|
|
11647
|
-
@if (data.length === 0) {
|
|
11648
|
-
<div class="k-no-data" [attr.aria-live]="'polite'">
|
|
11649
|
-
@if (noDataTemplate) {
|
|
11650
|
-
<ng-template
|
|
11651
|
-
[templateContext]="{
|
|
11652
|
-
templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
|
|
11653
|
-
}">
|
|
11654
|
-
</ng-template>
|
|
11655
|
-
}
|
|
11656
|
-
@if (!noDataTemplate) {
|
|
11657
|
-
<div>{{ messageFor('noDataText') }}</div>
|
|
11658
|
-
}
|
|
11659
|
-
</div>
|
|
11660
|
-
}
|
|
11661
12244
|
<!--footer template-->
|
|
11662
12245
|
@if (footerTemplate) {
|
|
11663
12246
|
<ng-template
|
|
@@ -11676,6 +12259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
11676
12259
|
args: [AdaptiveRendererComponent]
|
|
11677
12260
|
}], showStickyHeader: [{
|
|
11678
12261
|
type: Input
|
|
12262
|
+
}], selectAll: [{
|
|
12263
|
+
type: Input
|
|
12264
|
+
}], summaryTagAfter: [{
|
|
12265
|
+
type: Input
|
|
11679
12266
|
}], focusableId: [{
|
|
11680
12267
|
type: Input
|
|
11681
12268
|
}], autoClose: [{
|
|
@@ -11764,6 +12351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
11764
12351
|
type: Output
|
|
11765
12352
|
}], removeTag: [{
|
|
11766
12353
|
type: Output
|
|
12354
|
+
}], selectAllChange: [{
|
|
12355
|
+
type: Output
|
|
11767
12356
|
}], container: [{
|
|
11768
12357
|
type: ViewChild,
|
|
11769
12358
|
args: ['container', { read: ViewContainerRef, static: true }]
|
|
@@ -11849,10 +12438,10 @@ class ColumnCellTemplateDirective {
|
|
|
11849
12438
|
constructor(templateRef) {
|
|
11850
12439
|
this.templateRef = templateRef;
|
|
11851
12440
|
}
|
|
11852
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11853
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
12441
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
12442
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ColumnCellTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnCellTemplate]", ngImport: i0 });
|
|
11854
12443
|
}
|
|
11855
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
12444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnCellTemplateDirective, decorators: [{
|
|
11856
12445
|
type: Directive,
|
|
11857
12446
|
args: [{
|
|
11858
12447
|
selector: '[kendoMultiColumnComboBoxColumnCellTemplate]',
|
|
@@ -11884,10 +12473,10 @@ class ColumnHeaderTemplateDirective {
|
|
|
11884
12473
|
constructor(templateRef) {
|
|
11885
12474
|
this.templateRef = templateRef;
|
|
11886
12475
|
}
|
|
11887
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11888
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
12476
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
12477
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ColumnHeaderTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnHeaderTemplate]", ngImport: i0 });
|
|
11889
12478
|
}
|
|
11890
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
12479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnHeaderTemplateDirective, decorators: [{
|
|
11891
12480
|
type: Directive,
|
|
11892
12481
|
args: [{
|
|
11893
12482
|
selector: '[kendoMultiColumnComboBoxColumnHeaderTemplate]',
|
|
@@ -11968,10 +12557,10 @@ class ComboBoxColumnComponent {
|
|
|
11968
12557
|
* @hidden
|
|
11969
12558
|
*/
|
|
11970
12559
|
matchesMedia = true;
|
|
11971
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
11972
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
12560
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ComboBoxColumnComponent, isStandalone: true, selector: "kendo-combobox-column", inputs: { field: "field", title: "title", width: "width", hidden: "hidden", style: "style", headerStyle: "headerStyle", class: "class", headerClass: "headerClass", media: "media" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ColumnCellTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ColumnHeaderTemplateDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
|
|
11973
12562
|
}
|
|
11974
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
12563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxColumnComponent, decorators: [{
|
|
11975
12564
|
type: Component,
|
|
11976
12565
|
args: [{
|
|
11977
12566
|
selector: 'kendo-combobox-column',
|
|
@@ -12113,6 +12702,17 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12113
12702
|
* @hidden
|
|
12114
12703
|
*/
|
|
12115
12704
|
totalColumnsWidth;
|
|
12705
|
+
/**
|
|
12706
|
+
* @hidden
|
|
12707
|
+
*/
|
|
12708
|
+
get visibleColumnsWidths() {
|
|
12709
|
+
return this.columns.reduce((widths, column, index) => {
|
|
12710
|
+
if (!column.hidden && column.matchesMedia) {
|
|
12711
|
+
widths.push(this.getColumnWidth(index));
|
|
12712
|
+
}
|
|
12713
|
+
return widths;
|
|
12714
|
+
}, []);
|
|
12715
|
+
}
|
|
12116
12716
|
get popupWidth() {
|
|
12117
12717
|
const wrapperOffsetWidth = this.wrapper.nativeElement.offsetWidth;
|
|
12118
12718
|
const min = `${wrapperOffsetWidth}px`;
|
|
@@ -12127,7 +12727,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12127
12727
|
* @hidden
|
|
12128
12728
|
*/
|
|
12129
12729
|
get tableSizeClass() {
|
|
12130
|
-
|
|
12730
|
+
const effectiveSize = this.isAdaptive ? 'large' : this.size;
|
|
12731
|
+
return `${effectiveSize ? getSizeClass('table', effectiveSize) : ''}`;
|
|
12131
12732
|
}
|
|
12132
12733
|
/**
|
|
12133
12734
|
* @hidden
|
|
@@ -12246,8 +12847,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12246
12847
|
}
|
|
12247
12848
|
return this.headerTable?.nativeElement.offsetWidth;
|
|
12248
12849
|
}
|
|
12249
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
12250
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
12850
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
12851
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: MultiColumnComboBoxComponent, isStandalone: true, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
|
|
12251
12852
|
SelectionService,
|
|
12252
12853
|
DataService,
|
|
12253
12854
|
NavigationService,
|
|
@@ -12296,6 +12897,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12296
12897
|
popupLabel="Options list"
|
|
12297
12898
|
i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.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"
|
|
12298
12899
|
adaptiveCloseButtonTitle="Close"
|
|
12900
|
+
i18n-listboxLabel="kendo.multicolumncombobox.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
12901
|
+
listboxLabel="Options"
|
|
12299
12902
|
></ng-container>
|
|
12300
12903
|
|
|
12301
12904
|
<ng-container
|
|
@@ -12317,11 +12920,11 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12317
12920
|
<input
|
|
12318
12921
|
kendoSearchbar
|
|
12319
12922
|
[ariaControls]="ariaControls"
|
|
12320
|
-
[ariaExpanded]="isOpen"
|
|
12923
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
12321
12924
|
[id]="focusableId"
|
|
12322
12925
|
[isLoading]="loading"
|
|
12323
12926
|
[isSuggestable]="suggest"
|
|
12324
|
-
[
|
|
12927
|
+
[hasListAutocomplete]="filterable"
|
|
12325
12928
|
[activeDescendant]="activeDescendant"
|
|
12326
12929
|
[userInput]="text"
|
|
12327
12930
|
[suggestedText]="getSuggestion()"
|
|
@@ -12425,7 +13028,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12425
13028
|
<!--grid header-->
|
|
12426
13029
|
<div #header class="k-table-header">
|
|
12427
13030
|
<div #headerWrap class="k-table-header-wrap">
|
|
12428
|
-
<table #headerTable class="k-table"
|
|
13031
|
+
<table #headerTable class="k-table">
|
|
12429
13032
|
<colgroup>
|
|
12430
13033
|
@for (column of columns; track column) {
|
|
12431
13034
|
@if (!column.hidden && column.matchesMedia) {
|
|
@@ -12509,7 +13112,9 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12509
13112
|
[virtual]="virtual"
|
|
12510
13113
|
[type]="'dropdowngrid'"
|
|
12511
13114
|
[rowWidth]="rowWidth"
|
|
13115
|
+
[columnsWidths]="visibleColumnsWidths"
|
|
12512
13116
|
[showStickyHeader]="showStickyHeader"
|
|
13117
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
12513
13118
|
(pageChange)="pageChange($event)"
|
|
12514
13119
|
(listResize)="updateHeaderPadding(header)"
|
|
12515
13120
|
(popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
|
|
@@ -12536,27 +13141,21 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
12536
13141
|
<!--user-defined footer template-->
|
|
12537
13142
|
@if (footerTemplate) {
|
|
12538
13143
|
<div class="k-table-footer">
|
|
12539
|
-
<
|
|
12540
|
-
<
|
|
12541
|
-
<tr class="k-table-row">
|
|
12542
|
-
<td class="k-table-td">
|
|
12543
|
-
<ng-template
|
|
13144
|
+
<span class="k-table-td">
|
|
13145
|
+
<ng-template
|
|
12544
13146
|
[templateContext]="{
|
|
12545
13147
|
templateRef: footerTemplate.templateRef
|
|
12546
13148
|
}"
|
|
12547
|
-
|
|
12548
|
-
|
|
12549
|
-
|
|
12550
|
-
</tr>
|
|
12551
|
-
</tfoot>
|
|
12552
|
-
</table>
|
|
13149
|
+
>
|
|
13150
|
+
</ng-template>
|
|
13151
|
+
</span>
|
|
12553
13152
|
</div>
|
|
12554
13153
|
}
|
|
12555
13154
|
</div>
|
|
12556
13155
|
</ng-template>
|
|
12557
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "
|
|
13156
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
|
|
12558
13157
|
}
|
|
12559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
|
|
12560
13159
|
type: Component,
|
|
12561
13160
|
args: [{
|
|
12562
13161
|
providers: [
|
|
@@ -12610,6 +13209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
12610
13209
|
popupLabel="Options list"
|
|
12611
13210
|
i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.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"
|
|
12612
13211
|
adaptiveCloseButtonTitle="Close"
|
|
13212
|
+
i18n-listboxLabel="kendo.multicolumncombobox.listboxLabel|The accessible label of the listbox that contains the list of options"
|
|
13213
|
+
listboxLabel="Options"
|
|
12613
13214
|
></ng-container>
|
|
12614
13215
|
|
|
12615
13216
|
<ng-container
|
|
@@ -12631,11 +13232,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
12631
13232
|
<input
|
|
12632
13233
|
kendoSearchbar
|
|
12633
13234
|
[ariaControls]="ariaControls"
|
|
12634
|
-
[ariaExpanded]="isOpen"
|
|
13235
|
+
[ariaExpanded]="isAdaptive ? false : isOpen"
|
|
12635
13236
|
[id]="focusableId"
|
|
12636
13237
|
[isLoading]="loading"
|
|
12637
13238
|
[isSuggestable]="suggest"
|
|
12638
|
-
[
|
|
13239
|
+
[hasListAutocomplete]="filterable"
|
|
12639
13240
|
[activeDescendant]="activeDescendant"
|
|
12640
13241
|
[userInput]="text"
|
|
12641
13242
|
[suggestedText]="getSuggestion()"
|
|
@@ -12739,7 +13340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
12739
13340
|
<!--grid header-->
|
|
12740
13341
|
<div #header class="k-table-header">
|
|
12741
13342
|
<div #headerWrap class="k-table-header-wrap">
|
|
12742
|
-
<table #headerTable class="k-table"
|
|
13343
|
+
<table #headerTable class="k-table">
|
|
12743
13344
|
<colgroup>
|
|
12744
13345
|
@for (column of columns; track column) {
|
|
12745
13346
|
@if (!column.hidden && column.matchesMedia) {
|
|
@@ -12823,7 +13424,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
12823
13424
|
[virtual]="virtual"
|
|
12824
13425
|
[type]="'dropdowngrid'"
|
|
12825
13426
|
[rowWidth]="rowWidth"
|
|
13427
|
+
[columnsWidths]="visibleColumnsWidths"
|
|
12826
13428
|
[showStickyHeader]="showStickyHeader"
|
|
13429
|
+
[ariaLabel]="messageFor('listboxLabel')"
|
|
12827
13430
|
(pageChange)="pageChange($event)"
|
|
12828
13431
|
(listResize)="updateHeaderPadding(header)"
|
|
12829
13432
|
(popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
|
|
@@ -12850,20 +13453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
12850
13453
|
<!--user-defined footer template-->
|
|
12851
13454
|
@if (footerTemplate) {
|
|
12852
13455
|
<div class="k-table-footer">
|
|
12853
|
-
<
|
|
12854
|
-
<
|
|
12855
|
-
<tr class="k-table-row">
|
|
12856
|
-
<td class="k-table-td">
|
|
12857
|
-
<ng-template
|
|
13456
|
+
<span class="k-table-td">
|
|
13457
|
+
<ng-template
|
|
12858
13458
|
[templateContext]="{
|
|
12859
13459
|
templateRef: footerTemplate.templateRef
|
|
12860
13460
|
}"
|
|
12861
|
-
|
|
12862
|
-
|
|
12863
|
-
|
|
12864
|
-
</tr>
|
|
12865
|
-
</tfoot>
|
|
12866
|
-
</table>
|
|
13461
|
+
>
|
|
13462
|
+
</ng-template>
|
|
13463
|
+
</span>
|
|
12867
13464
|
</div>
|
|
12868
13465
|
}
|
|
12869
13466
|
</div>
|
|
@@ -12907,10 +13504,10 @@ class NodeTemplateDirective {
|
|
|
12907
13504
|
constructor(templateRef) {
|
|
12908
13505
|
this.templateRef = templateRef;
|
|
12909
13506
|
}
|
|
12910
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
12911
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
13507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
13508
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: NodeTemplateDirective, isStandalone: true, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]", ngImport: i0 });
|
|
12912
13509
|
}
|
|
12913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
13510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NodeTemplateDirective, decorators: [{
|
|
12914
13511
|
type: Directive,
|
|
12915
13512
|
args: [{
|
|
12916
13513
|
selector: '[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]',
|
|
@@ -12993,7 +13590,7 @@ class DropDownTreeComponent {
|
|
|
12993
13590
|
return this.readonly ? '' : null;
|
|
12994
13591
|
}
|
|
12995
13592
|
get hostAriaInvalid() {
|
|
12996
|
-
return this.formControl?.invalid ? true : null;
|
|
13593
|
+
return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
|
|
12997
13594
|
}
|
|
12998
13595
|
get isDisabled() {
|
|
12999
13596
|
return this.disabled || null;
|
|
@@ -13005,7 +13602,7 @@ class DropDownTreeComponent {
|
|
|
13005
13602
|
return this.loading ? 'true' : null;
|
|
13006
13603
|
}
|
|
13007
13604
|
get hostAriaControls() {
|
|
13008
|
-
return this.isOpen ? this.treeViewId : null;
|
|
13605
|
+
return (!this.isAdaptive && this.isOpen) ? this.treeViewId : null;
|
|
13009
13606
|
}
|
|
13010
13607
|
get id() {
|
|
13011
13608
|
return this.focusableId;
|
|
@@ -13017,7 +13614,7 @@ class DropDownTreeComponent {
|
|
|
13017
13614
|
role = 'combobox';
|
|
13018
13615
|
ariaHasPopup = 'tree';
|
|
13019
13616
|
get isAriaExpanded() {
|
|
13020
|
-
return this.isOpen;
|
|
13617
|
+
return this.isAdaptive ? false : this.isOpen;
|
|
13021
13618
|
}
|
|
13022
13619
|
get hostAriaAutocomplete() {
|
|
13023
13620
|
return this.filterable ? 'list' : null;
|
|
@@ -13037,6 +13634,7 @@ class DropDownTreeComponent {
|
|
|
13037
13634
|
// the treeview animations are initially disabled (we don't want expand animations during popup opening)
|
|
13038
13635
|
// re-enables the animations for user interaction
|
|
13039
13636
|
treeview.animate = true;
|
|
13637
|
+
treeview.loadMoreButtonRole = 'treeitem';
|
|
13040
13638
|
this._treeview = treeview;
|
|
13041
13639
|
}
|
|
13042
13640
|
}
|
|
@@ -13337,7 +13935,12 @@ class DropDownTreeComponent {
|
|
|
13337
13935
|
get isFilterActive() {
|
|
13338
13936
|
return this.filterInput && document.activeElement === this.filterInput.nativeElement;
|
|
13339
13937
|
}
|
|
13340
|
-
popupRef
|
|
13938
|
+
set popupRef(value) {
|
|
13939
|
+
this._popupRef.set(value);
|
|
13940
|
+
}
|
|
13941
|
+
get popupRef() {
|
|
13942
|
+
return this._popupRef();
|
|
13943
|
+
}
|
|
13341
13944
|
/**
|
|
13342
13945
|
* @hidden
|
|
13343
13946
|
*/
|
|
@@ -13492,6 +14095,7 @@ class DropDownTreeComponent {
|
|
|
13492
14095
|
_size;
|
|
13493
14096
|
_rounded;
|
|
13494
14097
|
_fillMode;
|
|
14098
|
+
_popupRef = signal(null, ...(ngDevMode ? [{ debugName: "_popupRef" }] : []));
|
|
13495
14099
|
_searchableNodes = [];
|
|
13496
14100
|
_typedValue = '';
|
|
13497
14101
|
printableCharacters = new Subject();
|
|
@@ -13736,7 +14340,7 @@ class DropDownTreeComponent {
|
|
|
13736
14340
|
* @hidden
|
|
13737
14341
|
*/
|
|
13738
14342
|
get popupContainerClasses() {
|
|
13739
|
-
const containerClasses = ['k-dropdowntree-popup'];
|
|
14343
|
+
const containerClasses = ['k-list-container', 'k-dropdowntree-popup'];
|
|
13740
14344
|
if (!this.popupSettings.popupClass) {
|
|
13741
14345
|
return containerClasses;
|
|
13742
14346
|
}
|
|
@@ -14194,8 +14798,8 @@ class DropDownTreeComponent {
|
|
|
14194
14798
|
this.opened.emit();
|
|
14195
14799
|
this.removeTreeViewFromTabOrder();
|
|
14196
14800
|
}
|
|
14197
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
14198
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
14801
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
14802
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-readonly": "this.readonly" } }, providers: [
|
|
14199
14803
|
DataService,
|
|
14200
14804
|
SelectionService,
|
|
14201
14805
|
NavigationService,
|
|
@@ -14314,6 +14918,7 @@ class DropDownTreeComponent {
|
|
|
14314
14918
|
[title]="adaptiveTitle"
|
|
14315
14919
|
[showTextInput]="filterable"
|
|
14316
14920
|
[subtitle]="adaptiveSubtitle"
|
|
14921
|
+
[showListContainer]="false"
|
|
14317
14922
|
(closePopup)="togglePopup(false)"
|
|
14318
14923
|
(textInputChange)="handleFilterInputChange($event)"
|
|
14319
14924
|
[placeholder]="placeholder"
|
|
@@ -14330,14 +14935,14 @@ class DropDownTreeComponent {
|
|
|
14330
14935
|
class="k-textbox k-input"
|
|
14331
14936
|
[ngClass]="filterInputClasses"
|
|
14332
14937
|
>
|
|
14333
|
-
<span class="k-input-prefix">
|
|
14938
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
14334
14939
|
<kendo-icon-wrapper
|
|
14335
|
-
class="k-icon"
|
|
14336
14940
|
name="search"
|
|
14337
14941
|
[svgIcon]="searchIcon"
|
|
14338
14942
|
>
|
|
14339
14943
|
</kendo-icon-wrapper>
|
|
14340
14944
|
</span>
|
|
14945
|
+
<kendo-separator></kendo-separator>
|
|
14341
14946
|
<input
|
|
14342
14947
|
#filterInput
|
|
14343
14948
|
(input)="handleFilterInputChange($event.target)"
|
|
@@ -14369,7 +14974,7 @@ class DropDownTreeComponent {
|
|
|
14369
14974
|
<kendo-treeview
|
|
14370
14975
|
#treeview
|
|
14371
14976
|
[attr.id]="treeViewId"
|
|
14372
|
-
[size]="
|
|
14977
|
+
[size]="isAdaptive ? 'large' : size"
|
|
14373
14978
|
[nodes]="data"
|
|
14374
14979
|
[style.maxHeight.px]="listHeight"
|
|
14375
14980
|
[animate]="false"
|
|
@@ -14422,9 +15027,9 @@ class DropDownTreeComponent {
|
|
|
14422
15027
|
@if (isOpen || isAdaptiveModeEnabled) {
|
|
14423
15028
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
14424
15029
|
}
|
|
14425
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15030
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14426
15031
|
}
|
|
14427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
15032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeComponent, decorators: [{
|
|
14428
15033
|
type: Component,
|
|
14429
15034
|
args: [{
|
|
14430
15035
|
exportAs: 'kendoDropDownTree',
|
|
@@ -14549,6 +15154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
14549
15154
|
[title]="adaptiveTitle"
|
|
14550
15155
|
[showTextInput]="filterable"
|
|
14551
15156
|
[subtitle]="adaptiveSubtitle"
|
|
15157
|
+
[showListContainer]="false"
|
|
14552
15158
|
(closePopup)="togglePopup(false)"
|
|
14553
15159
|
(textInputChange)="handleFilterInputChange($event)"
|
|
14554
15160
|
[placeholder]="placeholder"
|
|
@@ -14565,14 +15171,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
14565
15171
|
class="k-textbox k-input"
|
|
14566
15172
|
[ngClass]="filterInputClasses"
|
|
14567
15173
|
>
|
|
14568
|
-
<span class="k-input-prefix">
|
|
15174
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
14569
15175
|
<kendo-icon-wrapper
|
|
14570
|
-
class="k-icon"
|
|
14571
15176
|
name="search"
|
|
14572
15177
|
[svgIcon]="searchIcon"
|
|
14573
15178
|
>
|
|
14574
15179
|
</kendo-icon-wrapper>
|
|
14575
15180
|
</span>
|
|
15181
|
+
<kendo-separator></kendo-separator>
|
|
14576
15182
|
<input
|
|
14577
15183
|
#filterInput
|
|
14578
15184
|
(input)="handleFilterInputChange($event.target)"
|
|
@@ -14604,7 +15210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
14604
15210
|
<kendo-treeview
|
|
14605
15211
|
#treeview
|
|
14606
15212
|
[attr.id]="treeViewId"
|
|
14607
|
-
[size]="
|
|
15213
|
+
[size]="isAdaptive ? 'large' : size"
|
|
14608
15214
|
[nodes]="data"
|
|
14609
15215
|
[style.maxHeight.px]="listHeight"
|
|
14610
15216
|
[animate]="false"
|
|
@@ -14660,7 +15266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
14660
15266
|
`,
|
|
14661
15267
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
14662
15268
|
standalone: true,
|
|
14663
|
-
imports: [LocalizedMessagesDirective, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent]
|
|
15269
|
+
imports: [LocalizedMessagesDirective, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent, SeparatorComponent]
|
|
14664
15270
|
}]
|
|
14665
15271
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i7.AdaptiveService }], propDecorators: { icon: [{
|
|
14666
15272
|
type: Input
|
|
@@ -14900,10 +15506,10 @@ class MultiSelectTreeLookupService {
|
|
|
14900
15506
|
};
|
|
14901
15507
|
});
|
|
14902
15508
|
}
|
|
14903
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
14904
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
15509
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
15510
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeLookupService });
|
|
14905
15511
|
}
|
|
14906
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
15512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
|
|
14907
15513
|
type: Injectable
|
|
14908
15514
|
}] });
|
|
14909
15515
|
|
|
@@ -14964,10 +15570,10 @@ class BaseCheckDirective {
|
|
|
14964
15570
|
getKey(item, level) {
|
|
14965
15571
|
return valueFrom(item, this.valueField) + '_' + (this.isHeterogeneous ? level : 0);
|
|
14966
15572
|
}
|
|
14967
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
14968
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
15573
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
15574
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: BaseCheckDirective, isStandalone: true, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
|
|
14969
15575
|
}
|
|
14970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
15576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BaseCheckDirective, decorators: [{
|
|
14971
15577
|
type: Directive
|
|
14972
15578
|
}], propDecorators: { valueField: [{
|
|
14973
15579
|
type: Input
|
|
@@ -15115,10 +15721,10 @@ class CheckDirective extends BaseCheckDirective {
|
|
|
15115
15721
|
}
|
|
15116
15722
|
return false;
|
|
15117
15723
|
}
|
|
15118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
15119
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
15724
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckDirective, deps: [{ token: i1$1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
15725
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: CheckDirective, isStandalone: true, selector: "[kendoMultiSelectTreeCheckable]", inputs: { checkable: "checkable", valueField: "valueField", checkedItems: "checkedItems" }, outputs: { checkedItemsChange: "checkedItemsChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
15120
15726
|
}
|
|
15121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
15727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckDirective, decorators: [{
|
|
15122
15728
|
type: Directive,
|
|
15123
15729
|
args: [{
|
|
15124
15730
|
selector: '[kendoMultiSelectTreeCheckable]',
|
|
@@ -15268,10 +15874,10 @@ class CheckAllDirective extends BaseCheckDirective {
|
|
|
15268
15874
|
});
|
|
15269
15875
|
return childrenChecked || this.isItemChecked(lookup.item);
|
|
15270
15876
|
}
|
|
15271
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
15272
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
15877
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckAllDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
15878
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: CheckAllDirective, isStandalone: true, selector: "[checkAll]", inputs: { lastAction: "lastAction", treeview: "treeview", checkedItems: "checkedItems", valueField: "valueField", focused: ["checkAll", "focused"] }, outputs: { checkedItemsChange: "checkedItemsChange" }, host: { listeners: { "change": "handleChange($event.target)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
15273
15879
|
}
|
|
15274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
15880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckAllDirective, decorators: [{
|
|
15275
15881
|
type: Directive,
|
|
15276
15882
|
args: [{
|
|
15277
15883
|
selector: '[checkAll]',
|
|
@@ -15364,14 +15970,11 @@ class MultiSelectTreeComponent {
|
|
|
15364
15970
|
return this.disabled || null;
|
|
15365
15971
|
}
|
|
15366
15972
|
treeViewId = `k-${guid()}`;
|
|
15367
|
-
get hostAriaAutocomplete() {
|
|
15368
|
-
return this.filterable ? 'list' : null;
|
|
15369
|
-
}
|
|
15370
15973
|
get isLoading() {
|
|
15371
15974
|
return this.loading;
|
|
15372
15975
|
}
|
|
15373
15976
|
get hostAriaInvalid() {
|
|
15374
|
-
return this.formControl?.invalid ? true : null;
|
|
15977
|
+
return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
|
|
15375
15978
|
}
|
|
15376
15979
|
get isBusy() {
|
|
15377
15980
|
return this.loading ? 'true' : null;
|
|
@@ -15383,14 +15986,9 @@ class MultiSelectTreeComponent {
|
|
|
15383
15986
|
get hostTabIndex() {
|
|
15384
15987
|
return this.tabindex;
|
|
15385
15988
|
}
|
|
15386
|
-
role = 'combobox';
|
|
15387
|
-
ariaHasPopup = 'tree';
|
|
15388
15989
|
get isReadonly() {
|
|
15389
15990
|
return this.readonly ? '' : null;
|
|
15390
15991
|
}
|
|
15391
|
-
get ariaDescribedBy() {
|
|
15392
|
-
return this.tagListId;
|
|
15393
|
-
}
|
|
15394
15992
|
get ariaActiveDescendant() {
|
|
15395
15993
|
return this.focusedTagId;
|
|
15396
15994
|
}
|
|
@@ -16085,7 +16683,6 @@ class MultiSelectTreeComponent {
|
|
|
16085
16683
|
this._typedValue = '';
|
|
16086
16684
|
}));
|
|
16087
16685
|
this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
|
|
16088
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
|
|
16089
16686
|
this.subs.add(this.localization
|
|
16090
16687
|
.changes.subscribe(({ rtl }) => {
|
|
16091
16688
|
this.direction = rtl ? 'rtl' : 'ltr';
|
|
@@ -16539,9 +17136,7 @@ class MultiSelectTreeComponent {
|
|
|
16539
17136
|
popupWrapper.style.minWidth = min;
|
|
16540
17137
|
popupWrapper.style.width = max;
|
|
16541
17138
|
popupWrapper.style.height = this.height;
|
|
16542
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
|
|
16543
17139
|
this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
|
|
16544
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
|
|
16545
17140
|
this.popupRef.popupOpen.subscribe(() => {
|
|
16546
17141
|
this.cdr.detectChanges();
|
|
16547
17142
|
this.opened.emit();
|
|
@@ -16562,8 +17157,6 @@ class MultiSelectTreeComponent {
|
|
|
16562
17157
|
if (this.popupRef) {
|
|
16563
17158
|
this.popupRef.close();
|
|
16564
17159
|
this.popupRef = null;
|
|
16565
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
|
|
16566
|
-
this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
|
|
16567
17160
|
this.clearFilter();
|
|
16568
17161
|
}
|
|
16569
17162
|
}
|
|
@@ -16877,8 +17470,6 @@ class MultiSelectTreeComponent {
|
|
|
16877
17470
|
closeActionSheet() {
|
|
16878
17471
|
this.wrapper.nativeElement.focus();
|
|
16879
17472
|
this.actionSheet.toggle(false);
|
|
16880
|
-
this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
|
|
16881
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
|
|
16882
17473
|
this.clearFilter();
|
|
16883
17474
|
this.closed.emit();
|
|
16884
17475
|
}
|
|
@@ -16886,13 +17477,11 @@ class MultiSelectTreeComponent {
|
|
|
16886
17477
|
this.actionSheet.toggle(true);
|
|
16887
17478
|
this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
|
|
16888
17479
|
this.cdr.detectChanges();
|
|
16889
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
|
|
16890
|
-
this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
|
|
16891
17480
|
this.cdr.detectChanges();
|
|
16892
17481
|
this.opened.emit();
|
|
16893
17482
|
}
|
|
16894
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
16895
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
17483
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
17484
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.isReadonly", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
|
|
16896
17485
|
LocalizationService,
|
|
16897
17486
|
NavigationService,
|
|
16898
17487
|
DataService,
|
|
@@ -16928,6 +17517,9 @@ class MultiSelectTreeComponent {
|
|
|
16928
17517
|
i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
|
|
16929
17518
|
clearTitle="clear"
|
|
16930
17519
|
|
|
17520
|
+
i18n-chipListLabel="kendo.multiselecttree.chipListLabel|The accessible label of the tag list element that contains the selected items"
|
|
17521
|
+
chipListLabel="chip list"
|
|
17522
|
+
|
|
16931
17523
|
i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
|
|
16932
17524
|
checkAllText="Check all"
|
|
16933
17525
|
|
|
@@ -16942,6 +17534,9 @@ class MultiSelectTreeComponent {
|
|
|
16942
17534
|
|
|
16943
17535
|
i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
16944
17536
|
filterInputPlaceholder="Filter"
|
|
17537
|
+
|
|
17538
|
+
i18n-inputLabel="kendo.multiselecttree.inputLabel|The text set as aria-label on the combobox input element"
|
|
17539
|
+
inputLabel="Select items"
|
|
16945
17540
|
>
|
|
16946
17541
|
</ng-container>
|
|
16947
17542
|
<kendo-taglist
|
|
@@ -16960,10 +17555,19 @@ class MultiSelectTreeComponent {
|
|
|
16960
17555
|
[template]="tagTemplate"
|
|
16961
17556
|
[groupTemplate]="groupTagTemplate"
|
|
16962
17557
|
[disabledIndices]="disabledIndices"
|
|
17558
|
+
[ariaLabel]="messageFor('chipListLabel')"
|
|
16963
17559
|
(removeTag)="handleRemoveTag($event)"
|
|
16964
17560
|
>
|
|
16965
17561
|
</kendo-taglist>
|
|
16966
|
-
<span class="k-input-inner"
|
|
17562
|
+
<span class="k-input-inner"
|
|
17563
|
+
role="combobox"
|
|
17564
|
+
aria-haspopup="tree"
|
|
17565
|
+
[attr.aria-expanded]="isOpen"
|
|
17566
|
+
[attr.aria-autocomplete]="filterable ? 'list' : null"
|
|
17567
|
+
[attr.aria-controls]="isOpen ? treeViewId : null"
|
|
17568
|
+
[attr.aria-describedby]="tags?.length ? tagListId : null"
|
|
17569
|
+
[attr.aria-disabled]="disabled || null"
|
|
17570
|
+
[attr.aria-label]="messageFor('inputLabel')">
|
|
16967
17571
|
@if (!tags || !tags.length) {
|
|
16968
17572
|
<span
|
|
16969
17573
|
class="k-input-value-text"
|
|
@@ -16981,7 +17585,6 @@ class MultiSelectTreeComponent {
|
|
|
16981
17585
|
(click)="clearAll($event)"
|
|
16982
17586
|
>
|
|
16983
17587
|
<kendo-icon-wrapper
|
|
16984
|
-
class="k-icon"
|
|
16985
17588
|
name="x"
|
|
16986
17589
|
[svgIcon]="xIcon"
|
|
16987
17590
|
>
|
|
@@ -17004,6 +17607,7 @@ class MultiSelectTreeComponent {
|
|
|
17004
17607
|
[title]="adaptiveTitle"
|
|
17005
17608
|
[showTextInput]="filterable"
|
|
17006
17609
|
[subtitle]="adaptiveSubtitle"
|
|
17610
|
+
[showListContainer]="false"
|
|
17007
17611
|
(closePopup)="togglePopup(false)"
|
|
17008
17612
|
(textInputChange)="onFilterChange($event)"
|
|
17009
17613
|
[searchBarValue]="filter"
|
|
@@ -17020,7 +17624,7 @@ class MultiSelectTreeComponent {
|
|
|
17020
17624
|
class="k-textbox k-input"
|
|
17021
17625
|
[ngClass]="filterInputClasses"
|
|
17022
17626
|
>
|
|
17023
|
-
<span class="k-input-prefix">
|
|
17627
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
17024
17628
|
<kendo-icon-wrapper
|
|
17025
17629
|
class="k-icon"
|
|
17026
17630
|
name="search"
|
|
@@ -17028,6 +17632,7 @@ class MultiSelectTreeComponent {
|
|
|
17028
17632
|
>
|
|
17029
17633
|
</kendo-icon-wrapper>
|
|
17030
17634
|
</span>
|
|
17635
|
+
<kendo-separator></kendo-separator>
|
|
17031
17636
|
<input
|
|
17032
17637
|
#filterInput
|
|
17033
17638
|
(input)="handleFilterInputChange($event.target)"
|
|
@@ -17151,9 +17756,9 @@ class MultiSelectTreeComponent {
|
|
|
17151
17756
|
@if (isOpen || isAdaptiveModeEnabled) {
|
|
17152
17757
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
17153
17758
|
}
|
|
17154
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
17759
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }] });
|
|
17155
17760
|
}
|
|
17156
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
17761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
|
|
17157
17762
|
type: Component,
|
|
17158
17763
|
args: [{
|
|
17159
17764
|
exportAs: 'kendoMultiSelectTree',
|
|
@@ -17195,6 +17800,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17195
17800
|
i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
|
|
17196
17801
|
clearTitle="clear"
|
|
17197
17802
|
|
|
17803
|
+
i18n-chipListLabel="kendo.multiselecttree.chipListLabel|The accessible label of the tag list element that contains the selected items"
|
|
17804
|
+
chipListLabel="chip list"
|
|
17805
|
+
|
|
17198
17806
|
i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
|
|
17199
17807
|
checkAllText="Check all"
|
|
17200
17808
|
|
|
@@ -17209,6 +17817,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17209
17817
|
|
|
17210
17818
|
i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
17211
17819
|
filterInputPlaceholder="Filter"
|
|
17820
|
+
|
|
17821
|
+
i18n-inputLabel="kendo.multiselecttree.inputLabel|The text set as aria-label on the combobox input element"
|
|
17822
|
+
inputLabel="Select items"
|
|
17212
17823
|
>
|
|
17213
17824
|
</ng-container>
|
|
17214
17825
|
<kendo-taglist
|
|
@@ -17227,10 +17838,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17227
17838
|
[template]="tagTemplate"
|
|
17228
17839
|
[groupTemplate]="groupTagTemplate"
|
|
17229
17840
|
[disabledIndices]="disabledIndices"
|
|
17841
|
+
[ariaLabel]="messageFor('chipListLabel')"
|
|
17230
17842
|
(removeTag)="handleRemoveTag($event)"
|
|
17231
17843
|
>
|
|
17232
17844
|
</kendo-taglist>
|
|
17233
|
-
<span class="k-input-inner"
|
|
17845
|
+
<span class="k-input-inner"
|
|
17846
|
+
role="combobox"
|
|
17847
|
+
aria-haspopup="tree"
|
|
17848
|
+
[attr.aria-expanded]="isOpen"
|
|
17849
|
+
[attr.aria-autocomplete]="filterable ? 'list' : null"
|
|
17850
|
+
[attr.aria-controls]="isOpen ? treeViewId : null"
|
|
17851
|
+
[attr.aria-describedby]="tags?.length ? tagListId : null"
|
|
17852
|
+
[attr.aria-disabled]="disabled || null"
|
|
17853
|
+
[attr.aria-label]="messageFor('inputLabel')">
|
|
17234
17854
|
@if (!tags || !tags.length) {
|
|
17235
17855
|
<span
|
|
17236
17856
|
class="k-input-value-text"
|
|
@@ -17248,7 +17868,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17248
17868
|
(click)="clearAll($event)"
|
|
17249
17869
|
>
|
|
17250
17870
|
<kendo-icon-wrapper
|
|
17251
|
-
class="k-icon"
|
|
17252
17871
|
name="x"
|
|
17253
17872
|
[svgIcon]="xIcon"
|
|
17254
17873
|
>
|
|
@@ -17271,6 +17890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17271
17890
|
[title]="adaptiveTitle"
|
|
17272
17891
|
[showTextInput]="filterable"
|
|
17273
17892
|
[subtitle]="adaptiveSubtitle"
|
|
17893
|
+
[showListContainer]="false"
|
|
17274
17894
|
(closePopup)="togglePopup(false)"
|
|
17275
17895
|
(textInputChange)="onFilterChange($event)"
|
|
17276
17896
|
[searchBarValue]="filter"
|
|
@@ -17287,7 +17907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17287
17907
|
class="k-textbox k-input"
|
|
17288
17908
|
[ngClass]="filterInputClasses"
|
|
17289
17909
|
>
|
|
17290
|
-
<span class="k-input-prefix">
|
|
17910
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
17291
17911
|
<kendo-icon-wrapper
|
|
17292
17912
|
class="k-icon"
|
|
17293
17913
|
name="search"
|
|
@@ -17295,6 +17915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17295
17915
|
>
|
|
17296
17916
|
</kendo-icon-wrapper>
|
|
17297
17917
|
</span>
|
|
17918
|
+
<kendo-separator></kendo-separator>
|
|
17298
17919
|
<input
|
|
17299
17920
|
#filterInput
|
|
17300
17921
|
(input)="handleFilterInputChange($event.target)"
|
|
@@ -17420,17 +18041,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17420
18041
|
}
|
|
17421
18042
|
`,
|
|
17422
18043
|
standalone: true,
|
|
17423
|
-
imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
|
|
18044
|
+
imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent, SeparatorComponent]
|
|
17424
18045
|
}]
|
|
17425
18046
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: i0.Renderer2 }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: MultiSelectTreeLookupService }, { type: i7.AdaptiveService }], propDecorators: { isDisabled: [{
|
|
17426
18047
|
type: HostBinding,
|
|
17427
18048
|
args: ['class.k-disabled']
|
|
17428
|
-
}, {
|
|
17429
|
-
type: HostBinding,
|
|
17430
|
-
args: ['attr.aria-disabled']
|
|
17431
|
-
}], hostAriaAutocomplete: [{
|
|
17432
|
-
type: HostBinding,
|
|
17433
|
-
args: ['attr.aria-autocomplete']
|
|
17434
18049
|
}], isLoading: [{
|
|
17435
18050
|
type: HostBinding,
|
|
17436
18051
|
args: ['class.k-loading']
|
|
@@ -17449,18 +18064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
17449
18064
|
}], hostTabIndex: [{
|
|
17450
18065
|
type: HostBinding,
|
|
17451
18066
|
args: ['attr.tabindex']
|
|
17452
|
-
}], role: [{
|
|
17453
|
-
type: HostBinding,
|
|
17454
|
-
args: ['attr.role']
|
|
17455
|
-
}], ariaHasPopup: [{
|
|
17456
|
-
type: HostBinding,
|
|
17457
|
-
args: ['attr.aria-haspopup']
|
|
17458
18067
|
}], isReadonly: [{
|
|
17459
18068
|
type: HostBinding,
|
|
17460
18069
|
args: ['attr.readonly']
|
|
17461
|
-
}], ariaDescribedBy: [{
|
|
17462
|
-
type: HostBinding,
|
|
17463
|
-
args: ['attr.aria-describedby']
|
|
17464
18070
|
}], ariaActiveDescendant: [{
|
|
17465
18071
|
type: HostBinding,
|
|
17466
18072
|
args: ['attr.aria-activedescendant']
|
|
@@ -17637,10 +18243,10 @@ class DropDownTreeFlatBindingDirective extends FlatDataBindingDirective {
|
|
|
17637
18243
|
}
|
|
17638
18244
|
super.ngOnChanges(changes);
|
|
17639
18245
|
}
|
|
17640
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
17641
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
18246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18247
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DropDownTreeFlatBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeFlatBinding]", inputs: { nodes: ["kendoDropDownTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
17642
18248
|
}
|
|
17643
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
|
|
17644
18250
|
type: Directive,
|
|
17645
18251
|
args: [{
|
|
17646
18252
|
selector: '[kendoDropDownTreeFlatBinding]',
|
|
@@ -17694,10 +18300,10 @@ class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirective {
|
|
|
17694
18300
|
}
|
|
17695
18301
|
super.ngOnChanges(changes);
|
|
17696
18302
|
}
|
|
17697
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
17698
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
18303
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18304
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DropDownTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
17699
18305
|
}
|
|
17700
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18306
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
|
|
17701
18307
|
type: Directive,
|
|
17702
18308
|
args: [{
|
|
17703
18309
|
selector: '[kendoDropDownTreeHierarchyBinding]',
|
|
@@ -17752,10 +18358,10 @@ class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirective {
|
|
|
17752
18358
|
}
|
|
17753
18359
|
super.ngOnChanges(changes);
|
|
17754
18360
|
}
|
|
17755
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
17756
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
18361
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18362
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: MultiSelectTreeFlatBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { nodes: ["kendoMultiSelectTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
17757
18363
|
}
|
|
17758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
|
|
17759
18365
|
type: Directive,
|
|
17760
18366
|
args: [{
|
|
17761
18367
|
selector: '[kendoMultiSelectTreeFlatBinding]',
|
|
@@ -17809,10 +18415,10 @@ class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDirective
|
|
|
17809
18415
|
}
|
|
17810
18416
|
super.ngOnChanges(changes);
|
|
17811
18417
|
}
|
|
17812
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
17813
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
18418
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18419
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: MultiSelectTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
|
|
17814
18420
|
}
|
|
17815
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
|
|
17816
18422
|
type: Directive,
|
|
17817
18423
|
args: [{
|
|
17818
18424
|
selector: '[kendoMultiSelectTreeHierarchyBinding]',
|
|
@@ -17860,10 +18466,10 @@ class DropDownTreesExpandDirective extends ExpandDirective {
|
|
|
17860
18466
|
super(dropDownTree);
|
|
17861
18467
|
this.dropDownTree = dropDownTree;
|
|
17862
18468
|
}
|
|
17863
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
17864
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
18469
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesExpandDirective, deps: [{ token: i1$1.ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18470
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DropDownTreesExpandDirective, isStandalone: true, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: { isExpanded: ["isNodeExpanded", "isExpanded"] }, usesInheritance: true, ngImport: i0 });
|
|
17865
18471
|
}
|
|
17866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18472
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesExpandDirective, decorators: [{
|
|
17867
18473
|
type: Directive,
|
|
17868
18474
|
args: [{
|
|
17869
18475
|
selector: '[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]',
|
|
@@ -17881,7 +18487,6 @@ const DEFAULT_FILTER_SETTINGS = {
|
|
|
17881
18487
|
/**
|
|
17882
18488
|
* Implements an event handler for the `filterChange` event of a DropDowns component
|
|
17883
18489
|
* which performs simple data filtering.
|
|
17884
|
-
* Currently, the built-in filtering does not work with [grouped data](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupby).
|
|
17885
18490
|
*
|
|
17886
18491
|
* @example
|
|
17887
18492
|
* ```ts
|
|
@@ -17941,7 +18546,14 @@ class FilterDirective {
|
|
|
17941
18546
|
}
|
|
17942
18547
|
}
|
|
17943
18548
|
handleFilterChange(query) {
|
|
17944
|
-
|
|
18549
|
+
if (isGroupedData(this.data)) {
|
|
18550
|
+
this.component.data = this.data
|
|
18551
|
+
.map(group => ({ ...group, items: group.items.filter(item => this.matchesAnyField(item, query)) }))
|
|
18552
|
+
.filter(group => group.items.length > 0);
|
|
18553
|
+
}
|
|
18554
|
+
else {
|
|
18555
|
+
this.component.data = this.data.filter(item => this.matchesAnyField(item, query));
|
|
18556
|
+
}
|
|
17945
18557
|
}
|
|
17946
18558
|
matchesAnyField(item, query) {
|
|
17947
18559
|
const normalizedQuery = this.normalizeValue(query);
|
|
@@ -17984,10 +18596,10 @@ class FilterDirective {
|
|
|
17984
18596
|
const providedFields = isPresent(settings) && typeof settings === 'object' ? settings.fields : [];
|
|
17985
18597
|
return Object.assign({}, DEFAULT_FILTER_SETTINGS, settings, { fields: this.getFilterFields(providedFields) });
|
|
17986
18598
|
}
|
|
17987
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
17988
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
18599
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterDirective, deps: [{ token: FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18600
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FilterDirective, isStandalone: true, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
|
|
17989
18601
|
}
|
|
17990
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterDirective, decorators: [{
|
|
17991
18603
|
type: Directive,
|
|
17992
18604
|
args: [{
|
|
17993
18605
|
selector: '[kendoDropDownFilter]',
|
|
@@ -18018,7 +18630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18018
18630
|
* <kendo-combobox>
|
|
18019
18631
|
* <kendo-combobox-messages
|
|
18020
18632
|
* noDataText="No items found"
|
|
18021
|
-
* filterInputPlaceholder="Search items"
|
|
18633
|
+
* filterInputPlaceholder="Search items"
|
|
18634
|
+
* clearTitle="Clear selection">
|
|
18022
18635
|
* </kendo-combobox-messages>
|
|
18023
18636
|
* </kendo-combobox>
|
|
18024
18637
|
*
|
|
@@ -18032,7 +18645,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18032
18645
|
* <kendo-autocomplete>
|
|
18033
18646
|
* <kendo-autocomplete-messages
|
|
18034
18647
|
* noDataText="No items found"
|
|
18035
|
-
* filterInputPlaceholder="Type to search"
|
|
18648
|
+
* filterInputPlaceholder="Type to search"
|
|
18649
|
+
* clearTitle="Clear input">
|
|
18036
18650
|
* </kendo-autocomplete-messages>
|
|
18037
18651
|
* </kendo-autocomplete>
|
|
18038
18652
|
*
|
|
@@ -18067,15 +18681,15 @@ class CustomMessagesComponent extends Messages {
|
|
|
18067
18681
|
get override() {
|
|
18068
18682
|
return true;
|
|
18069
18683
|
}
|
|
18070
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18071
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
18684
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
18685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
|
|
18072
18686
|
{
|
|
18073
18687
|
provide: Messages,
|
|
18074
18688
|
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
18075
18689
|
}
|
|
18076
18690
|
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
18077
18691
|
}
|
|
18078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
18079
18693
|
type: Component,
|
|
18080
18694
|
args: [{
|
|
18081
18695
|
providers: [
|
|
@@ -18090,66 +18704,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18090
18704
|
}]
|
|
18091
18705
|
}], ctorParameters: () => [{ type: i1.LocalizationService }] });
|
|
18092
18706
|
|
|
18093
|
-
/**
|
|
18094
|
-
* Configures the MultiSelect to show one summary tag for all selected items.
|
|
18095
|
-
* Set a number to display the summary tag after the respective number of items are selected.
|
|
18096
|
-
* [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode).
|
|
18097
|
-
*
|
|
18098
|
-
* @example
|
|
18099
|
-
* ```ts-no-run
|
|
18100
|
-
* <kendo-multiselect kendoMultiSelectSummaryTag [data]="data"></kendo-multiselect>
|
|
18101
|
-
* ```
|
|
18102
|
-
*
|
|
18103
|
-
* @example
|
|
18104
|
-
* ```ts-no-run
|
|
18105
|
-
* <kendo-multiselect [kendoMultiSelectSummaryTag]="2" [data]="data"></kendo-multiselect>
|
|
18106
|
-
* ```
|
|
18107
|
-
*/
|
|
18108
|
-
class SummaryTagDirective {
|
|
18109
|
-
multiSelectComponent;
|
|
18110
|
-
/**
|
|
18111
|
-
* Sets the number of selected items after which the summary tag appears.
|
|
18112
|
-
*
|
|
18113
|
-
* @default 0
|
|
18114
|
-
*/
|
|
18115
|
-
showAfter = 0;
|
|
18116
|
-
constructor(multiSelectComponent) {
|
|
18117
|
-
this.multiSelectComponent = multiSelectComponent;
|
|
18118
|
-
this.createTagMapper();
|
|
18119
|
-
}
|
|
18120
|
-
ngOnChanges(changes) {
|
|
18121
|
-
if (isPresent(changes.showAfter)) {
|
|
18122
|
-
this.createTagMapper();
|
|
18123
|
-
this.multiSelectComponent.onTagMapperChange();
|
|
18124
|
-
}
|
|
18125
|
-
}
|
|
18126
|
-
createTagMapper() {
|
|
18127
|
-
const showAfter = parseNumber(this.showAfter);
|
|
18128
|
-
this.multiSelectComponent.tagMapper = (tags) => {
|
|
18129
|
-
if (tags.length > showAfter) {
|
|
18130
|
-
const result = tags.slice(0, showAfter);
|
|
18131
|
-
result.push(tags.slice(showAfter, tags.length));
|
|
18132
|
-
return result;
|
|
18133
|
-
}
|
|
18134
|
-
else {
|
|
18135
|
-
return tags;
|
|
18136
|
-
}
|
|
18137
|
-
};
|
|
18138
|
-
}
|
|
18139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SummaryTagDirective, deps: [{ token: MultiSelectComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18140
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SummaryTagDirective, isStandalone: true, selector: "[kendoMultiSelectSummaryTag]", inputs: { showAfter: ["kendoMultiSelectSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
|
|
18141
|
-
}
|
|
18142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SummaryTagDirective, decorators: [{
|
|
18143
|
-
type: Directive,
|
|
18144
|
-
args: [{
|
|
18145
|
-
selector: '[kendoMultiSelectSummaryTag]',
|
|
18146
|
-
standalone: true
|
|
18147
|
-
}]
|
|
18148
|
-
}], ctorParameters: () => [{ type: MultiSelectComponent }], propDecorators: { showAfter: [{
|
|
18149
|
-
type: Input,
|
|
18150
|
-
args: ['kendoMultiSelectSummaryTag']
|
|
18151
|
-
}] } });
|
|
18152
|
-
|
|
18153
18707
|
/**
|
|
18154
18708
|
* Configures the MultiSelectTree to show one single summary tag for all selected data items.
|
|
18155
18709
|
* When a number is set, the summary tag is shown after the corresponding number of data items are selected (see examples).
|
|
@@ -18198,10 +18752,10 @@ class MultiSelectTreeSummaryTagDirective {
|
|
|
18198
18752
|
}
|
|
18199
18753
|
};
|
|
18200
18754
|
}
|
|
18201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18202
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
18755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, deps: [{ token: MultiSelectTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18756
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: MultiSelectTreeSummaryTagDirective, isStandalone: true, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: { showAfter: ["kendoMultiSelectTreeSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
|
|
18203
18757
|
}
|
|
18204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, decorators: [{
|
|
18205
18759
|
type: Directive,
|
|
18206
18760
|
args: [{
|
|
18207
18761
|
selector: '[kendoMultiSelectTreeSummaryTag]',
|
|
@@ -18288,7 +18842,6 @@ const KENDO_DROPDOWNLIST = [
|
|
|
18288
18842
|
*/
|
|
18289
18843
|
const KENDO_MULTISELECT = [
|
|
18290
18844
|
MultiSelectComponent,
|
|
18291
|
-
SummaryTagDirective,
|
|
18292
18845
|
CustomItemTemplateDirective,
|
|
18293
18846
|
FixedGroupTemplateDirective,
|
|
18294
18847
|
FooterTemplateDirective,
|
|
@@ -18371,9 +18924,9 @@ const KENDO_DROPDOWNS = [
|
|
|
18371
18924
|
* - `CustomMessagesComponent`—The custom messages component.
|
|
18372
18925
|
*/
|
|
18373
18926
|
class DropDownTreesModule {
|
|
18374
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18375
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
18376
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
18927
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
18928
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, imports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent], exports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent] });
|
|
18929
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, providers: [
|
|
18377
18930
|
IconsService,
|
|
18378
18931
|
PopupService,
|
|
18379
18932
|
ResizeBatchService,
|
|
@@ -18384,7 +18937,7 @@ class DropDownTreesModule {
|
|
|
18384
18937
|
AdaptiveService
|
|
18385
18938
|
], imports: [DropDownTreeComponent, MultiSelectTreeComponent] });
|
|
18386
18939
|
}
|
|
18387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, decorators: [{
|
|
18388
18941
|
type: NgModule,
|
|
18389
18942
|
args: [{
|
|
18390
18943
|
imports: [...KENDO_DROPDOWNTREE, ...KENDO_MULTISELECTTREE],
|
|
@@ -18423,11 +18976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18423
18976
|
* ```
|
|
18424
18977
|
*/
|
|
18425
18978
|
class DropDownsModule {
|
|
18426
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18427
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
18428
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
18979
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
18980
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
|
|
18981
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, providers: [PopupService, ResizeBatchService, IconsService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [AutoCompleteComponent, i10.SeparatorComponent, ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, DropDownListComponent, MultiSelectComponent, i10.SeparatorComponent, DropDownTreeComponent, MultiSelectTreeComponent, i10.SeparatorComponent] });
|
|
18429
18982
|
}
|
|
18430
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
18983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, decorators: [{
|
|
18431
18984
|
type: NgModule,
|
|
18432
18985
|
args: [{
|
|
18433
18986
|
exports: [...KENDO_DROPDOWNS, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
|
|
@@ -18442,7 +18995,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18442
18995
|
*
|
|
18443
18996
|
* This module exports all MultiSelect-related components and directives:
|
|
18444
18997
|
* - `MultiSelectComponent`—The main MultiSelect component class.
|
|
18445
|
-
* - `SummaryTagDirective`—The summary tag directive for MultiSelect.
|
|
18446
18998
|
* - `ItemTemplateDirective`—The item template directive.
|
|
18447
18999
|
* - `CustomItemTemplateDirective`—The custom item template directive.
|
|
18448
19000
|
* - `TagTemplateDirective`—The tag template directive.
|
|
@@ -18468,16 +19020,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18468
19020
|
* ```
|
|
18469
19021
|
*/
|
|
18470
19022
|
class MultiSelectModule {
|
|
18471
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18472
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
18473
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
19023
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
19024
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, imports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
|
|
19025
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, providers: [
|
|
18474
19026
|
PopupService,
|
|
18475
19027
|
ResizeBatchService,
|
|
18476
19028
|
IconsService,
|
|
18477
19029
|
AdaptiveService
|
|
18478
19030
|
], imports: [MultiSelectComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
|
|
18479
19031
|
}
|
|
18480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
19032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, decorators: [{
|
|
18481
19033
|
type: NgModule,
|
|
18482
19034
|
args: [{
|
|
18483
19035
|
imports: [...KENDO_MULTISELECT, ...KENDO_ADORNMENTS],
|
|
@@ -18518,16 +19070,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18518
19070
|
* - `PrefixTemplateDirective`—The prefix template directive.
|
|
18519
19071
|
*/
|
|
18520
19072
|
class AutoCompleteModule {
|
|
18521
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18522
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
18523
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
19073
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
19074
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
|
|
19075
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, providers: [
|
|
18524
19076
|
PopupService,
|
|
18525
19077
|
ResizeBatchService,
|
|
18526
19078
|
IconsService,
|
|
18527
19079
|
AdaptiveService
|
|
18528
19080
|
], imports: [AutoCompleteComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
|
|
18529
19081
|
}
|
|
18530
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
19082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, decorators: [{
|
|
18531
19083
|
type: NgModule,
|
|
18532
19084
|
args: [{
|
|
18533
19085
|
imports: [...KENDO_AUTOCOMPLETE, ...KENDO_ADORNMENTS],
|
|
@@ -18571,16 +19123,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18571
19123
|
* ```
|
|
18572
19124
|
*/
|
|
18573
19125
|
class ComboBoxModule {
|
|
18574
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18575
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
18576
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
19126
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
19127
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, imports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
|
|
19128
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, providers: [
|
|
18577
19129
|
PopupService,
|
|
18578
19130
|
ResizeBatchService,
|
|
18579
19131
|
IconsService,
|
|
18580
19132
|
AdaptiveService
|
|
18581
19133
|
], imports: [ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
|
|
18582
19134
|
}
|
|
18583
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
19135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, decorators: [{
|
|
18584
19136
|
type: NgModule,
|
|
18585
19137
|
args: [{
|
|
18586
19138
|
imports: [...KENDO_COMBOBOX, ...KENDO_MULTICOLUMNCOMBOBOX, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
|
|
@@ -18630,16 +19182,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18630
19182
|
* ```
|
|
18631
19183
|
*/
|
|
18632
19184
|
class DropDownListModule {
|
|
18633
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
18634
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
18635
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
19185
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
19186
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, imports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent], exports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent] });
|
|
19187
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, providers: [
|
|
18636
19188
|
PopupService,
|
|
18637
19189
|
ResizeBatchService,
|
|
18638
19190
|
IconsService,
|
|
18639
19191
|
AdaptiveService
|
|
18640
19192
|
], imports: [DropDownListComponent] });
|
|
18641
19193
|
}
|
|
18642
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
19194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, decorators: [{
|
|
18643
19195
|
type: NgModule,
|
|
18644
19196
|
args: [{
|
|
18645
19197
|
imports: [...KENDO_DROPDOWNLIST],
|
|
@@ -18657,5 +19209,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
18657
19209
|
* Generated bundle index. Do not edit.
|
|
18658
19210
|
*/
|
|
18659
19211
|
|
|
18660
|
-
export { AdaptiveRendererComponent, AutoCompleteComponent, AutoCompleteModule, CheckAllDirective, CheckDirective, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, ComboBoxColumnComponent, ComboBoxComponent, ComboBoxModule, CustomItemTemplateDirective, CustomMessagesComponent, DataService, DisabledItemsService, DropDownListComponent, DropDownListModule, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, DropDownsModule, FilterDirective, FilterInputDirective, FilterableComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTagTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, KENDO_AUTOCOMPLETE, KENDO_COMBOBOX, KENDO_DROPDOWNLIST, KENDO_DROPDOWNS, KENDO_DROPDOWNTREE, KENDO_MULTICOLUMNCOMBOBOX, KENDO_MULTISELECT, KENDO_MULTISELECTTREE, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NavigationService, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, SearchBarComponent, SelectableDirective, SelectionService,
|
|
19212
|
+
export { AdaptiveRendererComponent, AutoCompleteComponent, AutoCompleteModule, CheckAllDirective, CheckDirective, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, ComboBoxColumnComponent, ComboBoxComponent, ComboBoxModule, CustomItemTemplateDirective, CustomMessagesComponent, DataService, DisabledItemsService, DropDownListComponent, DropDownListModule, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, DropDownsModule, FilterDirective, FilterInputDirective, FilterableComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTagTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, KENDO_AUTOCOMPLETE, KENDO_COMBOBOX, KENDO_DROPDOWNLIST, KENDO_DROPDOWNS, KENDO_DROPDOWNTREE, KENDO_MULTICOLUMNCOMBOBOX, KENDO_MULTISELECT, KENDO_MULTISELECTTREE, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NavigationService, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, SearchBarComponent, SelectableDirective, SelectionService, TagListComponent, TagTemplateDirective, ValueTemplateDirective };
|
|
18661
19213
|
|