@progress/kendo-angular-dropdowns 5.5.1-dev.202111181325 → 6.0.0-dev.202201190829

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

@@ -29,6 +29,9 @@ import { ListComponent } from '../common/list.component';
 import { MultiSelectCheckableSettings } from '../common/models/checkboxes-settings';
 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';
 /**
  * Represents the [Kendo UI MultiSelect component for Angular]({% slug overview_multiselect %}).
  *
@@ -47,6 +50,7 @@ import { PageChangeEvent } from '../common/models/page-change-event';
  * ```
  */
 export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnInit, DoCheck, AfterContentChecked, AfterViewInit, FilterableComponent {
+    wrapper: ElementRef;
     private localization;
     private popupService;
     private dataService;
@@ -56,7 +60,6 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     private cdr;
     private differs;
     private renderer;
-    private hostElement;
     private _zone;
     private touchEnabled;
     listBoxId: string;
@@ -90,10 +93,6 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
      * @hidden
      */
     onSearchBarBlur(): void;
-    /**
-     * @hidden
-     */
-    wrapperMousedown(event: any): void;
     /**
      * @hidden
      */
@@ -152,6 +151,40 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
      * @hidden
      */
     tabIndex: number;
+    /**
+     * 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;
     /**
      * The hint which is displayed when the component is empty.
      * When the values are selected, it disappears.
@@ -321,7 +354,6 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     container: ViewContainerRef;
     searchbar: SearchBarComponent;
     popupTemplate: TemplateRef<any>;
-    wrapper: ElementRef<HTMLElement>;
     optionsList: ListComponent;
     template: ItemTemplateDirective;
     customItemTemplate: CustomItemTemplateDirective;
@@ -332,13 +364,25 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     tagTemplate: TagTemplateDirective;
     groupTagTemplate: GroupTagTemplateDirective;
     noDataTemplate: NoDataTemplateDirective;
-    widgetClasses: boolean;
+    hostClasses: boolean;
     readonly dir: string;
     readonly disabledClass: boolean;
+    readonly isLoading: boolean;
+    /**
+     * @hidden
+     */
+    hostMousedown(event: any): void;
     disabledIndices: Set<number>;
     private initialized;
-    constructor(localization: LocalizationService, popupService: PopupService, dataService: DataService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, cdr: ChangeDetectorRef, differs: KeyValueDiffers, renderer: Renderer2, hostElement: ElementRef, _zone: NgZone, touchEnabled: boolean);
+    private _size;
+    private _rounded;
+    private _fillMode;
+    constructor(wrapper: ElementRef, localization: LocalizationService, popupService: PopupService, dataService: DataService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, cdr: ChangeDetectorRef, differs: KeyValueDiffers, renderer: Renderer2, _zone: NgZone, touchEnabled: boolean);
     readonly listContainerClasses: any[];
+    /**
+     * @hidden
+     */
+    readonly customItemSizeClass: any;
     readonly width: any;
     readonly height: any;
     readonly activeDescendant: string;
@@ -491,4 +535,5 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     private firstFocusableIndex;
     private nextTick;
     private setMessages;
+    private setComponentClasses;
 }

package/dist/es2015/multiselect/multiselect.component.js

@@ -5,9 +5,9 @@
 /* tslint:disable:member-ordering */
 import * as tslib_1 from "tslib";
 var MultiSelectComponent_1;
-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';
@@ -63,7 +63,8 @@ const MULTISELECT_VALUE_ACCESSOR = {
  * ```
  */
 let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
-    constructor(localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, hostElement, _zone, touchEnabled) {
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.dataService = dataService;
@@ -73,7 +74,6 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         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 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
          * 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 = (_) => { };
         this.onTouchedCallback = (_) => { };
         this._placeholder = '';
@@ -309,7 +312,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         if (hasObservers(this.onBlur) ||
             hasObservers(this.filterChange) ||
             hasObservers(this.close) ||
-            isUntouched(this.hostElement.nativeElement)) {
+            isUntouched(this.wrapper.nativeElement)) {
             this._zone.run(() => {
                 this.closePopup();
                 if (!(this.isOpen && this.allowCustom)) {
@@ -326,22 +329,6 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
             this.closePopup();
         }
     }
-    /**
-     * @hidden
-     */
-    wrapperMousedown(event) {
-        const 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
      */
@@ -419,6 +406,67 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     *
+     */
+    set size(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;
+    }
+    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.nativeElement, getRoundedClass(this.rounded));
+        if (rounded) {
+            this.renderer.addClass(this.wrapper.nativeElement, 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.nativeElement, getFillModeClass('input', this.fillMode));
+        if (fillMode) {
+            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', fillMode));
+        }
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * The hint which is displayed when the component is empty.
      * When the values are selected, it disappears.
@@ -493,6 +541,25 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
     get disabledClass() {
         return this.disabled;
     }
+    get isLoading() {
+        return this.loading;
+    }
+    /**
+     * @hidden
+     */
+    hostMousedown(event) {
+        const 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();
+        }
+    }
     get listContainerClasses() {
         const containerClasses = ['k-list-container', 'k-reset'];
         if (this.popupSettings.popupClass) {
@@ -500,6 +567,12 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         }
         return containerClasses;
     }
+    /**
+     * @hidden
+     */
+    get customItemSizeClass() {
+        return `${this.size ? getSizeClass('list', this.size) : ''}`;
+    }
     get width() {
         let wrapperOffsetWidth = 0;
         if (isDocumentAvailable()) {
@@ -744,7 +817,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         this.valueChangeDetected = false;
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        this.renderer.removeAttribute(this.wrapper.nativeElement, "tabindex");
         this.createCustomValueStream();
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(({ rtl }) => {
@@ -753,6 +826,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         });
         this.setMessages();
         this.setState(this.value);
+        this.setComponentClasses();
         this.initialized = true;
     }
     ngOnChanges(changes) {
@@ -840,7 +914,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         this.cdr.markForCheck();
     }
     set isFocused(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;
     }
     get isFocused() {
@@ -877,7 +951,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         // Roll up MultiSelect on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const 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(() => {
                     this.blur();
                     if (this.isOpen) {
@@ -1244,6 +1318,17 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
             });
         });
     }
+    setComponentClasses() {
+        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));
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -1284,6 +1369,21 @@ tslib_1.__decorate([
     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),
@@ -1394,10 +1494,6 @@ tslib_1.__decorate([
     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)
@@ -1439,20 +1535,31 @@ tslib_1.__decorate([
     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',
@@ -1484,24 +1591,22 @@ MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
             clearTitle="clear"
         >
         </ng-container>
-        <div class="k-multiselect-wrap k-floatwrap"
-            #wrapper
-            (mousedown)="wrapperMousedown($event)"
+        <kendo-taglist
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [textField]="textField"
+            [valueField]="valueField"
+            [focused]="focusedTagIndex"
+            [disabled]="disabled"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [tagPrefix]="tagPrefix"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <kendo-taglist
-                [id]="tagListId"
-                [tags]="tags"
-                [textField]="textField"
-                [valueField]="valueField"
-                [focused]="focusedTagIndex"
-                [disabled]="disabled"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [tagPrefix]="tagPrefix"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
             <kendo-searchbar
                 #searchbar
                 [id]="focusableId"
@@ -1521,22 +1626,24 @@ MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
                 (onFocus)="onSearchBarFocus()"
             >
             </kendo-searchbar>
-            <span
-                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-                class="k-icon k-clear-value k-i-close"
-                [style.visibility]="clearButtonVisiblity"
-                [attr.title]="clearTitle"
-                role="button"
-                tabindex="-1"
-                (mousedown)="clearAll($event)"
-            >
-            </span>
-            <span
-                *ngIf="loading"
-                class="k-icon k-i-loading"
-            >
-            </span>
-        </div>
+        </kendo-taglist>
+
+        <span
+            *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            [attr.title]="clearTitle"
+            role="button"
+            tabindex="-1"
+            (mousedown)="clearAll($event)"
+        >
+            <span class="k-icon k-i-x"></span>
+        </span>
+        <span
+            *ngIf="loading"
+            class="k-icon k-i-loading"
+        >
+        </span>
         <ng-template #popupTemplate>
             <!--header template-->
             <ng-template *ngIf="headerTemplate"
@@ -1545,8 +1652,12 @@ MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
                 }">
             </ng-template>
             <!--custom item template-->
-            <div class="k-list" *ngIf="allowCustom && text">
-                <div class="k-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
+            <div
+                *ngIf="allowCustom && text"
+                class="k-list"
+                [ngClass]="customItemSizeClass"
+            >
+                <div class="k-list-item k-custom-item" kendoDropDownsSelectable [multipleSelection]="true" [index]="-1">
                     <ng-template *ngIf="customItemTemplate;else default_custom_item_template"
                         [templateContext]="{
                             templateRef: customItemTemplate.templateRef,
@@ -1560,6 +1671,8 @@ MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
             <!--list-->
             <kendo-list
                 #optionsList
+                [size]="size"
+                [rounded]="rounded"
                 [id]="listBoxId"
                 [optionPrefix]="optionPrefix"
                 [data]="data"
@@ -1577,7 +1690,7 @@ MultiSelectComponent = MultiSelectComponent_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 ? noDataTemplate.templateRef : undefined
@@ -1601,7 +1714,8 @@ MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
   `
     }),
     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,
@@ -1610,7 +1724,6 @@ MultiSelectComponent = MultiSelectComponent_1 = tslib_1.__decorate([
         ChangeDetectorRef,
         KeyValueDiffers,
         Renderer2,
-        ElementRef,
         NgZone, Boolean])
 ], MultiSelectComponent);
 export { MultiSelectComponent };

package/dist/es2015/package-metadata.js

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