@progress/kendo-angular-dropdowns 6.0.1 → 6.0.2-dev.202202221633

package/dist/npm/multiselect/multiselect.component.js

@@ -122,7 +122,8 @@ var MultiSelectComponent = /** @class */ (function () {
          */
         this.clearButton = true;
         /**
-         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
+         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags
+         * ([see examples]({% slug summarytagmode_multiselect %}#toc-rendering-of-tags)).
          *
          * @param { Any[] } dataItems - The selected data items from the list.
          * @returns { Any[] } - The tags that will be rendered by the component.
@@ -237,6 +238,7 @@ var MultiSelectComponent = /** @class */ (function () {
          */
         this.removeTag = new core_1.EventEmitter();
         this.hostClasses = true;
+        this.role = 'combobox';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -613,6 +615,13 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "isAriaExpanded", {
+        get: function () {
+            return this.isOpen;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -697,19 +706,12 @@ var MultiSelectComponent = /** @class */ (function () {
     Object.defineProperty(MultiSelectComponent.prototype, "noDataLabel", {
         get: function () {
             if (this.dataService.itemsCount === 0) {
-                return this.noDataText;
+                return this.messageFor('noDataText');
             }
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(MultiSelectComponent.prototype, "clearTitle", {
-        get: function () {
-            return this.localization.get('clearTitle');
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(MultiSelectComponent.prototype, "clearButtonVisiblity", {
         get: function () {
             if (this.touchEnabled) {
@@ -929,9 +931,8 @@ var MultiSelectComponent = /** @class */ (function () {
             .changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
-            _this.setMessages();
+            _this.cdr.markForCheck();
         });
-        this.setMessages();
         this.setState(this.value);
         this.setComponentClasses();
         this.initialized = true;
@@ -955,7 +956,6 @@ var MultiSelectComponent = /** @class */ (function () {
     MultiSelectComponent.prototype.ngOnDestroy = function () {
         this._toggle(false);
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
     };
     /**
      * Toggles the visibility of the popup
@@ -993,6 +993,12 @@ var MultiSelectComponent = /** @class */ (function () {
         this.text = "";
         this.value = [];
     };
+    /**
+     * @hidden
+     */
+    MultiSelectComponent.prototype.messageFor = function (key) {
+        return this.localization.get(key);
+    };
     // NG MODEL BINDINGS
     /**
      * @hidden
@@ -1437,16 +1443,6 @@ var MultiSelectComponent = /** @class */ (function () {
             setTimeout(function () { return _this._zone.run(f); });
         });
     };
-    MultiSelectComponent.prototype.setMessages = function () {
-        var _this = this;
-        this._zone.runOutsideAngular(function () {
-            clearTimeout(_this.messagesTimeout);
-            _this.messagesTimeout = setTimeout(function () {
-                _this.noDataText = _this.localization.get('noDataText');
-                _this.cdr.detectChanges();
-            });
-        });
-    };
     MultiSelectComponent.prototype.setComponentClasses = function () {
         if (this.size) {
             this.renderer.addClass(this.wrapper.nativeElement, util_1.getSizeClass('input', this.size));
@@ -1683,6 +1679,15 @@ var MultiSelectComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiSelectComponent.prototype, "isLoading", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.role'),
+        tslib_1.__metadata("design:type", String)
+    ], MultiSelectComponent.prototype, "role", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.aria-expanded'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectComponent.prototype, "isAriaExpanded", null);
     tslib_1.__decorate([
         core_1.HostListener('mousedown', ['$event']),
         tslib_1.__metadata("design:type", Function),
@@ -1711,7 +1716,7 @@ var MultiSelectComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-multiselect',
-            template: "\n        <ng-container kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.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-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [focused]=\"focusedTagIndex\"\n            [disabled]=\"disabled\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [tagPrefix]=\"tagPrefix\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'listbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n        </kendo-taglist>\n\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"clearTitle\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (mousedown)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--custom item template-->\n            <div\n                *ngIf=\"allowCustom && text\"\n                class=\"k-list\"\n                [ngClass]=\"customItemSizeClass\"\n            >\n                <div class=\"k-list-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\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                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\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>{{ 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  "
+            template: "\n        <ng-container kendoMultiSelectLocalizedMessages\n            i18n-noDataText=\"kendo.multiselect.noDataText|The text displayed in the popup when there are no items\"\n            noDataText=\"NO DATA FOUND\"\n\n            i18n-clearTitle=\"kendo.multiselect.clearTitle|The title of the clear button\"\n            clearTitle=\"clear\"\n        >\n        </ng-container>\n        <kendo-taglist\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [id]=\"tagListId\"\n            [tags]=\"tags\"\n            [textField]=\"textField\"\n            [valueField]=\"valueField\"\n            [focused]=\"focusedTagIndex\"\n            [disabled]=\"disabled\"\n            [template]=\"tagTemplate\"\n            [groupTemplate]=\"groupTagTemplate\"\n            [tagPrefix]=\"tagPrefix\"\n            [disabledIndices]=\"disabledIndices\"\n            (removeTag)=\"handleRemoveTag($event)\"\n        >\n            <kendo-searchbar\n                #searchbar\n                [id]=\"focusableId\"\n                [role]=\"'textbox'\"\n                [tagListId]=\"tagListId\"\n                [activeDescendant]=\"activeDescendant\"\n                [noDataLabel]=\"noDataLabel\"\n                [userInput]=\"text\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [tabIndex]=\"tabIndex\"\n                [popupOpen]=\"isOpen\"\n                [placeholder]=\"placeholder\"\n                (onNavigate)=\"handleNavigate($event)\"\n                (valueChange)=\"handleFilter($event)\"\n                (onBlur)=\"onSearchBarBlur()\"\n                (onFocus)=\"onSearchBarFocus()\"\n            >\n            </kendo-searchbar>\n        </kendo-taglist>\n\n        <span\n            *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n            class=\"k-clear-value\"\n            [style.visibility]=\"clearButtonVisiblity\"\n            [attr.title]=\"messageFor('clearTitle')\"\n            role=\"button\"\n            tabindex=\"-1\"\n            (mousedown)=\"clearAll($event)\"\n        >\n            <span class=\"k-icon k-i-x\"></span>\n        </span>\n        <span\n            *ngIf=\"loading\"\n            class=\"k-icon k-i-loading\"\n        >\n        </span>\n        <ng-template #popupTemplate>\n            <!--header template-->\n            <ng-template *ngIf=\"headerTemplate\"\n                [templateContext]=\"{\n                    templateRef: headerTemplate.templateRef\n                }\">\n            </ng-template>\n            <!--custom item template-->\n            <div\n                *ngIf=\"allowCustom && text\"\n                class=\"k-list\"\n                [ngClass]=\"customItemSizeClass\"\n            >\n                <div class=\"k-list-item k-custom-item\" kendoDropDownsSelectable [multipleSelection]=\"true\" [index]=\"-1\">\n                    <ng-template *ngIf=\"customItemTemplate;else default_custom_item_template\"\n                        [templateContext]=\"{\n                            templateRef: customItemTemplate.templateRef,\n                            $implicit: text\n                        }\">\n                    </ng-template>\n                    <ng-template #default_custom_item_template>{{ text }}</ng-template>\n                    <span class=\"k-icon k-i-plus\" style=\"float: right\"></span>\n                </div>\n            </div>\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                [height]=\"listHeight\"\n                [template]=\"template\"\n                [groupTemplate]=\"groupTemplate\"\n                [fixedGroupTemplate]=\"fixedGroupTemplate\"\n                [show]=\"isOpen\"\n                [multipleSelection]=\"true\"\n                [virtual]=\"virtual\"\n                (pageChange)=\"pageChange($event)\"\n                [checkboxes]=\"checkboxes\"\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  "
         }),
         tslib_1.__param(11, core_1.Optional()), tslib_1.__param(11, core_1.Inject(touch_enabled_1.TOUCH_ENABLED)),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642685068,
+    publishDate: 1645547418,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };