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

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

@@ -16,7 +16,7 @@ import { DisabledItemsService } from '../common/disabled-items/disabled-items.se
 import { NavigationService } from '../common/navigation/navigation.service';
 import { SelectionService } from '../common/selection/selection.service';
 import { TOUCH_ENABLED } from '../common/constants/touch-enabled';
-import { getter, isObject, isPresent, noop } from '../common/util';
+import { getSizeClass, getter, isObject, isPresent, noop } from '../common/util';
 import { getRowWidthFromColumnsMeta, scrollbarWidth } from './combobox-column/util';
 import { FilterableComponent } from '../common/filtering/filterable-component';
 import { MultiColumnComboBoxMessages } from '../common/constants/error-messages';
@@ -24,8 +24,8 @@ import { MultiColumnComboBoxMessages } from '../common/constants/error-messages'
  * Represents the [Kendo UI MultiColumnComboBox component for Angular]({% slug overview_multicolumncombobox %}).
  */
 let MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = class MultiColumnComboBoxComponent extends ComboBoxComponent {
-    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled) {
-        super(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, hostElement, touchEnabled);
+    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled) {
+        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled);
         /**
          * @hidden
          */
@@ -36,6 +36,12 @@ let MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = class MultiC
         // use a smaller virtual page size as columns with multiple cells can cause poor performance
         this.defaultVirtualPageSize = 30;
     }
+    /**
+     * @hidden
+     */
+    get isDisabled() {
+        return this.disabled;
+    }
     /**
      * @hidden
      */
@@ -50,18 +56,19 @@ let MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = class MultiC
         const max = isNaN(width) ? width : `${width}px`;
         return { min, max };
     }
+    /**
+     * @hidden
+     */
+    get tableSizeClass() {
+        return `${this.size ? getSizeClass('table', this.size) : ''}`;
+    }
     /**
      * @hidden
      */
     get listContainerClasses() {
         return [
-            'k-list-container',
             'k-popup',
-            'k-reset',
-            'k-group',
-            'k-dropdowngrid-popup',
-            'k-popup-flush',
-            'k-state-border-up'
+            'k-dropdowngrid-popup'
         ].concat(this.popupSettings.popupClass || []);
     }
     ngAfterViewInit() {
@@ -137,6 +144,11 @@ tslib_1.__decorate([
     HostBinding('class.k-dropdowngrid'),
     tslib_1.__metadata("design:type", Boolean)
 ], MultiColumnComboBoxComponent.prototype, "hostClasses", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-disabled'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], MultiColumnComboBoxComponent.prototype, "isDisabled", null);
 tslib_1.__decorate([
     ContentChildren(ComboBoxColumnComponent),
     tslib_1.__metadata("design:type", QueryList)
@@ -184,63 +196,56 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = tslib_1.__decora
             clearTitle="clear"
         >
         </ng-container>
-        <span
-            #wrapper
-            unselectable="on"
-            class="k-dropdown-wrap"
-            [class.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
-                #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>
+        </kendo-searchbar>
 
-            <span
-                #select
-                aria-hidden="true"
-                unselectable="on"
-                class="k-select"
-                [kendoEventsOutsideAngular]="{
-                    mousedown: preventEventDefault
-                }"
-            >
-                <span
-                    class="k-icon"
-                    [ngClass]="buttonClasses"
-                >
-                </span>
-            </span>
+        <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
+            }"
+        >
+            <span class="k-icon k-i-x"></span>
         </span>
 
+        <button
+            #select
+            tabindex="-1"
+            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>
             <!--user-defined header template -->
             <ng-template
@@ -251,125 +256,139 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = tslib_1.__decora
             >
             </ng-template>
 
-            <!--grid header-->
-            <div
-                #header
-                class="k-grid-header"
-            >
-                <div class="k-grid-header-wrap">
-                    <table role="presentation">
-                        <colgroup>
-                            <ng-container *ngFor="let column of columns">
-                                <col
-                                    *ngIf="!column.hidden && column.matchesMedia"
-                                    [style.width.px]="column.width"
-                                />
-                            </ng-container>
-                        </colgroup>
-                        <tbody>
-                            <tr>
+            <!--data table-->
+            <div class="k-data-table" [ngClass]="tableSizeClass">
+
+                <!--grid header-->
+                <div
+                    #header
+                    class="k-table-header"
+                >
+                    <div class="k-table-header-wrap">
+                        <table class="k-table" role="presentation">
+                            <colgroup>
                                 <ng-container *ngFor="let column of columns">
-                                    <th
+                                    <col
                                         *ngIf="!column.hidden && column.matchesMedia"
-                                        class="k-header"
-                                        [ngStyle]="column.headerStyle"
-                                        [ngClass]="column.headerClass"
-                                    >
-                                        <ng-container *ngIf="!column.headerTemplate">
-                                            {{ column.title || column.field }}
-                                        </ng-container>
-                                        <ng-template
-                                            *ngIf="column.headerTemplate"
-                                            [templateContext]="{
-                                                templateRef: column.headerTemplate?.templateRef,
-                                                $implicit: column,
-                                                column: column
-                                            }"
-                                        >
-                                        </ng-template>
-                                    </th>
+                                        [style.width.px]="column.width"
+                                    />
                                 </ng-container>
-                            </tr>
-                        </tbody>
-                    </table>
+                            </colgroup>
+                            <thead class="k-table-thead">
+                                <tr class="k-table-row">
+                                    <ng-container *ngFor="let column of columns">
+                                        <th
+                                            *ngIf="!column.hidden && column.matchesMedia"
+                                            class="k-table-th"
+                                            [ngStyle]="column.headerStyle"
+                                            [ngClass]="column.headerClass"
+                                        >
+                                            <ng-container *ngIf="!column.headerTemplate">
+                                                {{ column.title || column.field }}
+                                            </ng-container>
+                                            <ng-template
+                                                *ngIf="column.headerTemplate"
+                                                [templateContext]="{
+                                                    templateRef: column.headerTemplate?.templateRef,
+                                                    $implicit: column,
+                                                    column: column
+                                                }"
+                                            >
+                                            </ng-template>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </thead>
+                        </table>
+                    </div>
                 </div>
-            </div>
 
-            <!-- item template -->
-            <ng-template #rowTemplate let-dataItem>
-                <ng-container *ngFor="let column of columns">
-                    <span
-                        *ngIf="!column.hidden && column.matchesMedia"
-                        class="k-cell"
-                        [ngClass]="column.class"
-                        [style.width.px]="column.width"
-                        [ngStyle]="column.style"
-                    >
-                        <ng-container *ngIf="!column.cellTemplate">
-                            {{ textFrom(dataItem, column.field) }}
-                        </ng-container>
-                        <ng-template
-                            *ngIf="column.cellTemplate"
-                            [templateContext]="{
-                                templateRef: column.cellTemplate?.templateRef,
-                                $implicit: dataItem,
-                                dataItem: dataItem,
-                                column: column
-                            }"
+                <!-- item template -->
+                <ng-template #rowTemplate let-dataItem>
+                    <ng-container *ngFor="let column of columns">
+                        <span
+                            *ngIf="!column.hidden && column.matchesMedia"
+                            class="k-table-td"
+                            [ngClass]="column.class"
+                            [style.width.px]="column.width"
+                            [ngStyle]="column.style"
                         >
-                        </ng-template>
-                    </span>
-                </ng-container>
-            </ng-template>
-
-            <!--list-->
-            <kendo-list
-                #optionsList
-                [id]="listBoxId"
-                [optionPrefix]="optionPrefix"
-                [data]="data"
-                [textField]="textField"
-                [valueField]="valueField"
-                [template]="{ templateRef: rowTemplate }"
-                [groupTemplate]="groupTemplate"
-                [fixedGroupTemplate]="fixedGroupTemplate"
-                [height]="listHeight"
-                [show]="isOpen"
-                [virtual]="virtual"
-                [listClass]="'k-reset k-grid-list'"
-                (pageChange)="pageChange($event)"
-                (listResize)="updateHeaderPadding(header)"
-            >
-            </kendo-list>
+                            <ng-container *ngIf="!column.cellTemplate">
+                                {{ textFrom(dataItem, column.field) }}
+                            </ng-container>
+                            <ng-template
+                                *ngIf="column.cellTemplate"
+                                [templateContext]="{
+                                    templateRef: column.cellTemplate?.templateRef,
+                                    $implicit: dataItem,
+                                    dataItem: dataItem,
+                                    column: column
+                                }"
+                            >
+                            </ng-template>
+                        </span>
+                    </ng-container>
+                </ng-template>
 
-            <!--no-data template-->
-            <div
-                class="k-nodata"
-                *ngIf="data.length === 0"
-            >
-                <ng-template
-                    [ngIf]="noDataTemplate"
-                    [templateContext]="{
-                        templateRef: noDataTemplate?.templateRef
-                    }"
+                <!--list-->
+                <kendo-list
+                    #optionsList
+                    [id]="listBoxId"
+                    [optionPrefix]="optionPrefix"
+                    [data]="data"
+                    [textField]="textField"
+                    [valueField]="valueField"
+                    [template]="{ templateRef: rowTemplate }"
+                    [groupTemplate]="groupTemplate"
+                    [fixedGroupTemplate]="fixedGroupTemplate"
+                    [height]="listHeight"
+                    [show]="isOpen"
+                    [virtual]="virtual"
+                    [type]="'dropdowngrid'"
+                    (pageChange)="pageChange($event)"
+                    (listResize)="updateHeaderPadding(header)"
                 >
-                </ng-template>
-                <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
-                </ng-template>
-            </div>
+                </kendo-list>
 
-            <!--user-defined footer template-->
-            <ng-container *ngIf="footerTemplate">
-                <div class="k-footer">
+                <!--no-data template-->
+                <div
+                    class="k-no-data"
+                    *ngIf="data.length === 0"
+                >
                     <ng-template
+                        [ngIf]="noDataTemplate"
                         [templateContext]="{
-                            templateRef: footerTemplate.templateRef
+                            templateRef: noDataTemplate?.templateRef
                         }"
                     >
                     </ng-template>
+                    <ng-template [ngIf]="!noDataTemplate">
+                        <div>{{ noDataText }}</div>
+                    </ng-template>
                 </div>
-            </ng-container>
+
+                <!--user-defined footer template-->
+                <ng-container *ngIf="footerTemplate">
+                    <div class="k-table-footer">
+                        <table class="k-table">
+                            <tfoot class="k-table-tfoot">
+                                <tr class="k-table-row">
+                                    <td class="k-table-td">
+                                        <ng-template
+                                            [templateContext]="{
+                                                templateRef: footerTemplate.templateRef
+                                            }"
+                                        >
+                                        </ng-template>
+                                    </td>
+                                </tr>
+                            </tfoot>
+                        </table>
+                    </div>
+                </ng-container>
+
+            </div>
+
         </ng-template>
 
         <kendo-resize-sensor

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

@@ -14,6 +14,9 @@ import { DataService } from './data.service';
 import { VirtualizationSettings } from './models/virtualization-settings';
 import { PageChangeEvent } from './models/page-change-event';
 import { MultiSelectCheckableSettings } from './models/checkboxes-settings';
+import { DropDownSize } from './models/size';
+import { DropDownRounded } from './models/rounded';
+import { ListType } from './models/list-type';
 /**
  * @hidden
  */
@@ -38,9 +41,11 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     optionPrefix: string;
     multipleSelection: boolean;
     virtual: VirtualizationSettings;
-    listClass: string;
+    type: ListType;
     checkboxes: MultiSelectCheckableSettings;
     data: any[];
+    size: DropDownSize;
+    rounded: DropDownRounded;
     onClick: EventEmitter<any>;
     pageChange: EventEmitter<PageChangeEvent>;
     listResize: EventEmitter<boolean>;
@@ -52,13 +57,26 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     startFrom: number;
     lastLoaded: number;
     lastScrollTop: number;
+    listContentClass: string;
+    listClass: string;
+    listItemClass: string;
+    listVirtualClass: string;
+    listGroupStickyHeaderClass: string;
+    listGroupStickyHeaderTextClass: string;
+    listGroupItemClass: string;
+    listGroupItemTextClass: string;
     private scrollToFocused;
     private _data;
     private scrollSubscription;
     private selectSubscription;
+    private _size;
     readonly pageSize: number;
     readonly scrollHeight: number;
     readonly overflowY: string;
+    /**
+     * @hidden
+     */
+    readonly checkboxClasses: any;
     constructor(dataService: DataService, wrapper: ElementRef<HTMLElement>, selectionService: SelectionService, disabledItemsService: DisabledItemsService, cdr: ChangeDetectorRef, zone: NgZone, renderer: Renderer2);
     ngOnChanges(changes: {
         [propertyName: string]: SimpleChange;
@@ -67,6 +85,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     onCheckedChange(e: Event, index: number): void;
+    prepareClasses(): void;
     isChecked(index: number): boolean;
     firstVisibleItem(): any;
     findCurrentGroup(): void;
@@ -76,6 +95,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     getText(dataItem: any): any;
     getValue(dataItem: any): any;
     isDisabled(index: number): boolean;
+    isAltRow(index: number): boolean;
     scrollToItem(index: number): void;
     scrollToIndex(index: number): void;
     scroll(item: ElementRef<HTMLElement>): void;
@@ -96,4 +116,5 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
      * Indicates whether the first group header from the data set is in the targeted virtual page.
      */
     private firstGroupHeaderInTargetedPage;
+    private setComponentClasses;
 }