@progress/kendo-angular-dropdowns 6.0.1 → 6.0.2-dev.202202221633
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/dist/cdn/js/kendo-angular-dropdowns.js +2 -2
- package/dist/cdn/main.js +1 -1
- package/dist/es/autocomplete/autocomplete.component.js +9 -22
- package/dist/es/comboboxes/combobox.component.js +9 -22
- package/dist/es/comboboxes/multicolumncombobox.component.js +1 -1
- package/dist/es/common/localization/messages.js +4 -0
- package/dist/es/common/searchbar.component.js +8 -1
- package/dist/es/common/taglist.component.js +1 -1
- package/dist/es/dropdownlist/dropdownlist.component.js +10 -16
- package/dist/es/dropdowntrees/checked-state/base-check.directive.js +19 -5
- package/dist/es/dropdowntrees/dropdowntree.component.js +1 -1
- package/dist/es/dropdowntrees/multiselecttree.component.js +13 -1
- package/dist/es/multiselect/multiselect.component.js +28 -23
- package/dist/es/package-metadata.js +1 -1
- package/dist/es2015/autocomplete/autocomplete.component.d.ts +4 -4
- package/dist/es2015/autocomplete/autocomplete.component.js +10 -18
- package/dist/es2015/comboboxes/combobox.component.d.ts +4 -4
- package/dist/es2015/comboboxes/combobox.component.js +14 -19
- package/dist/es2015/comboboxes/multicolumncombobox.component.js +3 -2
- package/dist/es2015/common/localization/messages.d.ts +4 -0
- package/dist/es2015/common/localization/messages.js +4 -0
- package/dist/es2015/common/searchbar.component.d.ts +1 -0
- package/dist/es2015/common/searchbar.component.js +4 -1
- package/dist/es2015/common/taglist.component.js +0 -3
- package/dist/es2015/dropdownlist/dropdownlist.component.d.ts +4 -3
- package/dist/es2015/dropdownlist/dropdownlist.component.js +17 -18
- package/dist/es2015/dropdowntrees/checked-state/base-check.directive.d.ts +7 -0
- package/dist/es2015/dropdowntrees/checked-state/base-check.directive.js +19 -5
- package/dist/es2015/dropdowntrees/dropdowntree.component.js +5 -0
- package/dist/es2015/dropdowntrees/multiselecttree.component.d.ts +1 -0
- package/dist/es2015/dropdowntrees/multiselecttree.component.js +9 -1
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/multiselect/multiselect.component.d.ts +8 -5
- package/dist/es2015/multiselect/multiselect.component.js +27 -21
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/fesm2015/index.js +112 -88
- package/dist/fesm5/index.js +103 -93
- package/dist/npm/autocomplete/autocomplete.component.js +9 -22
- package/dist/npm/comboboxes/combobox.component.js +9 -22
- package/dist/npm/comboboxes/multicolumncombobox.component.js +1 -1
- package/dist/npm/common/localization/messages.js +4 -0
- package/dist/npm/common/searchbar.component.js +8 -1
- package/dist/npm/common/taglist.component.js +1 -1
- package/dist/npm/dropdownlist/dropdownlist.component.js +10 -16
- package/dist/npm/dropdowntrees/checked-state/base-check.directive.js +18 -4
- package/dist/npm/dropdowntrees/dropdowntree.component.js +1 -1
- package/dist/npm/dropdowntrees/multiselecttree.component.js +13 -1
- package/dist/npm/multiselect/multiselect.component.js +28 -23
- package/dist/npm/package-metadata.js +1 -1
- package/dist/systemjs/kendo-angular-dropdowns.js +1 -1
- package/package.json +3 -5
|
@@ -299,19 +299,12 @@ var AutoCompleteComponent = /** @class */ (function () {
|
|
|
299
299
|
Object.defineProperty(AutoCompleteComponent.prototype, "noDataLabel", {
|
|
300
300
|
get: function () {
|
|
301
301
|
if (this.data.length === 0) {
|
|
302
|
-
return this.noDataText;
|
|
302
|
+
return this.messageFor('noDataText');
|
|
303
303
|
}
|
|
304
304
|
},
|
|
305
305
|
enumerable: true,
|
|
306
306
|
configurable: true
|
|
307
307
|
});
|
|
308
|
-
Object.defineProperty(AutoCompleteComponent.prototype, "clearTitle", {
|
|
309
|
-
get: function () {
|
|
310
|
-
return this.localization.get('clearTitle');
|
|
311
|
-
},
|
|
312
|
-
enumerable: true,
|
|
313
|
-
configurable: true
|
|
314
|
-
});
|
|
315
308
|
Object.defineProperty(AutoCompleteComponent.prototype, "data", {
|
|
316
309
|
get: function () {
|
|
317
310
|
var virtual = this.virtual;
|
|
@@ -534,15 +527,13 @@ var AutoCompleteComponent = /** @class */ (function () {
|
|
|
534
527
|
.subscribe(function (_a) {
|
|
535
528
|
var rtl = _a.rtl;
|
|
536
529
|
_this.direction = rtl ? 'rtl' : 'ltr';
|
|
537
|
-
_this.
|
|
530
|
+
_this.cdr.detectChanges();
|
|
538
531
|
});
|
|
539
|
-
this.setMessages();
|
|
540
532
|
this.setComponentClasses();
|
|
541
533
|
};
|
|
542
534
|
AutoCompleteComponent.prototype.ngOnDestroy = function () {
|
|
543
535
|
this.destroyPopup();
|
|
544
536
|
this.unsubscribeEvents();
|
|
545
|
-
clearTimeout(this.messagesTimeout);
|
|
546
537
|
if (this.localizationChangeSubscription) {
|
|
547
538
|
this.localizationChangeSubscription.unsubscribe();
|
|
548
539
|
}
|
|
@@ -562,6 +553,12 @@ var AutoCompleteComponent = /** @class */ (function () {
|
|
|
562
553
|
AutoCompleteComponent.prototype.reset = function () {
|
|
563
554
|
this.value = NO_VALUE;
|
|
564
555
|
};
|
|
556
|
+
/**
|
|
557
|
+
* @hidden
|
|
558
|
+
*/
|
|
559
|
+
AutoCompleteComponent.prototype.messageFor = function (key) {
|
|
560
|
+
return this.localization.get(key);
|
|
561
|
+
};
|
|
565
562
|
/**
|
|
566
563
|
* @hidden
|
|
567
564
|
*/
|
|
@@ -964,16 +961,6 @@ var AutoCompleteComponent = /** @class */ (function () {
|
|
|
964
961
|
};
|
|
965
962
|
}
|
|
966
963
|
};
|
|
967
|
-
AutoCompleteComponent.prototype.setMessages = function () {
|
|
968
|
-
var _this = this;
|
|
969
|
-
this._zone.runOutsideAngular(function () {
|
|
970
|
-
clearTimeout(_this.messagesTimeout);
|
|
971
|
-
_this.messagesTimeout = setTimeout(function () {
|
|
972
|
-
_this.noDataText = _this.localization.get('noDataText');
|
|
973
|
-
_this.cdr.detectChanges();
|
|
974
|
-
});
|
|
975
|
-
});
|
|
976
|
-
};
|
|
977
964
|
AutoCompleteComponent.prototype.setComponentClasses = function () {
|
|
978
965
|
if (this.size) {
|
|
979
966
|
this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
|
|
@@ -1195,7 +1182,7 @@ var AutoCompleteComponent = /** @class */ (function () {
|
|
|
1195
1182
|
}
|
|
1196
1183
|
],
|
|
1197
1184
|
selector: 'kendo-autocomplete',
|
|
1198
|
-
template: "\n <ng-container kendoAutoCompleteLocalizedMessages\n i18n-noDataText=\"kendo.autocomplete.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.autocomplete.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n >\n </ng-container>\n <kendo-searchbar #searchbar\n [role]=\"'combobox'\"\n [id]=\"focusableId\"\n [listId]=\"listBoxId\"\n [activeDescendant]=\"activeDescendant\"\n [noDataLabel]=\"noDataLabel\"\n [userInput]=\"text\"\n [suggestedText]=\"suggestion\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabIndex\"\n [popupOpen]=\"isOpen\"\n [placeholder]=\"placeholder\"\n (onNavigate)=\"handleNavigate($event)\"\n (valueChange)=\"searchBarChange($event)\"\n (onBlur)=\"handleBlur()\"\n (onFocus)=\"handleFocus()\"\n ></kendo-searchbar>\n <span\n *ngIf=\"!loading && !readonly && (clearButton && text?.length)\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n [attr.title]=\"clearTitle\"\n role=\"button\"\n tabindex=\"-1\"\n (click)=\"clearValue($event)\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n <ng-template #popupTemplate>\n <!--header template-->\n <ng-template *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate.templateRef\n }\">\n </ng-template>\n <!--list-->\n <kendo-list\n #optionsList\n [size]=\"size\"\n [rounded]=\"rounded\"\n [id]=\"listBoxId\"\n [optionPrefix]=\"optionPrefix\"\n [data]=\"data\"\n [textField]=\"valueField\"\n [valueField]=\"valueField\"\n [template]=\"template\"\n [groupTemplate]=\"groupTemplate\"\n [fixedGroupTemplate]=\"fixedGroupTemplate\"\n [height]=\"listHeight\"\n [show]=\"isOpen\"\n [virtual]=\"virtual\"\n (pageChange)=\"pageChange($event)\"\n >\n </kendo-list>\n <!--no-data template-->\n <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n <ng-template [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate?.templateRef\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ noDataText }}</div>\n </ng-template>\n </div>\n <!--footer template-->\n <ng-template *ngIf=\"footerTemplate\"\n [templateContext]=\"{\n templateRef: footerTemplate.templateRef\n }\">\n </ng-template>\n </ng-template>\n <ng-template [ngIf]=\"isOpen\">\n <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n </ng-template>\n <ng-container #container></ng-container>\n "
|
|
1185
|
+
template: "\n <ng-container kendoAutoCompleteLocalizedMessages\n i18n-noDataText=\"kendo.autocomplete.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.autocomplete.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n >\n </ng-container>\n <kendo-searchbar #searchbar\n [role]=\"'combobox'\"\n [id]=\"focusableId\"\n [listId]=\"listBoxId\"\n [activeDescendant]=\"activeDescendant\"\n [noDataLabel]=\"noDataLabel\"\n [userInput]=\"text\"\n [suggestedText]=\"suggestion\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabIndex\"\n [popupOpen]=\"isOpen\"\n [placeholder]=\"placeholder\"\n (onNavigate)=\"handleNavigate($event)\"\n (valueChange)=\"searchBarChange($event)\"\n (onBlur)=\"handleBlur()\"\n (onFocus)=\"handleFocus()\"\n ></kendo-searchbar>\n <span\n *ngIf=\"!loading && !readonly && (clearButton && text?.length)\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n [attr.title]=\"messageFor('clearTitle')\"\n role=\"button\"\n tabindex=\"-1\"\n (click)=\"clearValue($event)\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n <span *ngIf=\"loading\" class=\"k-icon k-i-loading\"></span>\n <ng-template #popupTemplate>\n <!--header template-->\n <ng-template *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate.templateRef\n }\">\n </ng-template>\n <!--list-->\n <kendo-list\n #optionsList\n [size]=\"size\"\n [rounded]=\"rounded\"\n [id]=\"listBoxId\"\n [optionPrefix]=\"optionPrefix\"\n [data]=\"data\"\n [textField]=\"valueField\"\n [valueField]=\"valueField\"\n [template]=\"template\"\n [groupTemplate]=\"groupTemplate\"\n [fixedGroupTemplate]=\"fixedGroupTemplate\"\n [height]=\"listHeight\"\n [show]=\"isOpen\"\n [virtual]=\"virtual\"\n (pageChange)=\"pageChange($event)\"\n >\n </kendo-list>\n <!--no-data template-->\n <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n <ng-template [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate?.templateRef\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ messageFor('noDataText') }}</div>\n </ng-template>\n </div>\n <!--footer template-->\n <ng-template *ngIf=\"footerTemplate\"\n [templateContext]=\"{\n templateRef: footerTemplate.templateRef\n }\">\n </ng-template>\n </ng-template>\n <ng-template [ngIf]=\"isOpen\">\n <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n </ng-template>\n <ng-container #container></ng-container>\n "
|
|
1199
1186
|
}),
|
|
1200
1187
|
tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
|
|
1201
1188
|
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
@@ -283,19 +283,12 @@ var ComboBoxComponent = /** @class */ (function () {
|
|
|
283
283
|
Object.defineProperty(ComboBoxComponent.prototype, "noDataLabel", {
|
|
284
284
|
get: function () {
|
|
285
285
|
if (this.data.length === 0) {
|
|
286
|
-
return this.noDataText;
|
|
286
|
+
return this.messageFor('noDataText');
|
|
287
287
|
}
|
|
288
288
|
},
|
|
289
289
|
enumerable: true,
|
|
290
290
|
configurable: true
|
|
291
291
|
});
|
|
292
|
-
Object.defineProperty(ComboBoxComponent.prototype, "clearTitle", {
|
|
293
|
-
get: function () {
|
|
294
|
-
return this.localization.get('clearTitle');
|
|
295
|
-
},
|
|
296
|
-
enumerable: true,
|
|
297
|
-
configurable: true
|
|
298
|
-
});
|
|
299
292
|
Object.defineProperty(ComboBoxComponent.prototype, "appendTo", {
|
|
300
293
|
get: function () {
|
|
301
294
|
var appendTo = this.popupSettings.appendTo;
|
|
@@ -585,7 +578,6 @@ var ComboBoxComponent = /** @class */ (function () {
|
|
|
585
578
|
this.createValueStream();
|
|
586
579
|
this.subscribeTouchEvents();
|
|
587
580
|
this.attachSelectClickHandler();
|
|
588
|
-
this.setMessages();
|
|
589
581
|
this.setComponentClasses();
|
|
590
582
|
};
|
|
591
583
|
ComboBoxComponent.prototype.createValueStream = function () {
|
|
@@ -695,7 +687,7 @@ var ComboBoxComponent = /** @class */ (function () {
|
|
|
695
687
|
.changes.subscribe(function (_a) {
|
|
696
688
|
var rtl = _a.rtl;
|
|
697
689
|
_this.direction = rtl ? 'rtl' : 'ltr';
|
|
698
|
-
_this.
|
|
690
|
+
_this.cdr.detectChanges();
|
|
699
691
|
}));
|
|
700
692
|
this.subs.add(merge(this.navigationService.up, this.navigationService.down, this.navigationService.home, this.navigationService.end)
|
|
701
693
|
.pipe(filter(function (event) { return isPresent(event.index); }))
|
|
@@ -728,7 +720,6 @@ var ComboBoxComponent = /** @class */ (function () {
|
|
|
728
720
|
};
|
|
729
721
|
ComboBoxComponent.prototype.ngOnDestroy = function () {
|
|
730
722
|
this.destroyPopup();
|
|
731
|
-
clearTimeout(this.messagesTimeout);
|
|
732
723
|
this.subs.unsubscribe();
|
|
733
724
|
if (isPresent(this.valueSubscription)) {
|
|
734
725
|
this.valueSubscription.unsubscribe();
|
|
@@ -830,6 +821,12 @@ var ComboBoxComponent = /** @class */ (function () {
|
|
|
830
821
|
var valueEmpty = !isPresent(this.value) || isEmptyString(this.value);
|
|
831
822
|
return textEmpty && valueEmpty;
|
|
832
823
|
};
|
|
824
|
+
/**
|
|
825
|
+
* @hidden
|
|
826
|
+
*/
|
|
827
|
+
ComboBoxComponent.prototype.messageFor = function (key) {
|
|
828
|
+
return this.localization.get(key);
|
|
829
|
+
};
|
|
833
830
|
/**
|
|
834
831
|
* @hidden
|
|
835
832
|
*/
|
|
@@ -1336,16 +1333,6 @@ var ComboBoxComponent = /** @class */ (function () {
|
|
|
1336
1333
|
this.filterText = '';
|
|
1337
1334
|
this.filterChange.emit(this.filterText);
|
|
1338
1335
|
};
|
|
1339
|
-
ComboBoxComponent.prototype.setMessages = function () {
|
|
1340
|
-
var _this = this;
|
|
1341
|
-
this.zone.runOutsideAngular(function () {
|
|
1342
|
-
clearTimeout(_this.messagesTimeout);
|
|
1343
|
-
_this.messagesTimeout = setTimeout(function () {
|
|
1344
|
-
_this.noDataText = _this.localization.get('noDataText');
|
|
1345
|
-
_this.cdr.detectChanges();
|
|
1346
|
-
});
|
|
1347
|
-
});
|
|
1348
|
-
};
|
|
1349
1336
|
ComboBoxComponent.prototype.subscribeTouchEvents = function () {
|
|
1350
1337
|
var _this = this;
|
|
1351
1338
|
if (!isDocumentAvailable() || !this.touchEnabled) {
|
|
@@ -1616,7 +1603,7 @@ var ComboBoxComponent = /** @class */ (function () {
|
|
|
1616
1603
|
}
|
|
1617
1604
|
],
|
|
1618
1605
|
selector: 'kendo-combobox',
|
|
1619
|
-
template: "\n <ng-container kendoComboBoxLocalizedMessages\n i18n-noDataText=\"kendo.combobox.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.combobox.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n >\n </ng-container>\n <kendo-searchbar #searchbar\n [role]=\"'combobox'\"\n [id]=\"focusableId\"\n [listId]=\"listBoxId\"\n [activeDescendant]=\"activeDescendant\"\n [noDataLabel]=\"noDataLabel\"\n [userInput]=\"text\"\n [suggestedText]=\"getSuggestion()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabIndex\"\n [popupOpen]=\"isOpen\"\n [placeholder]=\"placeholder\"\n (onNavigate)=\"handleNavigate($event)\"\n (valueChange)=\"searchBarChange($event)\"\n (onBlur)=\"handleBlur()\"\n (onFocus)=\"handleFocus()\"\n ></kendo-searchbar>\n <span\n *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n aria-hidden=\"true\"\n [attr.title]=\"clearTitle\"\n (click)=\"clearValue($event)\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: preventEventDefault\n }\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n <button\n #select\n
|
|
1606
|
+
template: "\n <ng-container kendoComboBoxLocalizedMessages\n i18n-noDataText=\"kendo.combobox.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.combobox.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n\n i18n-selectButtonText=\"kendo.combobox.selectButtonText|The text set as aria-label on the select button\"\n selectButtonText=\"Select\"\n >\n </ng-container>\n <kendo-searchbar #searchbar\n [role]=\"'combobox'\"\n [id]=\"focusableId\"\n [listId]=\"listBoxId\"\n [activeDescendant]=\"activeDescendant\"\n [noDataLabel]=\"noDataLabel\"\n [userInput]=\"text\"\n [suggestedText]=\"getSuggestion()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabIndex\"\n [popupOpen]=\"isOpen\"\n [placeholder]=\"placeholder\"\n (onNavigate)=\"handleNavigate($event)\"\n (valueChange)=\"searchBarChange($event)\"\n (onBlur)=\"handleBlur()\"\n (onFocus)=\"handleFocus()\"\n ></kendo-searchbar>\n <span\n *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n aria-hidden=\"true\"\n [attr.title]=\"messageFor('clearTitle')\"\n (click)=\"clearValue($event)\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: preventEventDefault\n }\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n <button\n #select\n unselectable=\"on\"\n type=\"button\"\n class=\"k-input-button k-button k-icon-button\"\n [ngClass]=\"selectButtonClasses\"\n [attr.aria-label]=\"messageFor('selectButtonText')\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: preventEventDefault\n }\"\n >\n <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n </button>\n <ng-template #popupTemplate>\n <!--header template-->\n <ng-template *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate.templateRef\n }\">\n </ng-template>\n <!--list-->\n <kendo-list\n #optionsList\n [size]=\"size\"\n [rounded]=\"rounded\"\n [id]=\"listBoxId\"\n [optionPrefix]=\"optionPrefix\"\n [data]=\"data\"\n [textField]=\"textField\"\n [valueField]=\"valueField\"\n [template]=\"template\"\n [groupTemplate]=\"groupTemplate\"\n [fixedGroupTemplate]=\"fixedGroupTemplate\"\n [height]=\"listHeight\"\n [show]=\"isOpen\"\n [virtual]=\"virtual\"\n (pageChange)=\"pageChange($event)\"\n >\n </kendo-list>\n <!--no-data template-->\n <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n <ng-template [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ messageFor('noDataText') }}</div>\n </ng-template>\n </div>\n <!--footer template-->\n <ng-template *ngIf=\"footerTemplate\"\n [templateContext]=\"{\n templateRef: footerTemplate.templateRef\n }\">\n </ng-template>\n </ng-template>\n <ng-template [ngIf]=\"isOpen\">\n <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n </ng-template>\n <ng-container #container></ng-container>\n "
|
|
1620
1607
|
}),
|
|
1621
1608
|
tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
|
|
1622
1609
|
tslib_1.__metadata("design:paramtypes", [ElementRef,
|
|
@@ -211,7 +211,7 @@ var MultiColumnComboBoxComponent = /** @class */ (function (_super) {
|
|
|
211
211
|
}
|
|
212
212
|
],
|
|
213
213
|
selector: 'kendo-multicolumncombobox',
|
|
214
|
-
template: "\n <ng-container\n kendoMultiColumnComboBoxLocalizedMessages\n\n i18n-noDataText=\"kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.multicolumncombobox.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n >\n </ng-container>\n <kendo-searchbar\n #searchbar\n [role]=\"'combobox'\"\n [id]=\"focusableId\"\n [listId]=\"listBoxId\"\n [activeDescendant]=\"activeDescendant\"\n [noDataLabel]=\"noDataLabel\"\n [userInput]=\"text\"\n [suggestedText]=\"getSuggestion()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabIndex\"\n [popupOpen]=\"isOpen\"\n [placeholder]=\"placeholder\"\n (onNavigate)=\"handleNavigate($event)\"\n (valueChange)=\"searchBarChange($event)\"\n (onBlur)=\"handleBlur()\"\n (onFocus)=\"handleFocus()\"\n >\n </kendo-searchbar>\n\n <span\n *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n aria-hidden=\"true\"\n [attr.title]=\"clearTitle\"\n (click)=\"clearValue($event)\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: preventEventDefault\n }\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n\n <button\n #select\n tabindex=\"-1\"\n aria-hidden=\"true\"\n unselectable=\"on\"\n type=\"button\"\n class=\"k-input-button k-button k-icon-button\"\n [ngClass]=\"selectButtonClasses\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: preventEventDefault\n }\"\n >\n <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n </button>\n\n <ng-template #popupTemplate>\n <!--user-defined header template -->\n <ng-template\n *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate?.templateRef\n }\"\n >\n </ng-template>\n\n <!--data table-->\n <div class=\"k-data-table\" [ngClass]=\"tableSizeClass\">\n\n <!--grid header-->\n <div\n #header\n class=\"k-table-header\"\n >\n <div class=\"k-table-header-wrap\">\n <table class=\"k-table\" role=\"presentation\">\n <colgroup>\n <ng-container *ngFor=\"let column of columns\">\n <col\n *ngIf=\"!column.hidden && column.matchesMedia\"\n [style.width.px]=\"column.width\"\n />\n </ng-container>\n </colgroup>\n <thead class=\"k-table-thead\">\n <tr class=\"k-table-row\">\n <ng-container *ngFor=\"let column of columns\">\n <th\n *ngIf=\"!column.hidden && column.matchesMedia\"\n class=\"k-table-th\"\n [ngStyle]=\"column.headerStyle\"\n [ngClass]=\"column.headerClass\"\n >\n <ng-container *ngIf=\"!column.headerTemplate\">\n {{ column.title || column.field }}\n </ng-container>\n <ng-template\n *ngIf=\"column.headerTemplate\"\n [templateContext]=\"{\n templateRef: column.headerTemplate?.templateRef,\n $implicit: column,\n column: column\n }\"\n >\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n\n <!-- item template -->\n <ng-template #rowTemplate let-dataItem>\n <ng-container *ngFor=\"let column of columns\">\n <span\n *ngIf=\"!column.hidden && column.matchesMedia\"\n class=\"k-table-td\"\n [ngClass]=\"column.class\"\n [style.width.px]=\"column.width\"\n [ngStyle]=\"column.style\"\n >\n <ng-container *ngIf=\"!column.cellTemplate\">\n {{ textFrom(dataItem, column.field) }}\n </ng-container>\n <ng-template\n *ngIf=\"column.cellTemplate\"\n [templateContext]=\"{\n templateRef: column.cellTemplate?.templateRef,\n $implicit: dataItem,\n dataItem: dataItem,\n column: column\n }\"\n >\n </ng-template>\n </span>\n </ng-container>\n </ng-template>\n\n <!--list-->\n <kendo-list\n #optionsList\n [id]=\"listBoxId\"\n [optionPrefix]=\"optionPrefix\"\n [data]=\"data\"\n [textField]=\"textField\"\n [valueField]=\"valueField\"\n [template]=\"{ templateRef: rowTemplate }\"\n [groupTemplate]=\"groupTemplate\"\n [fixedGroupTemplate]=\"fixedGroupTemplate\"\n [height]=\"listHeight\"\n [show]=\"isOpen\"\n [virtual]=\"virtual\"\n [type]=\"'dropdowngrid'\"\n (pageChange)=\"pageChange($event)\"\n (listResize)=\"updateHeaderPadding(header)\"\n >\n </kendo-list>\n\n <!--no-data template-->\n <div\n class=\"k-no-data\"\n *ngIf=\"data.length === 0\"\n >\n <ng-template\n [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate?.templateRef\n }\"\n >\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ noDataText }}</div>\n </ng-template>\n </div>\n\n <!--user-defined footer template-->\n <ng-container *ngIf=\"footerTemplate\">\n <div class=\"k-table-footer\">\n <table class=\"k-table\">\n <tfoot class=\"k-table-tfoot\">\n <tr class=\"k-table-row\">\n <td class=\"k-table-td\">\n <ng-template\n [templateContext]=\"{\n templateRef: footerTemplate.templateRef\n }\"\n >\n </ng-template>\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n </ng-container>\n\n </div>\n\n </ng-template>\n\n <kendo-resize-sensor\n *ngIf=\"isOpen\"\n (resize)=\"onResize()\"\n >\n </kendo-resize-sensor>\n\n <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->\n <ng-container #container></ng-container>\n "
|
|
214
|
+
template: "\n <ng-container\n kendoMultiColumnComboBoxLocalizedMessages\n\n i18n-noDataText=\"kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.multicolumncombobox.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n >\n </ng-container>\n <kendo-searchbar\n #searchbar\n [role]=\"'combobox'\"\n [id]=\"focusableId\"\n [listId]=\"listBoxId\"\n [activeDescendant]=\"activeDescendant\"\n [noDataLabel]=\"noDataLabel\"\n [userInput]=\"text\"\n [suggestedText]=\"getSuggestion()\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [tabIndex]=\"tabIndex\"\n [popupOpen]=\"isOpen\"\n [placeholder]=\"placeholder\"\n (onNavigate)=\"handleNavigate($event)\"\n (valueChange)=\"searchBarChange($event)\"\n (onBlur)=\"handleBlur()\"\n (onFocus)=\"handleFocus()\"\n >\n </kendo-searchbar>\n\n <span\n *ngIf=\"clearButton && !loading && !disabled && !readonly && text?.length\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n aria-hidden=\"true\"\n [attr.title]=\"messageFor('clearTitle')\"\n (click)=\"clearValue($event)\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: preventEventDefault\n }\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n\n <button\n #select\n tabindex=\"-1\"\n aria-hidden=\"true\"\n unselectable=\"on\"\n type=\"button\"\n class=\"k-input-button k-button k-icon-button\"\n [ngClass]=\"selectButtonClasses\"\n [attr.aria-label]=\"messageFor('selectButtonText')\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: preventEventDefault\n }\"\n >\n <span class=\"k-button-icon k-icon\" [ngClass]=\"buttonClasses\"></span>\n </button>\n\n <ng-template #popupTemplate>\n <!--user-defined header template -->\n <ng-template\n *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate?.templateRef\n }\"\n >\n </ng-template>\n\n <!--data table-->\n <div class=\"k-data-table\" [ngClass]=\"tableSizeClass\">\n\n <!--grid header-->\n <div\n #header\n class=\"k-table-header\"\n >\n <div class=\"k-table-header-wrap\">\n <table class=\"k-table\" role=\"presentation\">\n <colgroup>\n <ng-container *ngFor=\"let column of columns\">\n <col\n *ngIf=\"!column.hidden && column.matchesMedia\"\n [style.width.px]=\"column.width\"\n />\n </ng-container>\n </colgroup>\n <thead class=\"k-table-thead\">\n <tr class=\"k-table-row\">\n <ng-container *ngFor=\"let column of columns\">\n <th\n *ngIf=\"!column.hidden && column.matchesMedia\"\n class=\"k-table-th\"\n [ngStyle]=\"column.headerStyle\"\n [ngClass]=\"column.headerClass\"\n >\n <ng-container *ngIf=\"!column.headerTemplate\">\n {{ column.title || column.field }}\n </ng-container>\n <ng-template\n *ngIf=\"column.headerTemplate\"\n [templateContext]=\"{\n templateRef: column.headerTemplate?.templateRef,\n $implicit: column,\n column: column\n }\"\n >\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n </table>\n </div>\n </div>\n\n <!-- item template -->\n <ng-template #rowTemplate let-dataItem>\n <ng-container *ngFor=\"let column of columns\">\n <span\n *ngIf=\"!column.hidden && column.matchesMedia\"\n class=\"k-table-td\"\n [ngClass]=\"column.class\"\n [style.width.px]=\"column.width\"\n [ngStyle]=\"column.style\"\n >\n <ng-container *ngIf=\"!column.cellTemplate\">\n {{ textFrom(dataItem, column.field) }}\n </ng-container>\n <ng-template\n *ngIf=\"column.cellTemplate\"\n [templateContext]=\"{\n templateRef: column.cellTemplate?.templateRef,\n $implicit: dataItem,\n dataItem: dataItem,\n column: column\n }\"\n >\n </ng-template>\n </span>\n </ng-container>\n </ng-template>\n\n <!--list-->\n <kendo-list\n #optionsList\n [id]=\"listBoxId\"\n [optionPrefix]=\"optionPrefix\"\n [data]=\"data\"\n [textField]=\"textField\"\n [valueField]=\"valueField\"\n [template]=\"{ templateRef: rowTemplate }\"\n [groupTemplate]=\"groupTemplate\"\n [fixedGroupTemplate]=\"fixedGroupTemplate\"\n [height]=\"listHeight\"\n [show]=\"isOpen\"\n [virtual]=\"virtual\"\n [type]=\"'dropdowngrid'\"\n (pageChange)=\"pageChange($event)\"\n (listResize)=\"updateHeaderPadding(header)\"\n >\n </kendo-list>\n\n <!--no-data template-->\n <div\n class=\"k-no-data\"\n *ngIf=\"data.length === 0\"\n >\n <ng-template\n [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate?.templateRef\n }\"\n >\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ messageFor('noDataText') }}</div>\n </ng-template>\n </div>\n\n <!--user-defined footer template-->\n <ng-container *ngIf=\"footerTemplate\">\n <div class=\"k-table-footer\">\n <table class=\"k-table\">\n <tfoot class=\"k-table-tfoot\">\n <tr class=\"k-table-row\">\n <td class=\"k-table-td\">\n <ng-template\n [templateContext]=\"{\n templateRef: footerTemplate.templateRef\n }\"\n >\n </ng-template>\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n </ng-container>\n\n </div>\n\n </ng-template>\n\n <kendo-resize-sensor\n *ngIf=\"isOpen\"\n (resize)=\"onResize()\"\n >\n </kendo-resize-sensor>\n\n <!-- when the popupSettings.appendTo value is set to 'component', this container is used -->\n <ng-container #container></ng-container>\n "
|
|
215
215
|
}),
|
|
216
216
|
tslib_1.__param(10, Inject(TOUCH_ENABLED)),
|
|
217
217
|
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
@@ -25,6 +25,10 @@ var Messages = /** @class */ (function (_super) {
|
|
|
25
25
|
Input(),
|
|
26
26
|
tslib_1.__metadata("design:type", String)
|
|
27
27
|
], Messages.prototype, "checkAllText", void 0);
|
|
28
|
+
tslib_1.__decorate([
|
|
29
|
+
Input(),
|
|
30
|
+
tslib_1.__metadata("design:type", String)
|
|
31
|
+
], Messages.prototype, "selectButtonText", void 0);
|
|
28
32
|
return Messages;
|
|
29
33
|
}(ComponentMessages));
|
|
30
34
|
export { Messages };
|
|
@@ -55,6 +55,13 @@ var SearchBarComponent = /** @class */ (function () {
|
|
|
55
55
|
enumerable: true,
|
|
56
56
|
configurable: true
|
|
57
57
|
});
|
|
58
|
+
Object.defineProperty(SearchBarComponent.prototype, "ariaExpanded", {
|
|
59
|
+
get: function () {
|
|
60
|
+
return this.role === 'combobox' ? this.popupOpen : null;
|
|
61
|
+
},
|
|
62
|
+
enumerable: true,
|
|
63
|
+
configurable: true
|
|
64
|
+
});
|
|
58
65
|
SearchBarComponent.prototype.ngOnInit = function () {
|
|
59
66
|
var _this = this;
|
|
60
67
|
this.localizationChangeSubscription = this.localization
|
|
@@ -236,7 +243,7 @@ var SearchBarComponent = /** @class */ (function () {
|
|
|
236
243
|
SearchBarComponent = tslib_1.__decorate([
|
|
237
244
|
Component({
|
|
238
245
|
selector: 'kendo-searchbar',
|
|
239
|
-
template: "\n <input #input\n autocomplete=\"off\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [placeholder]=\"placeholder\"\n [class]=\"'k-input-inner'\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleFocus,\n blur: handleBlur\n }\"\n [scope]=\"this\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.dir]=\"direction\"\n [attr.role]=\"role\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"
|
|
246
|
+
template: "\n <input #input\n autocomplete=\"off\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [placeholder]=\"placeholder\"\n [class]=\"'k-input-inner'\"\n (input)=\"handleInput($event)\"\n (keydown)=\"handleKeydown($event)\"\n [kendoEventsOutsideAngular]=\"{\n focus: handleFocus,\n blur: handleBlur\n }\"\n [scope]=\"this\"\n [attr.tabIndex]=\"tabIndex\"\n [attr.dir]=\"direction\"\n [attr.role]=\"role\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-readonly]=\"readonly\"\n aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-owns]=\"listId\"\n [attr.aria-describedby]=\"tagListId\"\n [attr.aria-activedescendant]=\"activeDescendant\"\n [attr.aria-label]=\"noDataLabel\"\n />\n "
|
|
240
247
|
}),
|
|
241
248
|
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
242
249
|
Renderer2])
|
|
@@ -169,7 +169,7 @@ var TagListComponent = /** @class */ (function () {
|
|
|
169
169
|
TagListComponent = tslib_1.__decorate([
|
|
170
170
|
Component({
|
|
171
171
|
selector: 'kendo-taglist',
|
|
172
|
-
template: "\n <div\n *ngFor=\"let tag of tags; let index = index;\"\n
|
|
172
|
+
template: "\n <div\n *ngFor=\"let tag of tags; let index = index;\"\n [attr.id]=\"itemId(tag, index)\"\n [attr.aria-hidden]=\"tagAriaHidden(index)\"\n class=\"k-chip\"\n [ngClass]=\"{\n 'k-focus': index === focused,\n 'k-disabled': isTagDisabled(tag, index),\n 'k-chip-sm': size === 'small',\n 'k-chip-md': size === 'medium',\n 'k-chip-lg': size === 'large',\n 'k-rounded-sm': rounded === 'small',\n 'k-rounded-md': rounded === 'medium',\n 'k-rounded-lg': rounded === 'large',\n 'k-rounded-full': rounded === 'full',\n 'k-chip-solid k-chip-solid-base': fillMode === 'solid',\n 'k-chip-flat k-chip-flat-base': fillMode === 'flat',\n 'k-chip-outline k-chip-outline-base': fillMode === 'outline'\n }\"\n >\n <span class=\"k-chip-content\">\n <ng-template *ngIf=\"isGroupTag(tag); then groupTag else singleTag\"></ng-template>\n <ng-template #groupTag>\n <span class=\"k-chip-label k-text-ellipsis\">\n <ng-template *ngIf=\"groupTemplate\"\n [templateContext]=\"{\n templateRef: groupTemplate.templateRef,\n $implicit: tag\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!groupTemplate\">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>\n </span>\n </ng-template>\n <ng-template #singleTag>\n <span class=\"k-chip-label k-text-ellipsis\">\n <ng-template *ngIf=\"template\"\n [templateContext]=\"{\n templateRef: template.templateRef,\n $implicit: tag\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!template\">{{ tagProp(tag, textField, index) }}</ng-template>\n </span>\n </ng-template>\n </span>\n\n <span class=\"k-chip-actions\">\n <span aria-label=\"delete\" [attr.aria-hidden]=\"index !== focused\" class=\"k-chip-action k-chip-remove-action\">\n <span class=\"k-icon k-i-x-circle\" (mousedown)=\"deleteTag($event, tag, index)\">\n </span>\n </span>\n </span>\n </div>\n <ng-content></ng-content>\n "
|
|
173
173
|
}),
|
|
174
174
|
tslib_1.__metadata("design:paramtypes", [Renderer2,
|
|
175
175
|
ElementRef])
|
|
@@ -232,7 +232,7 @@ var DropDownListComponent = /** @class */ (function () {
|
|
|
232
232
|
});
|
|
233
233
|
Object.defineProperty(DropDownListComponent.prototype, "ariaActivedescendant", {
|
|
234
234
|
get: function () {
|
|
235
|
-
if (!isPresent(this.dataItem)) {
|
|
235
|
+
if (!isPresent(this.dataItem) || !this.isOpen) {
|
|
236
236
|
return;
|
|
237
237
|
}
|
|
238
238
|
return this.optionPrefix + "-" + getter(this.dataItem, this.valueField);
|
|
@@ -243,7 +243,7 @@ var DropDownListComponent = /** @class */ (function () {
|
|
|
243
243
|
Object.defineProperty(DropDownListComponent.prototype, "noDataLabel", {
|
|
244
244
|
get: function () {
|
|
245
245
|
if (this.dataService.itemsCount === 0) {
|
|
246
|
-
return this.noDataText;
|
|
246
|
+
return this.messageFor('noDataText');
|
|
247
247
|
}
|
|
248
248
|
},
|
|
249
249
|
enumerable: true,
|
|
@@ -647,9 +647,8 @@ var DropDownListComponent = /** @class */ (function () {
|
|
|
647
647
|
.changes.subscribe(function (_a) {
|
|
648
648
|
var rtl = _a.rtl;
|
|
649
649
|
_this.direction = rtl ? 'rtl' : 'ltr';
|
|
650
|
-
_this.
|
|
650
|
+
_this.cdr.detectChanges();
|
|
651
651
|
});
|
|
652
|
-
this.setMessages();
|
|
653
652
|
this.assignAriaDescribedBy();
|
|
654
653
|
this.setComponentClasses();
|
|
655
654
|
};
|
|
@@ -673,7 +672,6 @@ var DropDownListComponent = /** @class */ (function () {
|
|
|
673
672
|
DropDownListComponent.prototype.ngOnDestroy = function () {
|
|
674
673
|
this.destroyPopup();
|
|
675
674
|
this.unsubscribeEvents();
|
|
676
|
-
clearTimeout(this.messagesTimeout);
|
|
677
675
|
if (this.localizationChangesSubscription) {
|
|
678
676
|
this.localizationChangesSubscription.unsubscribe();
|
|
679
677
|
}
|
|
@@ -799,6 +797,12 @@ var DropDownListComponent = /** @class */ (function () {
|
|
|
799
797
|
DropDownListComponent.prototype.reset = function () {
|
|
800
798
|
this.value = undefined;
|
|
801
799
|
};
|
|
800
|
+
/**
|
|
801
|
+
* @hidden
|
|
802
|
+
*/
|
|
803
|
+
DropDownListComponent.prototype.messageFor = function (key) {
|
|
804
|
+
return this.localization.get(key);
|
|
805
|
+
};
|
|
802
806
|
/**
|
|
803
807
|
* @hidden
|
|
804
808
|
*/
|
|
@@ -1329,16 +1333,6 @@ var DropDownListComponent = /** @class */ (function () {
|
|
|
1329
1333
|
var virtual = this.virtual;
|
|
1330
1334
|
virtual.skip = event.skip;
|
|
1331
1335
|
};
|
|
1332
|
-
DropDownListComponent.prototype.setMessages = function () {
|
|
1333
|
-
var _this = this;
|
|
1334
|
-
this._zone.runOutsideAngular(function () {
|
|
1335
|
-
clearTimeout(_this.messagesTimeout);
|
|
1336
|
-
_this.messagesTimeout = setTimeout(function () {
|
|
1337
|
-
_this.noDataText = _this.localization.get('noDataText');
|
|
1338
|
-
_this.cdr.detectChanges();
|
|
1339
|
-
});
|
|
1340
|
-
});
|
|
1341
|
-
};
|
|
1342
1336
|
DropDownListComponent.prototype.assignAriaDescribedBy = function () {
|
|
1343
1337
|
var currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
|
|
1344
1338
|
var trimmed = currentValue.replace(this.valueLabelId, '').trim();
|
|
@@ -1636,7 +1630,7 @@ var DropDownListComponent = /** @class */ (function () {
|
|
|
1636
1630
|
}
|
|
1637
1631
|
],
|
|
1638
1632
|
selector: 'kendo-dropdownlist',
|
|
1639
|
-
template: "\n <ng-container kendoDropDownListLocalizedMessages\n i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n >\n </ng-container>\n <span class=\"k-input-inner\" unselectable=\"on\" [id]=\"valueLabelId\">\n <span class=\"k-input-value-text\">\n <ng-template *ngIf=\"valueTemplate\"\n [templateContext]=\"{\n templateRef: valueTemplate.templateRef,\n $implicit: dataItem\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n </span>\n </span>\n <button\n tabindex=\"-1\"\n unselectable=\"on\"\n type=\"button\"\n class=\"k-input-button k-button k-icon-button\"\n [ngClass]=\"selectButtonClasses\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: onMouseDown\n }\"\n >\n <span\n class=\"k-button-icon k-icon\"\n unselectable=\"on\"\n [ngClass]=\"buttonClasses\"\n ></span>\n </button>\n <ng-template #popupTemplate>\n <!--filterable-->\n\n <ng-template [ngIf]=\"filterable\">\n <div class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n <span\n class=\"k-searchbox k-input\"\n [ngClass]=\"filterInputClasses\"\n >\n <span class=\"k-input-icon k-icon k-i-search\" unselectable=\"on\"></span>\n <input\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-activedescendant]=\"ariaActivedescendant\"\n [attr.aria-label]=\"noDataLabel\"\n tabindex=\"-1\"\n [filterInput]=\"isFocused && !touchEnabled\"\n [dir]=\"direction\"\n [(ngModel)]=\"filterText\"\n class=\"k-input-inner\"\n (keydown)=\"keydown($event)\"\n (input)=\"handleFilter($event)\"\n (focus)=\"onFilterFocus()\"\n (blur)=\"blurFilterInput()\" />\n </span>\n </div>\n </ng-template>\n <!--default item-->\n <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n <div\n class=\"k-list\"\n [ngClass]=\"optionLabelSizeClass\"\n >\n <div class=\"k-list-optionlabel
|
|
1633
|
+
template: "\n <ng-container kendoDropDownListLocalizedMessages\n i18n-noDataText=\"kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-selectButtonText=\"kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button\"\n selectButtonText=\"Select\"\n >\n </ng-container>\n <span class=\"k-input-inner\" unselectable=\"on\" role=\"option\" [id]=\"valueLabelId\">\n <span class=\"k-input-value-text\">\n <ng-template *ngIf=\"valueTemplate\"\n [templateContext]=\"{\n templateRef: valueTemplate.templateRef,\n $implicit: dataItem\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!valueTemplate\">{{ getText() }}</ng-template>\n </span>\n </span>\n <button\n tabindex=\"-1\"\n unselectable=\"on\"\n type=\"button\"\n class=\"k-input-button k-button k-icon-button\"\n [ngClass]=\"selectButtonClasses\"\n [attr.aria-label]=\"messageFor('selectButtonText')\"\n [kendoEventsOutsideAngular]=\"{\n mousedown: onMouseDown\n }\"\n >\n <span\n class=\"k-button-icon k-icon\"\n unselectable=\"on\"\n [ngClass]=\"buttonClasses\"\n ></span>\n </button>\n <ng-template #popupTemplate>\n <!--filterable-->\n\n <ng-template [ngIf]=\"filterable\">\n <div class=\"k-list-filter\" (click)=\"$event.stopImmediatePropagation()\">\n <span\n class=\"k-searchbox k-input\"\n [ngClass]=\"filterInputClasses\"\n >\n <span class=\"k-input-icon k-icon k-i-search\" unselectable=\"on\"></span>\n <input\n [attr.aria-owns]=\"ariaOwns\"\n [attr.aria-activedescendant]=\"ariaActivedescendant\"\n [attr.aria-label]=\"noDataLabel\"\n tabindex=\"-1\"\n [filterInput]=\"isFocused && !touchEnabled\"\n [dir]=\"direction\"\n [(ngModel)]=\"filterText\"\n class=\"k-input-inner\"\n (keydown)=\"keydown($event)\"\n (input)=\"handleFilter($event)\"\n (focus)=\"onFilterFocus()\"\n (blur)=\"blurFilterInput()\" />\n </span>\n </div>\n </ng-template>\n <!--default item-->\n <ng-template [ngIf]=\"defaultItem && !itemTemplate\">\n <div\n class=\"k-list\"\n [ngClass]=\"optionLabelSizeClass\"\n >\n <div class=\"k-list-optionlabel\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n {{ getDefaultItemText() }}\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"defaultItem && itemTemplate\">\n <div\n class=\"k-list\"\n [ngClass]=\"optionLabelSizeClass\"\n >\n <div class=\"k-list-optionlabel\" [ngClass]=\"{ 'k-disabled': isDisabledDefaultItem }\" kendoDropDownsSelectable [index]=\"-1\">\n <ng-template\n [templateContext]=\"{\n templateRef: itemTemplate.templateRef,\n $implicit: defaultItem\n }\">\n </ng-template>\n </div>\n </div>\n </ng-template>\n <!--header template-->\n <ng-template *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate.templateRef\n }\">\n </ng-template>\n <!--list-->\n <kendo-list\n #optionsList\n [size]=\"size\"\n [rounded]=\"rounded\"\n [id]=\"listBoxId\"\n [optionPrefix]=\"optionPrefix\"\n [data]=\"data\"\n [textField]=\"textField\"\n [valueField]=\"valueField\"\n [template]=\"itemTemplate\"\n [groupTemplate]=\"groupTemplate\"\n [fixedGroupTemplate]=\"fixedGroupTemplate\"\n [height]=\"listHeight\"\n [show]=\"isOpen\"\n [virtual]=\"virtual\"\n (pageChange)=\"pageChange($event)\"\n >\n </kendo-list>\n <!--no-data template-->\n <div class=\"k-no-data\" *ngIf=\"data.length === 0\">\n <ng-template [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ messageFor('noDataText') }}</div>\n </ng-template>\n </div>\n <!--footer template-->\n <ng-template *ngIf=\"footerTemplate\"\n [templateContext]=\"{\n templateRef: footerTemplate.templateRef\n }\">\n </ng-template>\n </ng-template>\n <ng-template [ngIf]=\"isOpen\">\n <kendo-resize-sensor (resize)=\"onResize()\"></kendo-resize-sensor>\n </ng-template>\n <ng-container #container></ng-container>\n "
|
|
1640
1634
|
}),
|
|
1641
1635
|
tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
|
|
1642
1636
|
tslib_1.__metadata("design:paramtypes", [ElementRef,
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as tslib_1 from "tslib";
|
|
6
6
|
import { Input } from '@angular/core';
|
|
7
|
-
import { getHierarchicalItemLevel, valueFrom } from '../../common/util';
|
|
7
|
+
import { getHierarchicalItemLevel, isArray, valueFrom } from '../../common/util';
|
|
8
8
|
/**
|
|
9
9
|
* @hidden
|
|
10
10
|
*
|
|
@@ -20,7 +20,7 @@ var BaseCheckDirective = /** @class */ (function () {
|
|
|
20
20
|
var level = getHierarchicalItemLevel(item.index);
|
|
21
21
|
var candidate = tslib_1.__assign({}, item, { level: level });
|
|
22
22
|
this.checkedItems.push(candidate);
|
|
23
|
-
this.checkedKeys.add(
|
|
23
|
+
this.checkedKeys.add(this.getKey(candidate));
|
|
24
24
|
};
|
|
25
25
|
BaseCheckDirective.prototype.removeItem = function (item) {
|
|
26
26
|
var _this = this;
|
|
@@ -31,15 +31,29 @@ var BaseCheckDirective = /** @class */ (function () {
|
|
|
31
31
|
var candidate = tslib_1.__assign({}, item, { level: level });
|
|
32
32
|
this.checkedItems = this.checkedItems
|
|
33
33
|
.filter(function (item) { return valueFrom(item, _this.valueField) !== valueFrom(candidate, _this.valueField); });
|
|
34
|
-
this.checkedKeys.delete(
|
|
34
|
+
this.checkedKeys.delete(this.getKey(candidate));
|
|
35
35
|
};
|
|
36
36
|
BaseCheckDirective.prototype.isItemChecked = function (item) {
|
|
37
|
-
|
|
37
|
+
var level = item.index.split('_').length - 1;
|
|
38
|
+
item.level = level;
|
|
39
|
+
return this.checkedKeys.has(this.getKey(item));
|
|
38
40
|
};
|
|
39
41
|
BaseCheckDirective.prototype.updateItems = function () {
|
|
40
42
|
var _this = this;
|
|
41
43
|
this.checkedItems = this.checkedItems || [];
|
|
42
|
-
this.checkedKeys = new Set(this.checkedItems.map(function (item) { return
|
|
44
|
+
this.checkedKeys = new Set(this.checkedItems.map(function (item) { return _this.getKey(item); }));
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* Adds the item's depth to the item's value to allow duplicate values on different levels.
|
|
48
|
+
*
|
|
49
|
+
* @param item - The checked key.
|
|
50
|
+
* @returns { string } - A string key consisting of the item's `valueField` value and its depth.
|
|
51
|
+
*/
|
|
52
|
+
BaseCheckDirective.prototype.getKey = function (item) {
|
|
53
|
+
if (isArray(this.valueField)) {
|
|
54
|
+
return valueFrom(item, this.valueField) + '_' + item.level;
|
|
55
|
+
}
|
|
56
|
+
return valueFrom(item, this.valueField);
|
|
43
57
|
};
|
|
44
58
|
tslib_1.__decorate([
|
|
45
59
|
Input(),
|
|
@@ -1376,7 +1376,7 @@ var DropDownTreeComponent = /** @class */ (function () {
|
|
|
1376
1376
|
}
|
|
1377
1377
|
],
|
|
1378
1378
|
selector: 'kendo-dropdowntree',
|
|
1379
|
-
template: "\n <ng-container kendoDropDownTreeLocalizedMessages\n i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n >\n </ng-container>\n <span\n [attr.id]=\"valueLabelId\"\n class=\"k-input-inner\"\n >\n <span class=\"k-input-value-text\">\n <ng-template *ngIf=\"valueTemplate\"\n [templateContext]=\"{\n templateRef: valueTemplate.templateRef,\n $implicit: dataItem\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n </span>\n </span>\n <span\n *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n aria-hidden=\"true\"\n [attr.title]=\"messageFor('clearTitle')\"\n (click)=\"clearValue($event)\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n <button\n tabindex=\"-1\"\n type=\"button\"\n aria-hidden=\"true\"\n class=\"k-input-button k-button k-icon-button\"\n [ngClass]=\"selectButtonClasses\"\n >\n <span\n class=\"k-button-icon k-icon\"\n [ngClass]=\"buttonClasses\"\n ></span>\n </button>\n <ng-template #popupTemplate>\n <span\n *ngIf=\"filterable\"\n class=\"k-list-filter\"\n >\n <span\n class=\"k-textbox k-input\"\n [ngClass]=\"filterInputClasses\"\n >\n <span class=\"k-input-prefix\">\n <span class=\"k-input-icon k-icon k-i-search\"></span>\n </span>\n <input\n #filterInput\n (input)=\"handleFilterInputChange($event.target.value)\"\n [filterInput]=\"filterable && !touchEnabled\"\n (keydown.arrowdown)=\"handleKeydown($event)\"\n (keydown.alt.arrowup)=\"handleKeydown($event)\"\n [(ngModel)]=\"filter\"\n class=\"k-input-inner\"\n role=\"textbox\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n aria-readonly=\"false\"\n [kendoEventsOutsideAngular]=\"{\n blur: handleBlur\n }\"\n [scope]=\"this\"\n >\n </span>\n </span>\n <!--header template-->\n <ng-template\n *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate?.templateRef\n }\">\n </ng-template>\n <kendo-treeview\n #treeview\n *ngIf=\"data.length !== 0 && !allNodesHidden\"\n [size]=\"size\"\n [nodes]=\"data\"\n [style.maxHeight.px]=\"listHeight\"\n [animate]=\"false\"\n [(selectedKeys)]=\"selectedKeys\"\n [selectBy]=\"selectBy\"\n [textField]=\"textField\"\n kendoTreeViewSelectable\n [children]=\"children\"\n [hasChildren]=\"hasChildren\"\n [loadOnDemand]=\"loadOnDemand\"\n [isExpanded]=\"isNodeExpanded\"\n [isDisabled]=\"itemDisabled\"\n [nodeTemplate]=\"nodeTemplate\"\n [filter]=\"filter\"\n [isVisible]=\"isNodeVisible\"\n (focusout)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n (expand)=\"nodeExpand.emit($event)\"\n (collapse)=\"nodeCollapse.emit($event)\"\n >\n </kendo-treeview>\n <!--footer template-->\n <ng-template\n *ngIf=\"footerTemplate\"\n [templateContext]=\"{\n templateRef: footerTemplate?.templateRef\n }\">\n </ng-template>\n <!--no-data template-->\n <div class=\"k-no-data\" *ngIf=\"data.length === 0 || allNodesHidden\">\n <ng-template [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate?.templateRef\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ messageFor('noDataText') }}</div>\n </ng-template>\n </div>\n </ng-template>\n <ng-container #container></ng-container>\n ",
|
|
1379
|
+
template: "\n <ng-container kendoDropDownTreeLocalizedMessages\n i18n-noDataText=\"kendo.dropdowntree.noDataText|The text displayed in the popup when there are no items\"\n noDataText=\"NO DATA FOUND\"\n\n i18n-clearTitle=\"kendo.dropdowntree.clearTitle|The title of the clear button\"\n clearTitle=\"clear\"\n\n i18n-selectButtonText=\"kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button\"\n selectButtonText=\"Select\"\n >\n </ng-container>\n <span\n [attr.id]=\"valueLabelId\"\n class=\"k-input-inner\"\n role=\"option\"\n >\n <span class=\"k-input-value-text\">\n <ng-template *ngIf=\"valueTemplate\"\n [templateContext]=\"{\n templateRef: valueTemplate.templateRef,\n $implicit: dataItem\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!valueTemplate\"> {{ text || placeholder }} </ng-template>\n </span>\n </span>\n <span\n *ngIf=\"!loading && !readonly && clearButton && text?.length && !disabled\"\n class=\"k-clear-value\"\n [style.visibility]=\"clearButtonVisiblity\"\n aria-hidden=\"true\"\n [attr.title]=\"messageFor('clearTitle')\"\n (click)=\"clearValue($event)\"\n >\n <span class=\"k-icon k-i-x\"></span>\n </span>\n <button\n tabindex=\"-1\"\n type=\"button\"\n aria-hidden=\"true\"\n class=\"k-input-button k-button k-icon-button\"\n [ngClass]=\"selectButtonClasses\"\n [attr.aria-label]=\"messageFor('selectButtonText')\"\n >\n <span\n class=\"k-button-icon k-icon\"\n [ngClass]=\"buttonClasses\"\n ></span>\n </button>\n <ng-template #popupTemplate>\n <span\n *ngIf=\"filterable\"\n class=\"k-list-filter\"\n >\n <span\n class=\"k-textbox k-input\"\n [ngClass]=\"filterInputClasses\"\n >\n <span class=\"k-input-prefix\">\n <span class=\"k-input-icon k-icon k-i-search\"></span>\n </span>\n <input\n #filterInput\n (input)=\"handleFilterInputChange($event.target.value)\"\n [filterInput]=\"filterable && !touchEnabled\"\n (keydown.arrowdown)=\"handleKeydown($event)\"\n (keydown.alt.arrowup)=\"handleKeydown($event)\"\n [(ngModel)]=\"filter\"\n class=\"k-input-inner\"\n role=\"textbox\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n tabindex=\"0\"\n aria-disabled=\"false\"\n aria-readonly=\"false\"\n [kendoEventsOutsideAngular]=\"{\n blur: handleBlur\n }\"\n [scope]=\"this\"\n >\n </span>\n </span>\n <!--header template-->\n <ng-template\n *ngIf=\"headerTemplate\"\n [templateContext]=\"{\n templateRef: headerTemplate?.templateRef\n }\">\n </ng-template>\n <kendo-treeview\n #treeview\n *ngIf=\"data.length !== 0 && !allNodesHidden\"\n [size]=\"size\"\n [nodes]=\"data\"\n [style.maxHeight.px]=\"listHeight\"\n [animate]=\"false\"\n [(selectedKeys)]=\"selectedKeys\"\n [selectBy]=\"selectBy\"\n [textField]=\"textField\"\n kendoTreeViewSelectable\n [children]=\"children\"\n [hasChildren]=\"hasChildren\"\n [loadOnDemand]=\"loadOnDemand\"\n [isExpanded]=\"isNodeExpanded\"\n [isDisabled]=\"itemDisabled\"\n [nodeTemplate]=\"nodeTemplate\"\n [filter]=\"filter\"\n [isVisible]=\"isNodeVisible\"\n (focusout)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\"\n (selectionChange)=\"onSelectionChange($event)\"\n (expand)=\"nodeExpand.emit($event)\"\n (collapse)=\"nodeCollapse.emit($event)\"\n >\n </kendo-treeview>\n <!--footer template-->\n <ng-template\n *ngIf=\"footerTemplate\"\n [templateContext]=\"{\n templateRef: footerTemplate?.templateRef\n }\">\n </ng-template>\n <!--no-data template-->\n <div class=\"k-no-data\" *ngIf=\"data.length === 0 || allNodesHidden\">\n <ng-template [ngIf]=\"noDataTemplate\"\n [templateContext]=\"{\n templateRef: noDataTemplate?.templateRef\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!noDataTemplate\">\n <div>{{ messageFor('noDataText') }}</div>\n </ng-template>\n </div>\n </ng-template>\n <ng-container #container></ng-container>\n ",
|
|
1380
1380
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1381
1381
|
}),
|
|
1382
1382
|
tslib_1.__param(7, Optional()), tslib_1.__param(7, Inject(TOUCH_ENABLED)),
|
|
@@ -52,7 +52,7 @@ var MultiSelectTreeComponent = /** @class */ (function () {
|
|
|
52
52
|
this.cdr = cdr;
|
|
53
53
|
this.touchEnabled = touchEnabled;
|
|
54
54
|
this.hostClasses = true;
|
|
55
|
-
this.role = '
|
|
55
|
+
this.role = 'combobox';
|
|
56
56
|
this.ariaHasPopup = 'tree';
|
|
57
57
|
/**
|
|
58
58
|
* Sets the levels in the data set where the values can be found when `valueField` is an Array.
|
|
@@ -256,6 +256,13 @@ var MultiSelectTreeComponent = /** @class */ (function () {
|
|
|
256
256
|
enumerable: true,
|
|
257
257
|
configurable: true
|
|
258
258
|
});
|
|
259
|
+
Object.defineProperty(MultiSelectTreeComponent.prototype, "isAriaExpanded", {
|
|
260
|
+
get: function () {
|
|
261
|
+
return this.isOpen;
|
|
262
|
+
},
|
|
263
|
+
enumerable: true,
|
|
264
|
+
configurable: true
|
|
265
|
+
});
|
|
259
266
|
Object.defineProperty(MultiSelectTreeComponent.prototype, "isReadonly", {
|
|
260
267
|
get: function () {
|
|
261
268
|
return this.readonly;
|
|
@@ -1376,6 +1383,11 @@ var MultiSelectTreeComponent = /** @class */ (function () {
|
|
|
1376
1383
|
HostBinding('attr.role'),
|
|
1377
1384
|
tslib_1.__metadata("design:type", String)
|
|
1378
1385
|
], MultiSelectTreeComponent.prototype, "role", void 0);
|
|
1386
|
+
tslib_1.__decorate([
|
|
1387
|
+
HostBinding('attr.aria-expanded'),
|
|
1388
|
+
tslib_1.__metadata("design:type", Boolean),
|
|
1389
|
+
tslib_1.__metadata("design:paramtypes", [])
|
|
1390
|
+
], MultiSelectTreeComponent.prototype, "isAriaExpanded", null);
|
|
1379
1391
|
tslib_1.__decorate([
|
|
1380
1392
|
HostBinding('attr.aria-haspopup'),
|
|
1381
1393
|
tslib_1.__metadata("design:type", String)
|