@progress/kendo-angular-dropdowns 5.5.1 → 6.0.1-dev.202201201129

package/dist/es/multiselect/multiselect.component.js

@@ -4,9 +4,9 @@
 *-------------------------------------------------------------------------------------------*/
 /* tslint:disable:member-ordering */
 import * as tslib_1 from "tslib";
-import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown } from '../common/util';
+import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndices, getter, isNumber, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { SearchBarComponent } from '../common/searchbar.component';
-import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject } from '@angular/core';
+import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, HostListener } from '@angular/core';
 import { Subscription, Subject, of } from 'rxjs';
 import { catchError, filter, map, tap } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
@@ -62,8 +62,9 @@ var MULTISELECT_VALUE_ACCESSOR = {
  * ```
  */
 var MultiSelectComponent = /** @class */ (function () {
-    function MultiSelectComponent(localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, hostElement, _zone, touchEnabled) {
+    function MultiSelectComponent(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled) {
         var _this = this;
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.dataService = dataService;
@@ -73,7 +74,6 @@ var MultiSelectComponent = /** @class */ (function () {
         this.cdr = cdr;
         this.differs = differs;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
         this.listBoxId = guid();
@@ -234,8 +234,11 @@ var MultiSelectComponent = /** @class */ (function () {
          * This event is preventable. If you cancel it, the tag will not be removed.
          */
         this.removeTag = new EventEmitter();
-        this.widgetClasses = true;
+        this.hostClasses = true;
         this.initialized = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.onChangeCallback = function (_) { };
         this.onTouchedCallback = function (_) { };
         this._placeholder = '';
@@ -312,7 +315,7 @@ var MultiSelectComponent = /** @class */ (function () {
         if (hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
             hasObservers(this.close) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(function () {
                 _this.closePopup();
                 if (!(_this.isOpen && _this.allowCustom)) {
@@ -329,22 +332,6 @@ var MultiSelectComponent = /** @class */ (function () {
             this.closePopup();
         }
     };
-    /**
-     * @hidden
-     */
-    MultiSelectComponent.prototype.wrapperMousedown = function (event) {
-        var inputElement = this.searchbar.input.nativeElement;
-        if (event.button === 0) {
-            if (this.isFocused && this.isOpen && event.target === inputElement) {
-                return;
-            }
-            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
-                this.searchbar.focus();
-            }
-            this.togglePopup(!this.isOpen);
-            event.preventDefault();
-        }
-    };
     /**
      * @hidden
      */
@@ -438,6 +425,79 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         *
+         */
+        set: function (size) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', size));
+            }
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * Sets the border radius of the component.
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         *
+         */
+        set: function (rounded) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+            if (rounded) {
+                this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(rounded));
+            }
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(MultiSelectComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * Sets the fillMode of the component.
+         *
+         * The possible values are:
+         * * `'flat'`
+         * * `'solid'` (default)
+         * * `'outline'`
+         * * `null`
+         *
+         */
+        set: function (fillMode) {
+            this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+            if (fillMode) {
+                this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+            }
+            this._fillMode = fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiSelectComponent.prototype, "placeholder", {
         get: function () {
             return this.selectedDataItems.length ? '' : this._placeholder;
@@ -544,6 +604,29 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "isLoading", {
+        get: function () {
+            return this.loading;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    MultiSelectComponent.prototype.hostMousedown = function (event) {
+        var inputElement = this.searchbar.input.nativeElement;
+        if (event.button === 0) {
+            if (this.isFocused && this.isOpen && event.target === inputElement) {
+                return;
+            }
+            if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
+                this.searchbar.focus();
+            }
+            this.togglePopup(!this.isOpen);
+            event.preventDefault();
+        }
+    };
     Object.defineProperty(MultiSelectComponent.prototype, "listContainerClasses", {
         get: function () {
             var containerClasses = ['k-list-container', 'k-reset'];
@@ -555,6 +638,16 @@ var MultiSelectComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(MultiSelectComponent.prototype, "customItemSizeClass", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "" + (this.size ? getSizeClass('list', this.size) : '');
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(MultiSelectComponent.prototype, "width", {
         get: function () {
             var wrapperOffsetWidth = 0;
@@ -828,7 +921,7 @@ var MultiSelectComponent = /** @class */ (function () {
     };
     MultiSelectComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.createCustomValueStream();
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(function (_a) {
@@ -838,6 +931,7 @@ var MultiSelectComponent = /** @class */ (function () {
         });
         this.setMessages();
         this.setState(this.value);
+        this.setComponentClasses();
         this.initialized = true;
     };
     MultiSelectComponent.prototype.ngOnChanges = function (changes) {
@@ -934,7 +1028,7 @@ var MultiSelectComponent = /** @class */ (function () {
             return this._isFocused;
         },
         set: function (isFocused) {
-            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.hostElement.nativeElement, 'k-state-focused');
+            this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
             this._isFocused = isFocused;
         },
         enumerable: true,
@@ -973,7 +1067,7 @@ var MultiSelectComponent = /** @class */ (function () {
             // Roll up MultiSelect on iOS when tapped outside
             return _this.touchstartDisposeHandler = _this.renderer.listen(document, 'touchstart', function (e) {
                 var target = e.target;
-                if ((_this.isFocused || _this.isOpen) && !inDropDown(_this.hostElement, target, _this.popupRef)) {
+                if ((_this.isFocused || _this.isOpen) && !inDropDown(_this.wrapper, target, _this.popupRef)) {
                     _this._zone.run(function () {
                         _this.blur();
                         if (_this.isOpen) {
@@ -1351,6 +1445,17 @@ var MultiSelectComponent = /** @class */ (function () {
             });
         });
     };
+    MultiSelectComponent.prototype.setComponentClasses = function () {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
+        }
+    };
     var MultiSelectComponent_1;
     tslib_1.__decorate([
         Input(),
@@ -1391,6 +1496,21 @@ var MultiSelectComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", Number),
         tslib_1.__metadata("design:paramtypes", [Number])
     ], MultiSelectComponent.prototype, "tabIndex", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MultiSelectComponent.prototype, "size", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MultiSelectComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], MultiSelectComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String),
@@ -1501,10 +1621,6 @@ var MultiSelectComponent = /** @class */ (function () {
         ViewChild('popupTemplate', { static: true }),
         tslib_1.__metadata("design:type", TemplateRef)
     ], MultiSelectComponent.prototype, "popupTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild('wrapper', { static: true }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], MultiSelectComponent.prototype, "wrapper", void 0);
     tslib_1.__decorate([
         ViewChild('optionsList', { static: false }),
         tslib_1.__metadata("design:type", ListComponent)
@@ -1546,20 +1662,31 @@ var MultiSelectComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", NoDataTemplateDirective)
     ], MultiSelectComponent.prototype, "noDataTemplate", void 0);
     tslib_1.__decorate([
-        HostBinding('class.k-widget'),
         HostBinding('class.k-multiselect'),
+        HostBinding('class.k-input'),
         tslib_1.__metadata("design:type", Boolean)
-    ], MultiSelectComponent.prototype, "widgetClasses", void 0);
+    ], MultiSelectComponent.prototype, "hostClasses", void 0);
     tslib_1.__decorate([
         HostBinding('attr.dir'),
         tslib_1.__metadata("design:type", String),
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiSelectComponent.prototype, "dir", null);
     tslib_1.__decorate([
-        HostBinding('class.k-state-disabled'),
+        HostBinding('class.k-disabled'),
         tslib_1.__metadata("design:type", Boolean),
         tslib_1.__metadata("design:paramtypes", [])
     ], MultiSelectComponent.prototype, "disabledClass", null);
+    tslib_1.__decorate([
+        HostBinding('class.k-loading'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MultiSelectComponent.prototype, "isLoading", null);
+    tslib_1.__decorate([
+        HostListener('mousedown', ['$event']),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", [Object]),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], MultiSelectComponent.prototype, "hostMousedown", null);
     MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
         Component({
             exportAs: 'kendoMultiSelect',
@@ -1582,10 +1709,11 @@ 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        <div class=\"k-multiselect-wrap k-floatwrap\"\n            #wrapper\n            (mousedown)=\"wrapperMousedown($event)\"\n        >\n            <kendo-taglist\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-taglist>\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            <span\n                *ngIf=\"!loading && !readonly && clearButton && (tags?.length || text?.length)\"\n                class=\"k-icon k-clear-value k-i-close\"\n                [style.visibility]=\"clearButtonVisiblity\"\n                [attr.title]=\"clearTitle\"\n                role=\"button\"\n                tabindex=\"-1\"\n                (mousedown)=\"clearAll($event)\"\n            >\n            </span>\n            <span\n                *ngIf=\"loading\"\n                class=\"k-icon k-i-loading\"\n            >\n            </span>\n        </div>\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 class=\"k-list\" *ngIf=\"allowCustom && text\">\n                <div class=\"k-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                [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-nodata\" *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.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  "
         }),
         tslib_1.__param(11, Optional()), tslib_1.__param(11, Inject(TOUCH_ENABLED)),
-        tslib_1.__metadata("design:paramtypes", [LocalizationService,
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            LocalizationService,
             PopupService,
             DataService,
             SelectionService,
@@ -1594,7 +1722,6 @@ var MultiSelectComponent = /** @class */ (function () {
             ChangeDetectorRef,
             KeyValueDiffers,
             Renderer2,
-            ElementRef,
             NgZone, Boolean])
     ], MultiSelectComponent);
     return MultiSelectComponent;

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639043976,
+    publishDate: 1642677856,
     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'
 };

package/dist/es2015/autocomplete/autocomplete.component.d.ts

@@ -24,6 +24,9 @@ import { DataService } from '../common/data.service';
 import { ListComponent } from '../common/list.component';
 import { VirtualizationSettings } from '../common/models/virtualization-settings';
 import { PageChangeEvent } from '../common/models/page-change-event';
+import { DropDownSize } from '../common/models/size';
+import { DropDownRounded } from '../common/models/rounded';
+import { DropDownFillMode } from '../common/models/fillmode';
 /**
  * @hidden
  */
@@ -179,6 +182,40 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
      * Enables the [virtualization]({% slug virtualization_autocomplete %}) functionality.
      */
     virtual: boolean | VirtualizationSettings;
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    size: DropDownSize;
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    rounded: DropDownRounded;
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    fillMode: DropDownFillMode;
     /**
      * Fires each time the value is changed—
      * when the component is blurred or the value is cleared through the **Clear** button
@@ -233,6 +270,7 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     widgetClasses: boolean;
     isFocused: boolean;
     readonly isDisabled: boolean;
+    readonly isLoading: boolean;
     readonly dir: any;
     text: string;
     listBoxId: string;
@@ -336,6 +374,9 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private wrapper;
     private _isFocused;
     private direction;
+    private _size;
+    private _rounded;
+    private _fillMode;
     private subscribeEvents;
     private subscribeTouchEvents;
     private unsubscribeEvents;
@@ -348,4 +389,5 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private firstFocusableIndex;
     private findIndexPredicate;
     private setMessages;
+    private setComponentClasses;
 }

package/dist/es2015/autocomplete/autocomplete.component.js

@@ -20,7 +20,7 @@ import { SelectionService } from '../common/selection/selection.service';
 import { NavigationService } from '../common/navigation/navigation.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { Subject, merge } from 'rxjs';
-import { isPresent, guid, getter, isUntouched, noop, inDropDown } from '../common/util';
+import { isPresent, guid, getter, isUntouched, noop, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { NoDataTemplateDirective } from '../common/templates/no-data-template.directive';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -169,6 +169,9 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
         this._value = "";
         this.valueChangeSubject = new Subject();
         this._isFocused = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.wrapper = this.hostElement.nativeElement;
@@ -353,16 +356,80 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
     get virtual() {
         return this._virtualSettings;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(size) {
+        this.renderer.removeClass(this.wrapper, getSizeClass('input', this.size));
+        if (size) {
+            this.renderer.addClass(this.wrapper, getSizeClass('input', size));
+        }
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * Sets the border radius of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     *
+     */
+    set rounded(rounded) {
+        this.renderer.removeClass(this.wrapper, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper, getRoundedClass(rounded));
+        }
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * Sets the fillMode of the component.
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     *
+     */
+    set fillMode(fillMode) {
+        this.renderer.removeClass(this.wrapper, getFillModeClass('input', this.fillMode));
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper, getFillModeClass('input', fillMode));
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     get isFocused() {
         return this._isFocused;
     }
     set isFocused(isFocused) {
-        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper, "k-state-focused");
+        this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper, "k-focus");
         this._isFocused = isFocused;
     }
     get isDisabled() {
         return this.disabled;
     }
+    get isLoading() {
+        return this.loading;
+    }
     get dir() {
         return this.direction;
     }
@@ -375,6 +442,7 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             this.setMessages();
         });
         this.setMessages();
+        this.setComponentClasses();
     }
     ngOnDestroy() {
         this.destroyPopup();
@@ -802,6 +870,17 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             });
         });
     }
+    setComponentClasses() {
+        if (this.size) {
+            this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
+        }
+        if (this.rounded) {
+            this.renderer.addClass(this.wrapper, getRoundedClass(this.rounded));
+        }
+        if (this.fillMode) {
+            this.renderer.addClass(this.wrapper, getFillModeClass('input', this.fillMode));
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -881,6 +960,21 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Object),
     tslib_1.__metadata("design:paramtypes", [Object])
 ], AutoCompleteComponent.prototype, "virtual", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], AutoCompleteComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], AutoCompleteComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], AutoCompleteComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -954,15 +1048,20 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", ListComponent)
 ], AutoCompleteComponent.prototype, "optionsList", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-autocomplete'),
+    HostBinding('class.k-input'),
     tslib_1.__metadata("design:type", Boolean)
 ], AutoCompleteComponent.prototype, "widgetClasses", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], AutoCompleteComponent.prototype, "isDisabled", null);
+tslib_1.__decorate([
+    HostBinding('class.k-loading'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], AutoCompleteComponent.prototype, "isLoading", null);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", Object),
@@ -1021,7 +1120,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = tslib_1.__decorate([
         ></kendo-searchbar>
         <span
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
-            class="k-icon k-clear-value k-i-close"
+            class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             [attr.title]="clearTitle"
             role="button"
@@ -1029,7 +1128,8 @@ AutoCompleteComponent = AutoCompleteComponent_1 = tslib_1.__decorate([
             (click)="clearValue($event)"
             (mousedown)="$event.preventDefault()"
         >
-</span>
+            <span class="k-icon k-i-x"></span>
+        </span>
         <span *ngIf="loading" class="k-icon k-i-loading"></span>
         <ng-template #popupTemplate>
             <!--header template-->
@@ -1041,6 +1141,8 @@ AutoCompleteComponent = AutoCompleteComponent_1 = tslib_1.__decorate([
             <!--list-->
             <kendo-list
                 #optionsList
+                [size]="size"
+                [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -1056,7 +1158,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = tslib_1.__decorate([
             >
             </kendo-list>
             <!--no-data template-->
-            <div class="k-nodata" *ngIf="data.length === 0">
+            <div class="k-no-data" *ngIf="data.length === 0">
                 <ng-template [ngIf]="noDataTemplate"
                     [templateContext]="{
                         templateRef: noDataTemplate?.templateRef