@progress/kendo-angular-dropdowns 5.5.0 → 6.0.0-dev.202201171002

package/dist/es2015/common/list.component.js

@@ -9,7 +9,7 @@ import { ListItemDirective } from './list-item.directive';
 import { ItemTemplateDirective } from './templates/item-template.directive';
 import { GroupTemplateDirective } from './templates/group-template.directive';
 import { FixedGroupTemplateDirective } from './templates/fixed-group-template.directive';
-import { isPresent, getter, closest } from './util';
+import { isPresent, getter, closest, getSizeClass, getRoundedClass } from './util';
 import { SelectionService } from './selection/selection.service';
 import { fromEvent, merge } from 'rxjs';
 import { map, tap, auditTime, switchMap, take } from 'rxjs/operators';
@@ -32,8 +32,9 @@ let ListComponent = class ListComponent {
         this.focused = -1;
         this.show = true;
         this.multipleSelection = false;
-        this.listClass = 'k-list k-reset';
+        this.type = 'list';
         this.checkboxes = { enabled: false };
+        this.rounded = 'medium';
         this.onClick = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.listResize = new EventEmitter();
@@ -41,11 +42,13 @@ let ListComponent = class ListComponent {
         this.lastLoaded = 0;
         this.lastScrollTop = 0;
         this.scrollToFocused = false;
+        this._size = 'medium';
         this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
             .pipe(
         // handle only the very last onSelect/onFocus emission
         switchMap(event => this.zone.onStable.pipe(take(1), map(() => event))))
             .subscribe(this.scrollToItem.bind(this));
+        this.prepareClasses();
     }
     set data(data) {
         this._data = data[0] && data[0].header ? data.slice(0) : data;
@@ -53,6 +56,18 @@ let ListComponent = class ListComponent {
     get data() {
         return this._data;
     }
+    set size(size) {
+        if (this.type === 'list') {
+            this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+            if (size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', size));
+            }
+            this._size = size;
+        }
+    }
+    get size() {
+        return this._size;
+    }
     get pageSize() {
         if (this.virtual.pageSize) {
             return this.virtual.pageSize;
@@ -69,20 +84,35 @@ let ListComponent = class ListComponent {
             return overflow;
         }
     }
+    /**
+     * @hidden
+     */
+    get checkboxClasses() {
+        return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
+    }
     ngOnChanges(changes) {
         if (isChanged('data', changes, false)) {
             if (this.lastLoaded <= 0) {
                 this.lastLoaded = this.data.length - 1;
                 this.scrollToFocused = !changes.data.isFirstChange();
             }
+            this.setOverflow();
+        }
+        if (isChanged('virtual', changes, false)) {
+            this.setOverflow();
+        }
+        if (isChanged('type', changes, false)) {
+            this.prepareClasses();
         }
     }
     ngAfterViewInit() {
+        this.setComponentClasses();
         this.zone.runOutsideAngular(() => {
             this.scrollSubscription = fromEvent(this.content.nativeElement, "scroll").pipe(auditTime(100), tap(this.prefetchData.bind(this)), tap(this.findCurrentGroup.bind(this))).subscribe(() => {
                 this.lastScrollTop = this.content.nativeElement.scrollTop;
             });
         });
+        this.setOverflow();
     }
     ngAfterViewChecked() {
         if (this.virtual) {
@@ -112,6 +142,28 @@ let ListComponent = class ListComponent {
             this.selectionService.unselect(index);
         }
     }
+    prepareClasses() {
+        if (this.type === 'list') {
+            this.listContentClass = 'k-list-content';
+            this.listClass = 'k-list-ul';
+            this.listItemClass = 'k-list-item';
+            this.listVirtualClass = 'k-virtual-list';
+            this.listGroupStickyHeaderClass = 'k-list-group-sticky-header';
+            this.listGroupStickyHeaderTextClass = 'k-list-header-text';
+            this.listGroupItemClass = 'k-list-group-item';
+            this.listGroupItemTextClass = 'k-list-item-text';
+        }
+        else {
+            this.listContentClass = 'k-table-body k-table-scroller';
+            this.listClass = 'k-table k-table-list';
+            this.listItemClass = 'k-table-row';
+            this.listVirtualClass = 'k-virtual-table';
+            this.listGroupStickyHeaderClass = 'k-table-group-sticky-header';
+            this.listGroupStickyHeaderTextClass = 'k-table-th';
+            this.listGroupItemClass = 'k-table-group-row';
+            this.listGroupItemTextClass = 'k-table-th';
+        }
+    }
     isChecked(index) {
         const normalizedIndex = this.virtual ? index + this.virtual.skip : index;
         return this.selectionService.isSelected(normalizedIndex);
@@ -120,7 +172,7 @@ let ListComponent = class ListComponent {
         const content = this.content.nativeElement;
         const rect = content.getBoundingClientRect();
         // IE9 hack
-        const disabled = Array.prototype.slice.call(content.querySelectorAll(".k-state-disabled"));
+        const disabled = Array.prototype.slice.call(content.querySelectorAll(".k-disabled"));
         // This is a workaround for finding elements with pointer-events: none;
         disabled.forEach((el) => this.renderer.setStyle(el, "pointer-events", "auto"));
         const item = document.elementFromPoint(rect.left + 1, rect.top + 1);
@@ -198,6 +250,9 @@ let ListComponent = class ListComponent {
         }
         return this.disabledItemsService.isIndexDisabled(index);
     }
+    isAltRow(index) {
+        return this.type === 'dropdowngrid' && index % 2 !== 0;
+    }
     scrollToItem(index) {
         let flatIndex = index;
         if (this.dataService.grouped) {
@@ -256,6 +311,15 @@ let ListComponent = class ListComponent {
         const hasVirtualScroll = isPresent(this.virtual) && this.hasVirtualScrollbar();
         return hasVirtualScroll || this.list.nativeElement.scrollHeight > this.content.nativeElement.offsetHeight;
     }
+    /**
+     * Sets the list's content overflow (hides/shows scrollbar)
+     */
+    setOverflow() {
+        if (this.virtual) {
+            const overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
+            this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
+        }
+    }
     /**
      * Indicates whether the scrollbar should be visible in virtual mode.
      */
@@ -279,6 +343,17 @@ let ListComponent = class ListComponent {
         }
         return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
     }
+    setComponentClasses() {
+        if (this.type === 'list') {
+            this.renderer.addClass(this.wrapper.nativeElement, 'k-list');
+            if (this.size) {
+                this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
+            }
+        }
+        if (isPresent(this.virtual)) {
+            this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
+        }
+    }
 };
 tslib_1.__decorate([
     Input(),
@@ -335,7 +410,7 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
-], ListComponent.prototype, "listClass", void 0);
+], ListComponent.prototype, "type", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
@@ -345,6 +420,15 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Array),
     tslib_1.__metadata("design:paramtypes", [Array])
 ], ListComponent.prototype, "data", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ListComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ListComponent.prototype, "rounded", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -378,8 +462,7 @@ ListComponent = tslib_1.__decorate([
         selector: 'kendo-list',
         template: `
     <div *ngIf="dataService.grouped"
-        class='k-outer-group-header k-first'
-        [ngClass]="{'k-virtual-item': virtual}"
+        [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
             'height.px': virtual?.itemHeight,
             'minHeight.px' : virtual?.itemHeight,
@@ -391,17 +474,16 @@ ListComponent = tslib_1.__decorate([
                 $implicit: currentGroup
             }">
         </ng-template>
-        <ng-template [ngIf]="!fixedGroupTemplate"><strong>{{ currentGroup }}</strong> </ng-template>
+        <ng-template [ngIf]="!fixedGroupTemplate"><span [class]="listGroupStickyHeaderTextClass">{{ currentGroup }}</span></ng-template>
     </div>
     <div #content
-         [ngClass]="{ 'k-virtual-content': virtual, 'k-list-scroller': !virtual }"
-         [style.maxHeight.px]="height"
-         [style.overflowY]="overflowY"
-         unselectable="on">
+        [class]="listContentClass"
+        [style.overscrollBehavior]="'none'"
+        [style.maxHeight.px]="height"
+        unselectable="on">
     <ul #list
         role="listbox"
         [class]="listClass"
-        [ngClass]="{ 'k-virtual-list': virtual }"
         [attr.id]="id"
         [attr.aria-hidden]="!show">
          <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
@@ -414,31 +496,35 @@ ListComponent = tslib_1.__decorate([
                 [multipleSelection]="multipleSelection"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem)"
                 [attr.tabIndex]="-1"
-                class="k-item"
-                [ngClass]="{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(itemIndex) }">
-                <label *ngIf="checkboxes.enabled"
-                    class="k-checkbox-label">
-                    <input type="checkbox"
-                        class="k-checkbox"
-                        (change)="onCheckedChange($event, itemIndex)"
-                        [checked]="isChecked(itemIndex)"
-                    />
-                </label>
+                [class]="listItemClass"
+                [ngClass]="{
+                    'k-disabled': isDisabled(itemIndex),
+                    'k-table-alt-row': isAltRow(itemIndex)
+                }"
+            >
+                <input
+                    *ngIf="checkboxes.enabled"
+                    type="checkbox"
+                    class="k-checkbox"
+                    [ngClass]="checkboxClasses"
+                    (change)="onCheckedChange($event, itemIndex)"
+                    [checked]="isChecked(itemIndex)"
+                />
                 <ng-template *ngIf="template"
                     [templateContext]="{
                         templateRef: template.templateRef,
                         $implicit: dataItem
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!template">{{ getText(dataItem) }}</ng-template>
+                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
             </li>
          </ng-template>
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
                 *ngIf="dataItem.header && dataItem.index > 0"
                 role="group"
-                class='k-outer-group-header'
-                [ngClass]="{ 'k-virtual-item': virtual }"
+                [class]="listGroupItemClass"
+                [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
                 [ngStyle]="{
                     'height.px': virtual?.itemHeight,
                     'minHeight.px' : virtual?.itemHeight,
@@ -446,15 +532,17 @@ ListComponent = tslib_1.__decorate([
                 [attr.group-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1">
-                    <ng-template *ngIf="groupTemplate"
-                          [templateContext]="{
-                            templateRef: groupTemplate.templateRef,
-                            $implicit: dataItem.value
-                    }">
-                    </ng-template>
-                    <ng-template [ngIf]="!groupTemplate"><strong> {{ dataItem.value }}</strong> </ng-template>
-              </li>
-              <li
+                    <span [class]="listGroupItemTextClass">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                                templateRef: groupTemplate.templateRef,
+                                $implicit: dataItem.value
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                    </span>
+            </li>
+            <li
                 *ngIf="!dataItem.header"
                 role="option"
                 kendoDropDownsSelectable
@@ -464,15 +552,19 @@ ListComponent = tslib_1.__decorate([
                 [attr.absolute-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
                 [attr.tabIndex]="-1"
-                class="k-item"
-                [ngClass]="{ 'k-virtual-item': virtual, 'k-state-disabled': isDisabled(dataItem.offsetIndex) }">
+                [class]="listItemClass"
+                [ngClass]="{
+                    'k-disabled': isDisabled(dataItem.offsetIndex),
+                    'k-table-alt-row': isAltRow(itemIndex - 1)
+                }"
+            >
                 <ng-template *ngIf="template"
                     [templateContext]="{
                         templateRef: template.templateRef,
                         $implicit: dataItem.value
                     }">
                 </ng-template>
-                <ng-template [ngIf]="!template">{{ getText(dataItem.value) }}</ng-template>
+                <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
             </li>
         </ng-template>
         <kendo-resize-sensor

package/dist/es2015/common/models/fillmode.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible fillMode options of the dropdowns.
+ *
+ * The possible values are:
+ * - `'solid'`
+ * - `'flat'`
+ * - `'outline'`
+ * - `null`
+ */
+export declare type DropDownFillMode = 'solid' | 'flat' | 'outline';

package/dist/es2015/common/models/fillmode.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/common/models/list-type.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare type ListType = 'list' | 'dropdowngrid';

package/dist/es2015/common/models/list-type.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/common/models/rounded.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible rounded options of the dropdowns.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ * - `'full'`
+ * - `null`
+ */
+export declare type DropDownRounded = 'small' | 'medium' | 'large' | 'full';

package/dist/es2015/common/models/rounded.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/common/models/size.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible size options of the dropdowns.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ * - `null`
+ */
+export declare type DropDownSize = 'small' | 'medium' | 'large';

package/dist/es2015/common/models/size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/common/searchbar.component.js

@@ -228,7 +228,7 @@ SearchBarComponent = tslib_1.__decorate([
             [disabled]="disabled"
             [readonly]="readonly"
             [placeholder]="placeholder"
-            [class]="'k-input'"
+            [class]="'k-input-inner'"
             (input)="handleInput($event)"
             (keydown)="handleKeydown($event)"
             [kendoEventsOutsideAngular]="{

package/dist/es2015/common/selection/selectable.directive.js

@@ -60,12 +60,12 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean)
 ], SelectableDirective.prototype, "multipleSelection", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-focused'),
+    HostBinding('class.k-focus'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], SelectableDirective.prototype, "focusedClassName", null);
 tslib_1.__decorate([
-    HostBinding('class.k-state-selected'),
+    HostBinding('class.k-selected'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], SelectableDirective.prototype, "selectedClassName", null);

package/dist/es2015/common/taglist.component.d.ts

@@ -2,13 +2,18 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, Renderer2, ElementRef } from '@angular/core';
 import { TagTemplateDirective } from '../common/templates/tag-template.directive';
 import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
+import { DropDownSize } from './models/size';
+import { DropDownRounded } from './models/rounded';
+import { DropDownFillMode } from './models/fillmode';
 /**
  * @hidden
  */
 export declare class TagListComponent {
+    private renderer;
+    private hostElement;
     tags: any[];
     textField: string | string[];
     valueField: string;
@@ -19,11 +24,18 @@ export declare class TagListComponent {
     disabled: boolean;
     tagPrefix: string;
     id: string;
+    size: DropDownSize;
+    rounded: DropDownRounded;
+    fillMode: DropDownFillMode;
     /**
      * A collection with the disabled tags' indices.
      */
     disabledIndices: Set<number>;
     removeTag: EventEmitter<any>;
+    hostClasses: boolean;
+    readonly hostId: string;
+    private _size;
+    constructor(renderer: Renderer2, hostElement: ElementRef<HTMLElement>);
     tagProp(tag: any, prop: string | string[], index: number): string;
     isTagDisabled(tag: any, positionIndex: number): boolean;
     deleteTag(event: any, tag: any, index: number): void;