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

package/dist/es2015/comboboxes/combobox.component.d.ts

@@ -25,6 +25,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
  */
@@ -47,6 +50,7 @@ export declare const COMBOBOX_VALUE_ACCESSOR: any;
  * ```
  */
 export declare class ComboBoxComponent implements ControlValueAccessor, OnDestroy, OnChanges, AfterContentChecked, FilterableComponent {
+    wrapper: ElementRef<HTMLElement>;
     protected localization: LocalizationService;
     protected popupService: PopupService;
     protected selectionService: SelectionService;
@@ -56,7 +60,6 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     protected zone: NgZone;
     protected cdr: ChangeDetectorRef;
     protected renderer: Renderer2;
-    protected hostElement: ElementRef;
     protected touchEnabled: boolean;
     text: any;
     /**
@@ -228,6 +231,40 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
      * Enables the [virtualization]({% slug virtualization_combobox %}) 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&mdash;
      * when the component is blurred or the value is cleared through the **Clear** button
@@ -284,10 +321,10 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     popupTemplate: TemplateRef<any>;
     searchbar: SearchBarComponent;
     optionsList: ListComponent;
-    protected wrapper: ElementRef<HTMLElement>;
     protected select: ElementRef<HTMLElement>;
     widgetClasses: boolean;
-    readonly clearable: boolean;
+    readonly isDisabled: boolean;
+    readonly isLoading: boolean;
     readonly dir: any;
     private _isFocused;
     isFocused: boolean;
@@ -332,7 +369,10 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     private subs;
     private touchstartDisposeHandler;
     private selectClickDisposeHandler;
-    constructor(localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, hostElement: ElementRef, touchEnabled: boolean);
+    private _size;
+    private _rounded;
+    private _fillMode;
+    constructor(wrapper: ElementRef<HTMLElement>, localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, cdr: ChangeDetectorRef, renderer: Renderer2, touchEnabled: boolean);
     ngOnInit(): void;
     private createValueStream;
     private attachStreams;
@@ -400,6 +440,10 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
      * @hidden
      */
     readonly buttonClasses: any;
+    /**
+     * @hidden
+     */
+    readonly selectButtonClasses: any;
     /**
      * @hidden
      */
@@ -478,4 +522,5 @@ export declare class ComboBoxComponent implements ControlValueAccessor, OnDestro
     private setMessages;
     private subscribeTouchEvents;
     private attachSelectClickHandler;
+    private setComponentClasses;
 }

package/dist/es2015/comboboxes/combobox.component.js

@@ -22,7 +22,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged } from '@progress/kendo-angular-common';
-import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown } from '../common/util';
+import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { Keys } from '@progress/kendo-angular-common';
 import { PreventableEvent } from '../common/models/preventable-event';
@@ -61,7 +61,8 @@ export const COMBOBOX_VALUE_ACCESSOR = {
  * ```
  */
 let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, hostElement, touchEnabled) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled) {
+        this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
         this.selectionService = selectionService;
@@ -71,7 +72,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.zone = zone;
         this.cdr = cdr;
         this.renderer = renderer;
-        this.hostElement = hostElement;
         this.touchEnabled = touchEnabled;
         this.selected = [];
         /**
@@ -236,6 +236,9 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.valueSubject = new Subject();
         this.clearValueSubject = new Subject();
         this.subs = new Subscription();
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.data = [];
@@ -390,8 +393,72 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     get virtual() {
         return this._virtualSettings;
     }
-    get clearable() {
-        return this.clearButton;
+    /**
+     * 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;
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get isLoading() {
+        return this.loading;
     }
     get dir() {
         return this.direction;
@@ -400,7 +467,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         return this._isFocused;
     }
     set isFocused(value) {
-        this.renderer[value ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, "k-state-focused");
+        this.renderer[value ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, "k-focus");
         this._isFocused = value;
     }
     get clearButtonVisiblity() {
@@ -423,12 +490,13 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         return isPresent(popupHeight) ? `${popupHeight}px` : 'auto';
     }
     ngOnInit() {
-        this.renderer.removeAttribute(this.hostElement.nativeElement, 'tabindex');
+        this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
         this.attachStreams();
         this.createValueStream();
         this.subscribeTouchEvents();
         this.attachSelectClickHandler();
         this.setMessages();
+        this.setComponentClasses();
     }
     createValueStream() {
         const valueStream = this.valueSubject.pipe(filter((candidate) => {
@@ -706,6 +774,13 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     get buttonClasses() {
         return this.loading ? 'k-i-loading' : this.iconClass || 'k-i-arrow-s';
     }
+    /**
+     * @hidden
+     */
+    get selectButtonClasses() {
+        return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.fillMode ? 'k-button-' + this.fillMode + '-base' : ''}
+        `;
+    }
     /**
      * @hidden
      */
@@ -931,7 +1006,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         const currentText = this.searchbar.value;
         const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
         const valueHasChanged = unresolvedSelection || textHasChanged;
-        const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.hostElement.nativeElement);
+        const runInZone = valueHasChanged || hasObservers(this.onBlur) || hasObservers(this.close) || isUntouched(this.wrapper.nativeElement);
         if (runInZone) {
             this.zone.run(() => {
                 if (valueHasChanged) {
@@ -1156,7 +1231,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         // Roll up ComboBox on iOS when tapped outside
         this.touchstartDisposeHandler = this.renderer.listen(document, 'touchstart', (e) => {
             const target = e.target;
-            const isInDropDown = inDropDown(this.hostElement, target, this.popupRef);
+            const isInDropDown = inDropDown(this.wrapper, target, this.popupRef);
             if (this.isFocused && !isInDropDown) {
                 // Close popup and mobile keyboard if searchbar is focused
                 this.zone.run(() => this.blur());
@@ -1172,6 +1247,17 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         const event = pointers ? 'pointerdown' : 'click';
         this.selectClickDisposeHandler = this.renderer.listen(selectElement, event, this.selectClick.bind(this));
     }
+    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(),
@@ -1268,6 +1354,21 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Object),
     tslib_1.__metadata("design:paramtypes", [Object])
 ], ComboBoxComponent.prototype, "virtual", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ComboBoxComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ComboBoxComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ComboBoxComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -1344,24 +1445,25 @@ tslib_1.__decorate([
     ViewChild('optionsList', { static: false }),
     tslib_1.__metadata("design:type", ListComponent)
 ], ComboBoxComponent.prototype, "optionsList", void 0);
-tslib_1.__decorate([
-    ViewChild('wrapper', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ComboBoxComponent.prototype, "wrapper", void 0);
 tslib_1.__decorate([
     ViewChild('select', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
 ], ComboBoxComponent.prototype, "select", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-combobox'),
+    HostBinding('class.k-input'),
     tslib_1.__metadata("design:type", Boolean)
 ], ComboBoxComponent.prototype, "widgetClasses", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-combobox-clearable'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
-], ComboBoxComponent.prototype, "clearable", null);
+], ComboBoxComponent.prototype, "isDisabled", null);
+tslib_1.__decorate([
+    HostBinding('class.k-loading'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ComboBoxComponent.prototype, "isLoading", null);
 tslib_1.__decorate([
     HostBinding('attr.dir'),
     tslib_1.__metadata("design:type", Object),
@@ -1398,95 +1500,94 @@ ComboBoxComponent = ComboBoxComponent_1 = tslib_1.__decorate([
             clearTitle="clear"
         >
         </ng-container>
-        <span #wrapper unselectable="on"
-            class="k-dropdown-wrap"
-            [ngClass]="{'k-state-disabled': disabled }"
+        <kendo-searchbar #searchbar
+            [role]="'combobox'"
+            [id]="focusableId"
+            [listId]="listBoxId"
+            [activeDescendant]="activeDescendant"
+            [noDataLabel]="noDataLabel"
+            [userInput]="text"
+            [suggestedText]="getSuggestion()"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [tabIndex]="tabIndex"
+            [popupOpen]="isOpen"
+            [placeholder]="placeholder"
+            (onNavigate)="handleNavigate($event)"
+            (valueChange)="searchBarChange($event)"
+            (onBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        ></kendo-searchbar>
+        <span
+            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+            class="k-clear-value"
+            [style.visibility]="clearButtonVisiblity"
+            aria-hidden="true"
+            [attr.title]="clearTitle"
+            (click)="clearValue($event)"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventEventDefault
+            }"
         >
-          <kendo-searchbar #searchbar
-              [role]="'combobox'"
-              [id]="focusableId"
-              [listId]="listBoxId"
-              [activeDescendant]="activeDescendant"
-              [noDataLabel]="noDataLabel"
-              [userInput]="text"
-              [suggestedText]="getSuggestion()"
-              [disabled]="disabled"
-              [readonly]="readonly"
-              [tabIndex]="tabIndex"
-              [popupOpen]="isOpen"
-              [placeholder]="placeholder"
-              (onNavigate)="handleNavigate($event)"
-              (valueChange)="searchBarChange($event)"
-              (onBlur)="handleBlur()"
-              (onFocus)="handleFocus()"
-          ></kendo-searchbar>
-          <span
-              *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
-              class="k-icon k-clear-value k-i-close"
-              [style.visibility]="clearButtonVisiblity"
-              aria-hidden="true"
-              [attr.title]="clearTitle"
-              (click)="clearValue($event)"
-              [kendoEventsOutsideAngular]="{
-                    mousedown: preventEventDefault
-              }"
-          >
-          </span>
-          <span
-              #select
-              aria-hidden="true"
-              unselectable="on"
-              class="k-select"
-              [kendoEventsOutsideAngular]="{
-                  mousedown: preventEventDefault
-              }"
-          >
-              <span class="k-icon" [ngClass]="buttonClasses">
-               </span>
-          </span>
-          <ng-template #popupTemplate>
-              <!--header template-->
-              <ng-template *ngIf="headerTemplate"
-                  [templateContext]="{
-                      templateRef: headerTemplate.templateRef
-                  }">
-              </ng-template>
-              <!--list-->
-              <kendo-list
-                  #optionsList
-                  [id]="listBoxId"
-                  [optionPrefix]="optionPrefix"
-                  [data]="data"
-                  [textField]="textField"
-                  [valueField]="valueField"
-                  [template]="template"
-                  [groupTemplate]="groupTemplate"
-                  [fixedGroupTemplate]="fixedGroupTemplate"
-                  [height]="listHeight"
-                  [show]="isOpen"
-                  [virtual]="virtual"
-                  (pageChange)="pageChange($event)"
-              >
-              </kendo-list>
-              <!--no-data template-->
-              <div class="k-nodata" *ngIf="data.length === 0">
-                  <ng-template [ngIf]="noDataTemplate"
-                      [templateContext]="{
-                          templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
-                      }">
-                  </ng-template>
-                  <ng-template [ngIf]="!noDataTemplate">
-                      <div>{{ noDataText }}</div>
-                  </ng-template>
-              </div>
-              <!--footer template-->
-              <ng-template *ngIf="footerTemplate"
-                  [templateContext]="{
-                      templateRef: footerTemplate.templateRef
-                  }">
-              </ng-template>
-          </ng-template>
+            <span class="k-icon k-i-x"></span>
         </span>
+        <button
+            #select
+            aria-hidden="true"
+            unselectable="on"
+            type="button"
+            class="k-input-button k-button k-icon-button"
+            [ngClass]="selectButtonClasses"
+            [kendoEventsOutsideAngular]="{
+                mousedown: preventEventDefault
+            }"
+        >
+            <span class="k-button-icon k-icon" [ngClass]="buttonClasses"></span>
+        </button>
+        <ng-template #popupTemplate>
+            <!--header template-->
+            <ng-template *ngIf="headerTemplate"
+                [templateContext]="{
+                    templateRef: headerTemplate.templateRef
+                }">
+            </ng-template>
+            <!--list-->
+            <kendo-list
+                #optionsList
+                [size]="size"
+                [rounded]="rounded"
+                [id]="listBoxId"
+                [optionPrefix]="optionPrefix"
+                [data]="data"
+                [textField]="textField"
+                [valueField]="valueField"
+                [template]="template"
+                [groupTemplate]="groupTemplate"
+                [fixedGroupTemplate]="fixedGroupTemplate"
+                [height]="listHeight"
+                [show]="isOpen"
+                [virtual]="virtual"
+                (pageChange)="pageChange($event)"
+            >
+            </kendo-list>
+            <!--no-data template-->
+            <div class="k-no-data" *ngIf="data.length === 0">
+                <ng-template [ngIf]="noDataTemplate"
+                    [templateContext]="{
+                        templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
+                    }">
+                </ng-template>
+                <ng-template [ngIf]="!noDataTemplate">
+                    <div>{{ noDataText }}</div>
+                </ng-template>
+            </div>
+            <!--footer template-->
+            <ng-template *ngIf="footerTemplate"
+                [templateContext]="{
+                    templateRef: footerTemplate.templateRef
+                }">
+            </ng-template>
+        </ng-template>
         <ng-template [ngIf]="isOpen">
             <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
         </ng-template>
@@ -1494,7 +1595,8 @@ ComboBoxComponent = ComboBoxComponent_1 = tslib_1.__decorate([
   `
     }),
     tslib_1.__param(10, Optional()), tslib_1.__param(10, Inject(TOUCH_ENABLED)),
-    tslib_1.__metadata("design:paramtypes", [LocalizationService,
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        LocalizationService,
         PopupService,
         SelectionService,
         NavigationService,
@@ -1502,7 +1604,6 @@ ComboBoxComponent = ComboBoxComponent_1 = tslib_1.__decorate([
         DataService,
         NgZone,
         ChangeDetectorRef,
-        Renderer2,
-        ElementRef, Boolean])
+        Renderer2, Boolean])
 ], ComboBoxComponent);
 export { ComboBoxComponent };

package/dist/es2015/comboboxes/multicolumncombobox.component.d.ts

@@ -20,6 +20,10 @@ export declare class MultiColumnComboBoxComponent extends ComboBoxComponent impl
      * @hidden
      */
     hostClasses: boolean;
+    /**
+     * @hidden
+     */
+    readonly isDisabled: boolean;
     /**
      * A query list of all declared columns.
      */
@@ -33,11 +37,15 @@ export declare class MultiColumnComboBoxComponent extends ComboBoxComponent impl
         max: string;
     };
     private removeWindowResizeListener;
+    /**
+     * @hidden
+     */
+    readonly tableSizeClass: any;
     /**
      * @hidden
      */
     protected readonly listContainerClasses: string[];
-    constructor(localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, hostElement: ElementRef<HTMLElement>, touchEnabled: boolean);
+    constructor(localization: LocalizationService, popupService: PopupService, selectionService: SelectionService, navigationService: NavigationService, disabledItemsService: DisabledItemsService, dataService: DataService, zone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, wrapper: ElementRef<HTMLElement>, touchEnabled: boolean);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /**