@progress/kendo-angular-dropdowns 17.1.1-develop.1 → 17.1.1-develop.10

package/comboboxes/combobox.module.d.ts

@@ -38,6 +38,6 @@ import * as i14 from "./combobox-column/column-cell-template.directive";
  */
 export declare class ComboBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ComboBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ComboBoxModule, never, [typeof i1.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i11.MultiColumnComboBoxComponent, typeof i12.ComboBoxColumnComponent, typeof i13.ColumnHeaderTemplateDirective, typeof i14.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent], [typeof i1.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i11.MultiColumnComboBoxComponent, typeof i12.ComboBoxColumnComponent, typeof i13.ColumnHeaderTemplateDirective, typeof i14.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ComboBoxModule, never, [typeof i1.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i11.MultiColumnComboBoxComponent, typeof i12.ComboBoxColumnComponent, typeof i13.ColumnHeaderTemplateDirective, typeof i14.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective], [typeof i1.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i11.MultiColumnComboBoxComponent, typeof i12.ComboBoxColumnComponent, typeof i13.ColumnHeaderTemplateDirective, typeof i14.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ComboBoxModule>;
 }

package/comboboxes/multicolumncombobox.component.d.ts

@@ -38,11 +38,34 @@ export declare class MultiColumnComboBoxComponent extends ComboBoxComponent impl
      * @hidden
      */
     set header(header: ElementRef<HTMLElement>);
+    /**
+     * @hidden
+     */
+    set headerTable(headerTable: ElementRef<HTMLElement>);
+    get headerTable(): ElementRef<HTMLElement>;
+    /**
+     * @hidden
+     */
+    set headerColumns(columns: QueryList<ElementRef>);
+    /**
+     * @hidden
+     */
+    rowWidth: number;
+    /**
+     * @hidden
+     */
+    headerColumnWidths: number[];
+    /**
+     * @hidden
+     */
+    totalColumnsWidth: number;
     protected get popupWidth(): {
         min: string;
         max: string;
     };
+    private _headerTable;
     private removeWindowResizeListener;
+    private columnsChangeSubscription;
     /**
      * @hidden
      */
@@ -66,9 +89,15 @@ export declare class MultiColumnComboBoxComponent extends ComboBoxComponent impl
      * When the container has a scrollbar, the padding style is added, and when there is none - it is removed.
      */
     updateHeaderPadding(header: HTMLElement): void;
+    /**
+     *
+     * @hidden
+     */
+    getColumnWidth(index: any): number;
     protected verifySettings(): void;
     private addWindowResizeListener;
     private updateColumnsMediaState;
+    private calculateRowWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiColumnComboBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MultiColumnComboBoxComponent, "kendo-multicolumncombobox", never, {}, {}, ["columns"], never, true, never>;
 }

package/common/list.component.d.ts

@@ -49,6 +49,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     isMultiselect: boolean;
     isActionSheetExpanded: boolean;
     showStickyHeader: boolean;
+    rowWidth: number;
     set data(data: any[]);
     get data(): any[];
     set size(size: DropDownSize);
@@ -130,5 +131,5 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     private firstGroupHeaderInTargetedPage;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": { "alias": "selected"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "height": { "alias": "height"; "required": false; }; "template": { "alias": "template"; "required": false; }; "groupTemplate": { "alias": "groupTemplate"; "required": false; }; "fixedGroupTemplate": { "alias": "fixedGroupTemplate"; "required": false; }; "show": { "alias": "show"; "required": false; }; "id": { "alias": "id"; "required": false; }; "optionPrefix": { "alias": "optionPrefix"; "required": false; }; "multipleSelection": { "alias": "multipleSelection"; "required": false; }; "virtual": { "alias": "virtual"; "required": false; }; "type": { "alias": "type"; "required": false; }; "checkboxes": { "alias": "checkboxes"; "required": false; }; "ariaLive": { "alias": "ariaLive"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "isActionSheetExpanded": { "alias": "isActionSheetExpanded"; "required": false; }; "showStickyHeader": { "alias": "showStickyHeader"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; "popupListScroll": "popupListScroll"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": { "alias": "selected"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "height": { "alias": "height"; "required": false; }; "template": { "alias": "template"; "required": false; }; "groupTemplate": { "alias": "groupTemplate"; "required": false; }; "fixedGroupTemplate": { "alias": "fixedGroupTemplate"; "required": false; }; "show": { "alias": "show"; "required": false; }; "id": { "alias": "id"; "required": false; }; "optionPrefix": { "alias": "optionPrefix"; "required": false; }; "multipleSelection": { "alias": "multipleSelection"; "required": false; }; "virtual": { "alias": "virtual"; "required": false; }; "type": { "alias": "type"; "required": false; }; "checkboxes": { "alias": "checkboxes"; "required": false; }; "ariaLive": { "alias": "ariaLive"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "isActionSheetExpanded": { "alias": "isActionSheetExpanded"; "required": false; }; "showStickyHeader": { "alias": "showStickyHeader"; "required": false; }; "rowWidth": { "alias": "rowWidth"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; "popupListScroll": "popupListScroll"; }, never, never, true, never>;
 }

package/directives.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { PrefixTemplateDirective, SuffixTemplateDirective, SeparatorComponent } from "@progress/kendo-angular-common";
+import { PrefixTemplateDirective, SuffixTemplateDirective, SeparatorComponent, ToggleButtonTabStopDirective } from "@progress/kendo-angular-common";
 import { AutoCompleteComponent } from "./autocomplete/autocomplete.component";
 import { FilterDirective } from "./common/filtering/filter.directive";
 import { CustomMessagesComponent } from "./common/localization/custom-messages.component";
@@ -40,11 +40,11 @@ export declare const KENDO_AUTOCOMPLETE: readonly [typeof AutoCompleteComponent,
 /**
  * Utility array that contains all `ComboBox` related components and directives
  */
-export declare const KENDO_COMBOBOX: readonly [typeof ComboBoxComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent];
+export declare const KENDO_COMBOBOX: readonly [typeof ComboBoxComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof ToggleButtonTabStopDirective];
 /**
  * Utility array that contains all `MultiColumnComboBox` related components and directives
  */
-export declare const KENDO_MULTICOLUMNCOMBOBOX: readonly [typeof MultiColumnComboBoxComponent, typeof ComboBoxColumnComponent, typeof ColumnHeaderTemplateDirective, typeof ColumnCellTemplateDirective, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent];
+export declare const KENDO_MULTICOLUMNCOMBOBOX: readonly [typeof MultiColumnComboBoxComponent, typeof ComboBoxColumnComponent, typeof ColumnHeaderTemplateDirective, typeof ColumnCellTemplateDirective, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof ToggleButtonTabStopDirective];
 /**
  * Utility array that contains all `DropDownList` related components and directives
  */
@@ -64,4 +64,4 @@ export declare const KENDO_MULTISELECTTREE: readonly [typeof MultiSelectTreeComp
 /**
  * Utility array that contains all `@progress/kendo-angular-dropdowns` related components and directives
  */
-export declare const KENDO_DROPDOWNS: readonly [typeof AutoCompleteComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof ComboBoxComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof MultiColumnComboBoxComponent, typeof ComboBoxColumnComponent, typeof ColumnHeaderTemplateDirective, typeof ColumnCellTemplateDirective, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof DropDownListComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof ValueTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof MultiSelectComponent, typeof SummaryTagDirective, typeof CustomItemTemplateDirective, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof GroupTagTemplateDirective, typeof TagTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof DropDownTreeComponent, typeof DropDownTreeFlatBindingDirective, typeof DropDownTreeHierarchyBindingDirective, typeof DropDownTreesExpandDirective, typeof NodeTemplateDirective, typeof HeaderTemplateDirective, typeof FooterTemplateDirective, typeof ValueTemplateDirective, typeof NoDataTemplateDirective, typeof CustomMessagesComponent, typeof MultiSelectTreeComponent, typeof MultiSelectTreeFlatBindingDirective, typeof MultiSelectTreeHierarchyBindingDirective, typeof DropDownTreesExpandDirective, typeof NodeTemplateDirective, typeof MultiSelectTreeSummaryTagDirective, typeof GroupTagTemplateDirective, typeof TagTemplateDirective, typeof HeaderTemplateDirective, typeof FooterTemplateDirective, typeof ValueTemplateDirective, typeof NoDataTemplateDirective, typeof CustomMessagesComponent];
+export declare const KENDO_DROPDOWNS: readonly [typeof AutoCompleteComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof ComboBoxComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof ToggleButtonTabStopDirective, typeof MultiColumnComboBoxComponent, typeof ComboBoxColumnComponent, typeof ColumnHeaderTemplateDirective, typeof ColumnCellTemplateDirective, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof ToggleButtonTabStopDirective, typeof DropDownListComponent, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof ValueTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof MultiSelectComponent, typeof SummaryTagDirective, typeof CustomItemTemplateDirective, typeof FixedGroupTemplateDirective, typeof FooterTemplateDirective, typeof GroupTemplateDirective, typeof GroupTagTemplateDirective, typeof TagTemplateDirective, typeof HeaderTemplateDirective, typeof ItemTemplateDirective, typeof NoDataTemplateDirective, typeof FilterDirective, typeof CustomMessagesComponent, typeof SuffixTemplateDirective, typeof PrefixTemplateDirective, typeof SeparatorComponent, typeof DropDownTreeComponent, typeof DropDownTreeFlatBindingDirective, typeof DropDownTreeHierarchyBindingDirective, typeof DropDownTreesExpandDirective, typeof NodeTemplateDirective, typeof HeaderTemplateDirective, typeof FooterTemplateDirective, typeof ValueTemplateDirective, typeof NoDataTemplateDirective, typeof CustomMessagesComponent, typeof MultiSelectTreeComponent, typeof MultiSelectTreeFlatBindingDirective, typeof MultiSelectTreeHierarchyBindingDirective, typeof DropDownTreesExpandDirective, typeof NodeTemplateDirective, typeof MultiSelectTreeSummaryTagDirective, typeof GroupTagTemplateDirective, typeof TagTemplateDirective, typeof HeaderTemplateDirective, typeof FooterTemplateDirective, typeof ValueTemplateDirective, typeof NoDataTemplateDirective, typeof CustomMessagesComponent];

package/dropdowns.module.d.ts

@@ -67,6 +67,6 @@ import * as i31 from "./dropdowntrees/summary-tag/summary-tag.directive";
  */
 export declare class DropDownsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DropDownsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DropDownsModule, never, [typeof i1.AutoCompleteComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i11.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i12.MultiColumnComboBoxComponent, typeof i13.ComboBoxColumnComponent, typeof i14.ColumnHeaderTemplateDirective, typeof i15.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i16.DropDownListComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i18.MultiSelectComponent, typeof i19.SummaryTagDirective, typeof i20.CustomItemTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i23.DropDownTreeComponent, typeof i24.DropDownTreeFlatBindingDirective, typeof i25.DropDownTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i28.MultiSelectTreeComponent, typeof i29.MultiSelectTreeFlatBindingDirective, typeof i30.MultiSelectTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i31.MultiSelectTreeSummaryTagDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent], [typeof i1.AutoCompleteComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i11.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i12.MultiColumnComboBoxComponent, typeof i13.ComboBoxColumnComponent, typeof i14.ColumnHeaderTemplateDirective, typeof i15.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i16.DropDownListComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i18.MultiSelectComponent, typeof i19.SummaryTagDirective, typeof i20.CustomItemTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i23.DropDownTreeComponent, typeof i24.DropDownTreeFlatBindingDirective, typeof i25.DropDownTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i28.MultiSelectTreeComponent, typeof i29.MultiSelectTreeFlatBindingDirective, typeof i30.MultiSelectTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i31.MultiSelectTreeSummaryTagDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DropDownsModule, never, [typeof i1.AutoCompleteComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i11.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i12.MultiColumnComboBoxComponent, typeof i13.ComboBoxColumnComponent, typeof i14.ColumnHeaderTemplateDirective, typeof i15.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i16.DropDownListComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i18.MultiSelectComponent, typeof i19.SummaryTagDirective, typeof i20.CustomItemTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i23.DropDownTreeComponent, typeof i24.DropDownTreeFlatBindingDirective, typeof i25.DropDownTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i28.MultiSelectTreeComponent, typeof i29.MultiSelectTreeFlatBindingDirective, typeof i30.MultiSelectTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i31.MultiSelectTreeSummaryTagDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective], [typeof i1.AutoCompleteComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i11.ComboBoxComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i12.MultiColumnComboBoxComponent, typeof i13.ComboBoxColumnComponent, typeof i14.ColumnHeaderTemplateDirective, typeof i15.ColumnCellTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective, typeof i16.DropDownListComponent, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i18.MultiSelectComponent, typeof i19.SummaryTagDirective, typeof i20.CustomItemTemplateDirective, typeof i2.FixedGroupTemplateDirective, typeof i3.FooterTemplateDirective, typeof i4.GroupTemplateDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i6.ItemTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i8.FilterDirective, typeof i9.CustomMessagesComponent, typeof i10.SuffixTemplateDirective, typeof i10.PrefixTemplateDirective, typeof i10.SeparatorComponent, typeof i23.DropDownTreeComponent, typeof i24.DropDownTreeFlatBindingDirective, typeof i25.DropDownTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i28.MultiSelectTreeComponent, typeof i29.MultiSelectTreeFlatBindingDirective, typeof i30.MultiSelectTreeHierarchyBindingDirective, typeof i26.DropDownTreesExpandDirective, typeof i27.NodeTemplateDirective, typeof i31.MultiSelectTreeSummaryTagDirective, typeof i21.GroupTagTemplateDirective, typeof i22.TagTemplateDirective, typeof i5.HeaderTemplateDirective, typeof i3.FooterTemplateDirective, typeof i17.ValueTemplateDirective, typeof i7.NoDataTemplateDirective, typeof i9.CustomMessagesComponent, typeof i10.PrefixTemplateDirective, typeof i10.SuffixTemplateDirective, typeof i10.SeparatorComponent, typeof i10.ToggleButtonTabStopDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DropDownsModule>;
 }

package/esm2022/autocomplete/autocomplete.component.mjs

@@ -1066,13 +1066,14 @@ export class AutoCompleteComponent {
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
+        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';
         this.popupRef = this.popupService.open({
             anchor: this.wrapper,
             animate: this.popupSettings.animate,
             appendTo: this.appendTo,
             content: this.popupTemplate,
             popupClass: this.listContainerClasses,
-            positionMode: 'absolute',
+            positionMode: appendToComponent ? 'fixed' : 'absolute',
             popupAlign: popupPosition,
             anchorAlign: anchorPosition
         });
@@ -1339,7 +1340,7 @@ export class AutoCompleteComponent {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,

package/esm2022/comboboxes/combobox.component.mjs

@@ -1470,13 +1470,14 @@ export class ComboBoxComponent extends MultiTabStop {
         const horizontalAlign = this.direction === "rtl" ? "right" : "left";
         const anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
         const popupPosition = { horizontal: horizontalAlign, vertical: "top" };
+        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';
         this.popupRef = this.popupService.open({
             anchor: this.wrapper,
             animate: this.popupSettings.animate,
             appendTo: this.appendTo,
             content: this.popupTemplate,
             popupClass: this.listContainerClasses,
-            positionMode: 'absolute',
+            positionMode: appendToComponent ? 'fixed' : 'absolute',
             anchorAlign: anchorPosition,
             popupAlign: popupPosition
         });
@@ -1777,7 +1778,7 @@ export class ComboBoxComponent extends MultiTabStop {
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,

package/esm2022/comboboxes/combobox.module.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
 import { KENDO_COMBOBOX, KENDO_MULTICOLUMNCOMBOBOX } from '../directives';
-import { KENDO_ADORNMENTS, ResizeBatchService } from '@progress/kendo-angular-common';
+import { KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP, ResizeBatchService } from '@progress/kendo-angular-common';
 import { IconsService } from '@progress/kendo-angular-icons';
 import { PopupService } from '@progress/kendo-angular-popup';
 import * as i0 from "@angular/core";
@@ -44,7 +44,7 @@ import * as i14 from "./combobox-column/column-cell-template.directive";
  */
 export class ComboBoxModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxModule, imports: [i1.ComboBoxComponent, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i11.MultiColumnComboBoxComponent, i12.ComboBoxColumnComponent, i13.ColumnHeaderTemplateDirective, i14.ColumnCellTemplateDirective, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [i1.ComboBoxComponent, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i11.MultiColumnComboBoxComponent, i12.ComboBoxColumnComponent, i13.ColumnHeaderTemplateDirective, i14.ColumnCellTemplateDirective, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxModule, imports: [i1.ComboBoxComponent, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i11.MultiColumnComboBoxComponent, i12.ComboBoxColumnComponent, i13.ColumnHeaderTemplateDirective, i14.ColumnCellTemplateDirective, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [i1.ComboBoxComponent, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i11.MultiColumnComboBoxComponent, i12.ComboBoxColumnComponent, i13.ColumnHeaderTemplateDirective, i14.ColumnCellTemplateDirective, i2.FixedGroupTemplateDirective, i3.FooterTemplateDirective, i4.GroupTemplateDirective, i5.HeaderTemplateDirective, i6.ItemTemplateDirective, i7.NoDataTemplateDirective, i8.FilterDirective, i9.CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxModule, providers: [
             PopupService,
             ResizeBatchService,
@@ -54,8 +54,8 @@ export class ComboBoxModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...KENDO_COMBOBOX, ...KENDO_MULTICOLUMNCOMBOBOX, ...KENDO_ADORNMENTS],
-                    exports: [...KENDO_COMBOBOX, ...KENDO_MULTICOLUMNCOMBOBOX, ...KENDO_ADORNMENTS],
+                    imports: [...KENDO_COMBOBOX, ...KENDO_MULTICOLUMNCOMBOBOX, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
+                    exports: [...KENDO_COMBOBOX, ...KENDO_MULTICOLUMNCOMBOBOX, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
                     providers: [
                         PopupService,
                         ResizeBatchService,

package/esm2022/comboboxes/multicolumncombobox.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, Component, ContentChildren, ElementRef, forwardRef, HostBinding, Injector, isDevMode, NgZone, QueryList, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChildren, ElementRef, forwardRef, HostBinding, Injector, isDevMode, NgZone, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { EventsOutsideAngularDirective, isDocumentAvailable, KendoInput, MultiTabStop, ResizeSensorComponent, SeparatorComponent, TemplateContextDirective } from '@progress/kendo-angular-common';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -24,6 +24,7 @@ import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common
 import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
 import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
@@ -61,6 +62,36 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         // updates the header padding on initial render as the resize senzor doesn't kick in as early
         this.updateHeaderPadding(header && header.nativeElement);
     }
+    /**
+     * @hidden
+     */
+    set headerTable(headerTable) {
+        this._headerTable = headerTable;
+        if (this.headerTable) {
+            this.rowWidth = this.calculateRowWidth();
+        }
+    }
+    get headerTable() {
+        return this._headerTable;
+    }
+    /**
+     * @hidden
+     */
+    set headerColumns(columns) {
+        this.headerColumnWidths = columns.map(column => column.nativeElement.offsetWidth);
+    }
+    /**
+     * @hidden
+     */
+    rowWidth;
+    /**
+     * @hidden
+     */
+    headerColumnWidths = [];
+    /**
+     * @hidden
+     */
+    totalColumnsWidth;
     get popupWidth() {
         const wrapperOffsetWidth = this.wrapper.nativeElement.offsetWidth;
         const min = `${wrapperOffsetWidth}px`;
@@ -68,7 +99,9 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         const max = isNaN(width) ? width : `${width}px`;
         return { min, max };
     }
+    _headerTable;
     removeWindowResizeListener = noop;
+    columnsChangeSubscription = new Subscription();
     /**
      * @hidden
      */
@@ -93,6 +126,12 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
         this.updateColumnsMediaState();
         this.addWindowResizeListener();
         this.windowSize = windowSize();
+        this.rowWidth = this.calculateRowWidth();
+        this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
+        this.columnsChangeSubscription = this.columns.changes.subscribe(() => {
+            this.rowWidth = this.calculateRowWidth();
+            this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
+        });
         this.cdr.detectChanges();
         if (this.actionSheet && isDocumentAvailable()) {
             // The following syntax is used as it does not violate CSP compliance
@@ -103,6 +142,9 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.removeWindowResizeListener();
+        if (this.columnsChangeSubscription) {
+            this.columnsChangeSubscription.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -130,6 +172,20 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
             this.renderer.removeStyle(header, headerPaddingPosition);
         }
     }
+    /**
+     *
+     * @hidden
+     */
+    getColumnWidth(index) {
+        const popupWidthNumber = +(this.popupWidth.max.slice(0, -2));
+        if (this.totalColumnsWidth >= popupWidthNumber) {
+            return this.columns.get(index).width;
+        }
+        if (this.virtual && isPresent(this.headerColumnWidths[index])) {
+            return this.headerColumnWidths[index];
+        }
+        return this.columns.get(index).width;
+    }
     verifySettings() {
         if (!isDevMode()) {
             return;
@@ -164,6 +220,12 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
             }
         });
     }
+    calculateRowWidth() {
+        if (this.isActionSheetExpanded || !this.virtual) {
+            return;
+        }
+        return this.headerTable?.nativeElement.offsetWidth;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiColumnComboBoxComponent, isStandalone: true, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
             SelectionService,
@@ -192,7 +254,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 provide: MultiTabStop,
                 useExisting: forwardRef(() => MultiColumnComboBoxComponent),
             },
-        ], queries: [{ propertyName: "columns", predicate: ComboBoxColumnComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "columns", predicate: ComboBoxColumnComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "headerColumns", predicate: ["columnHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container
             kendoMultiColumnComboBoxLocalizedMessages
             i18n-noDataText="
@@ -325,7 +387,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 <!--grid header-->
                 <div #header class="k-table-header">
                     <div #headerWrap class="k-table-header-wrap">
-                        <table class="k-table" role="presentation">
+                        <table #headerTable class="k-table" role="presentation">
                             <colgroup>
                                 <ng-container *ngFor="let column of columns">
                                     <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
@@ -335,6 +397,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                                 <tr class="k-table-row">
                                     <ng-container *ngFor="let column of columns">
                                         <th
+                                            #columnHeader
                                             *ngIf="!column.hidden && column.matchesMedia"
                                             class="k-table-th"
                                             [ngStyle]="column.headerStyle"
@@ -361,12 +424,13 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 </div>
                 <!-- item template -->
                 <ng-template #rowTemplate let-dataItem>
-                    <ng-container *ngFor="let column of columns">
+                    <ng-container *ngFor="let column of columns; let i = index">
                         <span
                             *ngIf="!column.hidden && column.matchesMedia"
                             class="k-table-td"
                             [ngClass]="column.class"
-                            [style.width.px]="column.width"
+                            [style.width.px]="getColumnWidth(i)"
+                            [style.max-width.px]="getColumnWidth(i)"
                             [ngStyle]="column.style"
                         >
                             <ng-container *ngIf="!column.cellTemplate">
@@ -399,6 +463,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                     [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
+                    [rowWidth]="rowWidth"
                     [showStickyHeader]="showStickyHeader"
                     (pageChange)="pageChange($event)"
                     (listResize)="updateHeaderPadding(header)"
@@ -441,7 +506,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
@@ -608,7 +673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <!--grid header-->
                 <div #header class="k-table-header">
                     <div #headerWrap class="k-table-header-wrap">
-                        <table class="k-table" role="presentation">
+                        <table #headerTable class="k-table" role="presentation">
                             <colgroup>
                                 <ng-container *ngFor="let column of columns">
                                     <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
@@ -618,6 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 <tr class="k-table-row">
                                     <ng-container *ngFor="let column of columns">
                                         <th
+                                            #columnHeader
                                             *ngIf="!column.hidden && column.matchesMedia"
                                             class="k-table-th"
                                             [ngStyle]="column.headerStyle"
@@ -644,12 +710,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </div>
                 <!-- item template -->
                 <ng-template #rowTemplate let-dataItem>
-                    <ng-container *ngFor="let column of columns">
+                    <ng-container *ngFor="let column of columns; let i = index">
                         <span
                             *ngIf="!column.hidden && column.matchesMedia"
                             class="k-table-td"
                             [ngClass]="column.class"
-                            [style.width.px]="column.width"
+                            [style.width.px]="getColumnWidth(i)"
+                            [style.max-width.px]="getColumnWidth(i)"
                             [ngStyle]="column.style"
                         >
                             <ng-container *ngIf="!column.cellTemplate">
@@ -682,6 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [id]="listBoxId"
                     [virtual]="virtual"
                     [type]="'dropdowngrid'"
+                    [rowWidth]="rowWidth"
                     [showStickyHeader]="showStickyHeader"
                     (pageChange)="pageChange($event)"
                     (listResize)="updateHeaderPadding(header)"
@@ -740,4 +808,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], header: [{
                 type: ViewChild,
                 args: ['header', { static: false }]
+            }], headerTable: [{
+                type: ViewChild,
+                args: ['headerTable', { static: false }]
+            }], headerColumns: [{
+                type: ViewChildren,
+                args: ['columnHeader']
             }] } });

package/esm2022/common/list.component.mjs

@@ -51,6 +51,7 @@ export class ListComponent {
     isMultiselect;
     isActionSheetExpanded;
     showStickyHeader;
+    rowWidth;
     set data(data) {
         this._data = data[0] && data[0].header ? data.slice(0) : data;
     }
@@ -439,7 +440,7 @@ export class ListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="dataService.grouped && showStickyHeader"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
@@ -484,6 +485,7 @@ export class ListComponent {
                     'k-disabled': isDisabled(itemIndex),
                     'k-table-alt-row': isAltRow(itemIndex)
                 }"
+                [style.width.px]="rowWidth ?? null"
             >
                 <input
                     *ngIf="checkboxes.enabled"
@@ -518,7 +520,8 @@ export class ListComponent {
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + itemIndex"
-                [attr.tabIndex]="-1">
+                [attr.tabIndex]="-1"
+                [style.width.px]="rowWidth ?? null">
                     <span [class]="listGroupItemTextClass">
                         <ng-template *ngIf="groupTemplate"
                             [templateContext]="{
@@ -546,6 +549,7 @@ export class ListComponent {
                     'k-disabled': isDisabled(dataItem.offsetIndex),
                     'k-table-alt-row': isAltRow(itemIndex - 1)
                 }"
+                [style.width.px]="rowWidth ?? null"
             >
                 <ng-template *ngIf="template"
                     [templateContext]="{
@@ -619,6 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     'k-disabled': isDisabled(itemIndex),
                     'k-table-alt-row': isAltRow(itemIndex)
                 }"
+                [style.width.px]="rowWidth ?? null"
             >
                 <input
                     *ngIf="checkboxes.enabled"
@@ -653,7 +658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
                 [attr.id]="optionPrefix + '-' + itemIndex"
-                [attr.tabIndex]="-1">
+                [attr.tabIndex]="-1"
+                [style.width.px]="rowWidth ?? null">
                     <span [class]="listGroupItemTextClass">
                         <ng-template *ngIf="groupTemplate"
                             [templateContext]="{
@@ -681,6 +687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     'k-disabled': isDisabled(dataItem.offsetIndex),
                     'k-table-alt-row': isAltRow(itemIndex - 1)
                 }"
+                [style.width.px]="rowWidth ?? null"
             >
                 <ng-template *ngIf="template"
                     [templateContext]="{
@@ -745,6 +752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showStickyHeader: [{
                 type: Input
+            }], rowWidth: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{