@progress/kendo-angular-dropdowns 17.1.1-develop.3 → 17.1.1-develop.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/comboboxes/multicolumncombobox.component.d.ts +29 -0
  2. package/common/list.component.d.ts +2 -1
  3. package/esm2022/autocomplete/autocomplete.component.mjs +1 -1
  4. package/esm2022/comboboxes/combobox.component.mjs +1 -1
  5. package/esm2022/comboboxes/multicolumncombobox.component.mjs +83 -9
  6. package/esm2022/common/list.component.mjs +12 -3
  7. package/esm2022/dropdownlist/dropdownlist.component.mjs +1 -1
  8. package/esm2022/multiselect/multiselect.component.mjs +1 -1
  9. package/esm2022/package-metadata.mjs +2 -2
  10. package/fesm2022/progress-kendo-angular-dropdowns.mjs +99 -17
  11. package/package.json +8 -8
  12. package/schematics/ngAdd/index.js +2 -2
package/comboboxes/multicolumncombobox.component.d.ts CHANGED
@@ -38,11 +38,34 @@ export declare class MultiColumnComboBoxComponent extends ComboBoxComponent impl
38
38
  * @hidden
39
39
  */
40
40
  set header(header: ElementRef<HTMLElement>);
41
+ /**
42
+ * @hidden
43
+ */
44
+ set headerTable(headerTable: ElementRef<HTMLElement>);
45
+ get headerTable(): ElementRef<HTMLElement>;
46
+ /**
47
+ * @hidden
48
+ */
49
+ set headerColumns(columns: QueryList<ElementRef>);
50
+ /**
51
+ * @hidden
52
+ */
53
+ rowWidth: number;
54
+ /**
55
+ * @hidden
56
+ */
57
+ headerColumnWidths: number[];
58
+ /**
59
+ * @hidden
60
+ */
61
+ totalColumnsWidth: number;
41
62
  protected get popupWidth(): {
42
63
  min: string;
43
64
  max: string;
44
65
  };
66
+ private _headerTable;
45
67
  private removeWindowResizeListener;
68
+ private columnsChangeSubscription;
46
69
  /**
47
70
  * @hidden
48
71
  */
@@ -66,9 +89,15 @@ export declare class MultiColumnComboBoxComponent extends ComboBoxComponent impl
66
89
  * When the container has a scrollbar, the padding style is added, and when there is none - it is removed.
67
90
  */
68
91
  updateHeaderPadding(header: HTMLElement): void;
92
+ /**
93
+ *
94
+ * @hidden
95
+ */
96
+ getColumnWidth(index: any): number;
69
97
  protected verifySettings(): void;
70
98
  private addWindowResizeListener;
71
99
  private updateColumnsMediaState;
100
+ private calculateRowWidth;
72
101
  static ɵfac: i0.ɵɵFactoryDeclaration<MultiColumnComboBoxComponent, never>;
73
102
  static ɵcmp: i0.ɵɵComponentDeclaration<MultiColumnComboBoxComponent, "kendo-multicolumncombobox", never, {}, {}, ["columns"], never, true, never>;
74
103
  }
package/common/list.component.d.ts CHANGED
@@ -49,6 +49,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
49
49
  isMultiselect: boolean;
50
50
  isActionSheetExpanded: boolean;
51
51
  showStickyHeader: boolean;
52
+ rowWidth: number;
52
53
  set data(data: any[]);
53
54
  get data(): any[];
54
55
  set size(size: DropDownSize);
@@ -130,5 +131,5 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
130
131
  private firstGroupHeaderInTargetedPage;
131
132
  private setComponentClasses;
132
133
  static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
133
- 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>;
134
+ 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>;
134
135
  }
package/esm2022/autocomplete/autocomplete.component.mjs CHANGED
@@ -1339,7 +1339,7 @@ export class AutoCompleteComponent {
1339
1339
  }">
1340
1340
  </ng-template>
1341
1341
  </ng-template>
1342
- `, 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"] }] });
1342
+ `, 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"] }] });
1343
1343
  }
1344
1344
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
1345
1345
  type: Component,
package/esm2022/comboboxes/combobox.component.mjs CHANGED
@@ -1777,7 +1777,7 @@ export class ComboBoxComponent extends MultiTabStop {
1777
1777
  }">
1778
1778
  </ng-template>
1779
1779
  </ng-template>
1780
- `, 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"] }] });
1780
+ `, 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"] }] });
1781
1781
  }
1782
1782
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
1783
1783
  type: Component,
package/esm2022/comboboxes/multicolumncombobox.component.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { ChangeDetectorRef, Component, ContentChildren, ElementRef, forwardRef, HostBinding, Injector, isDevMode, NgZone, QueryList, Renderer2, ViewChild } from '@angular/core';
5
+ import { ChangeDetectorRef, Component, ContentChildren, ElementRef, forwardRef, HostBinding, Injector, isDevMode, NgZone, QueryList, Renderer2, ViewChild, ViewChildren } from '@angular/core';
6
6
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
7
7
  import { EventsOutsideAngularDirective, isDocumentAvailable, KendoInput, MultiTabStop, ResizeSensorComponent, SeparatorComponent, TemplateContextDirective } from '@progress/kendo-angular-common';
8
8
  import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -24,6 +24,7 @@ import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common
24
24
  import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
25
25
  import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
26
26
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
27
+ import { Subscription } from 'rxjs';
27
28
  import * as i0 from "@angular/core";
28
29
  import * as i1 from "@progress/kendo-angular-l10n";
29
30
  import * as i2 from "@progress/kendo-angular-popup";
@@ -61,6 +62,36 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
61
62
  // updates the header padding on initial render as the resize senzor doesn't kick in as early
62
63
  this.updateHeaderPadding(header && header.nativeElement);
63
64
  }
65
+ /**
66
+ * @hidden
67
+ */
68
+ set headerTable(headerTable) {
69
+ this._headerTable = headerTable;
70
+ if (this.headerTable) {
71
+ this.rowWidth = this.calculateRowWidth();
72
+ }
73
+ }
74
+ get headerTable() {
75
+ return this._headerTable;
76
+ }
77
+ /**
78
+ * @hidden
79
+ */
80
+ set headerColumns(columns) {
81
+ this.headerColumnWidths = columns.map(column => column.nativeElement.offsetWidth);
82
+ }
83
+ /**
84
+ * @hidden
85
+ */
86
+ rowWidth;
87
+ /**
88
+ * @hidden
89
+ */
90
+ headerColumnWidths = [];
91
+ /**
92
+ * @hidden
93
+ */
94
+ totalColumnsWidth;
64
95
  get popupWidth() {
65
96
  const wrapperOffsetWidth = this.wrapper.nativeElement.offsetWidth;
66
97
  const min = `${wrapperOffsetWidth}px`;
@@ -68,7 +99,9 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
68
99
  const max = isNaN(width) ? width : `${width}px`;
69
100
  return { min, max };
70
101
  }
102
+ _headerTable;
71
103
  removeWindowResizeListener = noop;
104
+ columnsChangeSubscription = new Subscription();
72
105
  /**
73
106
  * @hidden
74
107
  */
@@ -93,6 +126,12 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
93
126
  this.updateColumnsMediaState();
94
127
  this.addWindowResizeListener();
95
128
  this.windowSize = windowSize();
129
+ this.rowWidth = this.calculateRowWidth();
130
+ this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
131
+ this.columnsChangeSubscription = this.columns.changes.subscribe(() => {
132
+ this.rowWidth = this.calculateRowWidth();
133
+ this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
134
+ });
96
135
  this.cdr.detectChanges();
97
136
  if (this.actionSheet && isDocumentAvailable()) {
98
137
  // The following syntax is used as it does not violate CSP compliance
@@ -103,6 +142,9 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
103
142
  ngOnDestroy() {
104
143
  super.ngOnDestroy();
105
144
  this.removeWindowResizeListener();
145
+ if (this.columnsChangeSubscription) {
146
+ this.columnsChangeSubscription.unsubscribe();
147
+ }
106
148
  }
107
149
  /**
108
150
  * @hidden
@@ -130,6 +172,20 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
130
172
  this.renderer.removeStyle(header, headerPaddingPosition);
131
173
  }
132
174
  }
175
+ /**
176
+ *
177
+ * @hidden
178
+ */
179
+ getColumnWidth(index) {
180
+ const popupWidthNumber = +(this.popupWidth.max.slice(0, -2));
181
+ if (this.totalColumnsWidth >= popupWidthNumber) {
182
+ return this.columns.get(index).width;
183
+ }
184
+ if (this.virtual && isPresent(this.headerColumnWidths[index])) {
185
+ return this.headerColumnWidths[index];
186
+ }
187
+ return this.columns.get(index).width;
188
+ }
133
189
  verifySettings() {
134
190
  if (!isDevMode()) {
135
191
  return;
@@ -164,6 +220,12 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
164
220
  }
165
221
  });
166
222
  }
223
+ calculateRowWidth() {
224
+ if (this.isActionSheetExpanded || !this.virtual) {
225
+ return;
226
+ }
227
+ return this.headerTable?.nativeElement.offsetWidth;
228
+ }
167
229
  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 });
168
230
  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: [
169
231
  SelectionService,
@@ -192,7 +254,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
192
254
  provide: MultiTabStop,
193
255
  useExisting: forwardRef(() => MultiColumnComboBoxComponent),
194
256
  },
195
- ], queries: [{ propertyName: "columns", predicate: ComboBoxColumnComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
257
+ ], 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: `
196
258
  <ng-container
197
259
  kendoMultiColumnComboBoxLocalizedMessages
198
260
  i18n-noDataText="
@@ -325,7 +387,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
325
387
  <!--grid header-->
326
388
  <div #header class="k-table-header">
327
389
  <div #headerWrap class="k-table-header-wrap">
328
- <table class="k-table" role="presentation">
390
+ <table #headerTable class="k-table" role="presentation">
329
391
  <colgroup>
330
392
  <ng-container *ngFor="let column of columns">
331
393
  <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
@@ -335,6 +397,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
335
397
  <tr class="k-table-row">
336
398
  <ng-container *ngFor="let column of columns">
337
399
  <th
400
+ #columnHeader
338
401
  *ngIf="!column.hidden && column.matchesMedia"
339
402
  class="k-table-th"
340
403
  [ngStyle]="column.headerStyle"
@@ -361,12 +424,13 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
361
424
  </div>
362
425
  <!-- item template -->
363
426
  <ng-template #rowTemplate let-dataItem>
364
- <ng-container *ngFor="let column of columns">
427
+ <ng-container *ngFor="let column of columns; let i = index">
365
428
  <span
366
429
  *ngIf="!column.hidden && column.matchesMedia"
367
430
  class="k-table-td"
368
431
  [ngClass]="column.class"
369
- [style.width.px]="column.width"
432
+ [style.width.px]="getColumnWidth(i)"
433
+ [style.max-width.px]="getColumnWidth(i)"
370
434
  [ngStyle]="column.style"
371
435
  >
372
436
  <ng-container *ngIf="!column.cellTemplate">
@@ -399,6 +463,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
399
463
  [id]="listBoxId"
400
464
  [virtual]="virtual"
401
465
  [type]="'dropdowngrid'"
466
+ [rowWidth]="rowWidth"
402
467
  [showStickyHeader]="showStickyHeader"
403
468
  (pageChange)="pageChange($event)"
404
469
  (listResize)="updateHeaderPadding(header)"
@@ -441,7 +506,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
441
506
  </ng-container>
442
507
  </div>
443
508
  </ng-template>
444
- `, 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"] }] });
509
+ `, 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"] }] });
445
510
  }
446
511
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
447
512
  type: Component,
@@ -608,7 +673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
608
673
  <!--grid header-->
609
674
  <div #header class="k-table-header">
610
675
  <div #headerWrap class="k-table-header-wrap">
611
- <table class="k-table" role="presentation">
676
+ <table #headerTable class="k-table" role="presentation">
612
677
  <colgroup>
613
678
  <ng-container *ngFor="let column of columns">
614
679
  <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
618
683
  <tr class="k-table-row">
619
684
  <ng-container *ngFor="let column of columns">
620
685
  <th
686
+ #columnHeader
621
687
  *ngIf="!column.hidden && column.matchesMedia"
622
688
  class="k-table-th"
623
689
  [ngStyle]="column.headerStyle"
@@ -644,12 +710,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
644
710
  </div>
645
711
  <!-- item template -->
646
712
  <ng-template #rowTemplate let-dataItem>
647
- <ng-container *ngFor="let column of columns">
713
+ <ng-container *ngFor="let column of columns; let i = index">
648
714
  <span
649
715
  *ngIf="!column.hidden && column.matchesMedia"
650
716
  class="k-table-td"
651
717
  [ngClass]="column.class"
652
- [style.width.px]="column.width"
718
+ [style.width.px]="getColumnWidth(i)"
719
+ [style.max-width.px]="getColumnWidth(i)"
653
720
  [ngStyle]="column.style"
654
721
  >
655
722
  <ng-container *ngIf="!column.cellTemplate">
@@ -682,6 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
682
749
  [id]="listBoxId"
683
750
  [virtual]="virtual"
684
751
  [type]="'dropdowngrid'"
752
+ [rowWidth]="rowWidth"
685
753
  [showStickyHeader]="showStickyHeader"
686
754
  (pageChange)="pageChange($event)"
687
755
  (listResize)="updateHeaderPadding(header)"
@@ -740,4 +808,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
740
808
  }], header: [{
741
809
  type: ViewChild,
742
810
  args: ['header', { static: false }]
811
+ }], headerTable: [{
812
+ type: ViewChild,
813
+ args: ['headerTable', { static: false }]
814
+ }], headerColumns: [{
815
+ type: ViewChildren,
816
+ args: ['columnHeader']
743
817
  }] } });
package/esm2022/common/list.component.mjs CHANGED
@@ -51,6 +51,7 @@ export class ListComponent {
51
51
  isMultiselect;
52
52
  isActionSheetExpanded;
53
53
  showStickyHeader;
54
+ rowWidth;
54
55
  set data(data) {
55
56
  this._data = data[0] && data[0].header ? data.slice(0) : data;
56
57
  }
@@ -439,7 +440,7 @@ export class ListComponent {
439
440
  }
440
441
  }
441
442
  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 });
442
- 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: `
443
+ 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: `
443
444
  <div *ngIf="dataService.grouped && showStickyHeader"
444
445
  [class]="listGroupStickyHeaderClass"
445
446
  [ngStyle]="{
@@ -484,6 +485,7 @@ export class ListComponent {
484
485
  'k-disabled': isDisabled(itemIndex),
485
486
  'k-table-alt-row': isAltRow(itemIndex)
486
487
  }"
488
+ [style.width.px]="rowWidth ?? null"
487
489
  >
488
490
  <input
489
491
  *ngIf="checkboxes.enabled"
@@ -518,7 +520,8 @@ export class ListComponent {
518
520
  'boxSizing' : virtual ? 'border-box' : 'inherit'}"
519
521
  [attr.group-index]="dataItem.index"
520
522
  [attr.id]="optionPrefix + '-' + itemIndex"
521
- [attr.tabIndex]="-1">
523
+ [attr.tabIndex]="-1"
524
+ [style.width.px]="rowWidth ?? null">
522
525
  <span [class]="listGroupItemTextClass">
523
526
  <ng-template *ngIf="groupTemplate"
524
527
  [templateContext]="{
@@ -546,6 +549,7 @@ export class ListComponent {
546
549
  'k-disabled': isDisabled(dataItem.offsetIndex),
547
550
  'k-table-alt-row': isAltRow(itemIndex - 1)
548
551
  }"
552
+ [style.width.px]="rowWidth ?? null"
549
553
  >
550
554
  <ng-template *ngIf="template"
551
555
  [templateContext]="{
@@ -619,6 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
619
623
  'k-disabled': isDisabled(itemIndex),
620
624
  'k-table-alt-row': isAltRow(itemIndex)
621
625
  }"
626
+ [style.width.px]="rowWidth ?? null"
622
627
  >
623
628
  <input
624
629
  *ngIf="checkboxes.enabled"
@@ -653,7 +658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
653
658
  'boxSizing' : virtual ? 'border-box' : 'inherit'}"
654
659
  [attr.group-index]="dataItem.index"
655
660
  [attr.id]="optionPrefix + '-' + itemIndex"
656
- [attr.tabIndex]="-1">
661
+ [attr.tabIndex]="-1"
662
+ [style.width.px]="rowWidth ?? null">
657
663
  <span [class]="listGroupItemTextClass">
658
664
  <ng-template *ngIf="groupTemplate"
659
665
  [templateContext]="{
@@ -681,6 +687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
681
687
  'k-disabled': isDisabled(dataItem.offsetIndex),
682
688
  'k-table-alt-row': isAltRow(itemIndex - 1)
683
689
  }"
690
+ [style.width.px]="rowWidth ?? null"
684
691
  >
685
692
  <ng-template *ngIf="template"
686
693
  [templateContext]="{
@@ -745,6 +752,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
745
752
  type: Input
746
753
  }], showStickyHeader: [{
747
754
  type: Input
755
+ }], rowWidth: [{
756
+ type: Input
748
757
  }], data: [{
749
758
  type: Input
750
759
  }], size: [{
package/esm2022/dropdownlist/dropdownlist.component.mjs CHANGED
@@ -1656,7 +1656,7 @@ export class DropDownListComponent {
1656
1656
  }">
1657
1657
  </ng-template>
1658
1658
  </ng-template>
1659
- `, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
1659
+ `, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
1660
1660
  }
1661
1661
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListComponent, decorators: [{
1662
1662
  type: Component,
package/esm2022/multiselect/multiselect.component.mjs CHANGED
@@ -2023,7 +2023,7 @@ export class MultiSelectComponent {
2023
2023
  }">
2024
2024
  </ng-template>
2025
2025
  </ng-template>
2026
- `, 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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
2026
+ `, 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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
2027
2027
  }
2028
2028
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
2029
2029
  type: Component,
package/esm2022/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-dropdowns',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1733123620,
13
- version: '17.1.1-develop.3',
12
+ publishDate: 1733230602,
13
+ version: '17.1.1-develop.5',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/fesm2022/progress-kendo-angular-dropdowns.mjs CHANGED
@@ -34,8 +34,8 @@ const packageMetadata = {
34
34
  name: '@progress/kendo-angular-dropdowns',
35
35
  productName: 'Kendo UI for Angular',
36
36
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
37
- publishDate: 1733123620,
38
- version: '17.1.1-develop.3',
37
+ publishDate: 1733230602,
38
+ version: '17.1.1-develop.5',
39
39
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
40
40
  };
41
41
 
@@ -1935,6 +1935,7 @@ class ListComponent {
1935
1935
  isMultiselect;
1936
1936
  isActionSheetExpanded;
1937
1937
  showStickyHeader;
1938
+ rowWidth;
1938
1939
  set data(data) {
1939
1940
  this._data = data[0] && data[0].header ? data.slice(0) : data;
1940
1941
  }
@@ -2323,7 +2324,7 @@ class ListComponent {
2323
2324
  }
2324
2325
  }
2325
2326
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
2326
- 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: `
2327
+ 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: `
2327
2328
  <div *ngIf="dataService.grouped && showStickyHeader"
2328
2329
  [class]="listGroupStickyHeaderClass"
2329
2330
  [ngStyle]="{
@@ -2368,6 +2369,7 @@ class ListComponent {
2368
2369
  'k-disabled': isDisabled(itemIndex),
2369
2370
  'k-table-alt-row': isAltRow(itemIndex)
2370
2371
  }"
2372
+ [style.width.px]="rowWidth ?? null"
2371
2373
  >
2372
2374
  <input
2373
2375
  *ngIf="checkboxes.enabled"
@@ -2402,7 +2404,8 @@ class ListComponent {
2402
2404
  'boxSizing' : virtual ? 'border-box' : 'inherit'}"
2403
2405
  [attr.group-index]="dataItem.index"
2404
2406
  [attr.id]="optionPrefix + '-' + itemIndex"
2405
- [attr.tabIndex]="-1">
2407
+ [attr.tabIndex]="-1"
2408
+ [style.width.px]="rowWidth ?? null">
2406
2409
  <span [class]="listGroupItemTextClass">
2407
2410
  <ng-template *ngIf="groupTemplate"
2408
2411
  [templateContext]="{
@@ -2430,6 +2433,7 @@ class ListComponent {
2430
2433
  'k-disabled': isDisabled(dataItem.offsetIndex),
2431
2434
  'k-table-alt-row': isAltRow(itemIndex - 1)
2432
2435
  }"
2436
+ [style.width.px]="rowWidth ?? null"
2433
2437
  >
2434
2438
  <ng-template *ngIf="template"
2435
2439
  [templateContext]="{
@@ -2503,6 +2507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2503
2507
  'k-disabled': isDisabled(itemIndex),
2504
2508
  'k-table-alt-row': isAltRow(itemIndex)
2505
2509
  }"
2510
+ [style.width.px]="rowWidth ?? null"
2506
2511
  >
2507
2512
  <input
2508
2513
  *ngIf="checkboxes.enabled"
@@ -2537,7 +2542,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2537
2542
  'boxSizing' : virtual ? 'border-box' : 'inherit'}"
2538
2543
  [attr.group-index]="dataItem.index"
2539
2544
  [attr.id]="optionPrefix + '-' + itemIndex"
2540
- [attr.tabIndex]="-1">
2545
+ [attr.tabIndex]="-1"
2546
+ [style.width.px]="rowWidth ?? null">
2541
2547
  <span [class]="listGroupItemTextClass">
2542
2548
  <ng-template *ngIf="groupTemplate"
2543
2549
  [templateContext]="{
@@ -2565,6 +2571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2565
2571
  'k-disabled': isDisabled(dataItem.offsetIndex),
2566
2572
  'k-table-alt-row': isAltRow(itemIndex - 1)
2567
2573
  }"
2574
+ [style.width.px]="rowWidth ?? null"
2568
2575
  >
2569
2576
  <ng-template *ngIf="template"
2570
2577
  [templateContext]="{
@@ -2629,6 +2636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
2629
2636
  type: Input
2630
2637
  }], showStickyHeader: [{
2631
2638
  type: Input
2639
+ }], rowWidth: [{
2640
+ type: Input
2632
2641
  }], data: [{
2633
2642
  type: Input
2634
2643
  }], size: [{
@@ -4415,7 +4424,7 @@ class AutoCompleteComponent {
4415
4424
  }">
4416
4425
  </ng-template>
4417
4426
  </ng-template>
4418
- `, 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"] }] });
4427
+ `, 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"] }] });
4419
4428
  }
4420
4429
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
4421
4430
  type: Component,
@@ -6509,7 +6518,7 @@ class ComboBoxComponent extends MultiTabStop {
6509
6518
  }">
6510
6519
  </ng-template>
6511
6520
  </ng-template>
6512
- `, 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"] }] });
6521
+ `, 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"] }] });
6513
6522
  }
6514
6523
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
6515
6524
  type: Component,
@@ -8542,7 +8551,7 @@ class DropDownListComponent {
8542
8551
  }">
8543
8552
  </ng-template>
8544
8553
  </ng-template>
8545
- `, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
8554
+ `, 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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
8546
8555
  }
8547
8556
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownListComponent, decorators: [{
8548
8557
  type: Component,
@@ -11308,7 +11317,7 @@ class MultiSelectComponent {
11308
11317
  }">
11309
11318
  </ng-template>
11310
11319
  </ng-template>
11311
- `, 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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
11320
+ `, 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: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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"] }] });
11312
11321
  }
11313
11322
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
11314
11323
  type: Component,
@@ -11918,6 +11927,36 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
11918
11927
  // updates the header padding on initial render as the resize senzor doesn't kick in as early
11919
11928
  this.updateHeaderPadding(header && header.nativeElement);
11920
11929
  }
11930
+ /**
11931
+ * @hidden
11932
+ */
11933
+ set headerTable(headerTable) {
11934
+ this._headerTable = headerTable;
11935
+ if (this.headerTable) {
11936
+ this.rowWidth = this.calculateRowWidth();
11937
+ }
11938
+ }
11939
+ get headerTable() {
11940
+ return this._headerTable;
11941
+ }
11942
+ /**
11943
+ * @hidden
11944
+ */
11945
+ set headerColumns(columns) {
11946
+ this.headerColumnWidths = columns.map(column => column.nativeElement.offsetWidth);
11947
+ }
11948
+ /**
11949
+ * @hidden
11950
+ */
11951
+ rowWidth;
11952
+ /**
11953
+ * @hidden
11954
+ */
11955
+ headerColumnWidths = [];
11956
+ /**
11957
+ * @hidden
11958
+ */
11959
+ totalColumnsWidth;
11921
11960
  get popupWidth() {
11922
11961
  const wrapperOffsetWidth = this.wrapper.nativeElement.offsetWidth;
11923
11962
  const min = `${wrapperOffsetWidth}px`;
@@ -11925,7 +11964,9 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
11925
11964
  const max = isNaN(width) ? width : `${width}px`;
11926
11965
  return { min, max };
11927
11966
  }
11967
+ _headerTable;
11928
11968
  removeWindowResizeListener = noop;
11969
+ columnsChangeSubscription = new Subscription();
11929
11970
  /**
11930
11971
  * @hidden
11931
11972
  */
@@ -11950,6 +11991,12 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
11950
11991
  this.updateColumnsMediaState();
11951
11992
  this.addWindowResizeListener();
11952
11993
  this.windowSize = windowSize();
11994
+ this.rowWidth = this.calculateRowWidth();
11995
+ this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
11996
+ this.columnsChangeSubscription = this.columns.changes.subscribe(() => {
11997
+ this.rowWidth = this.calculateRowWidth();
11998
+ this.totalColumnsWidth = this.columns.reduce((total, currentColumn) => total + currentColumn.width, 0);
11999
+ });
11953
12000
  this.cdr.detectChanges();
11954
12001
  if (this.actionSheet && isDocumentAvailable()) {
11955
12002
  // The following syntax is used as it does not violate CSP compliance
@@ -11960,6 +12007,9 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
11960
12007
  ngOnDestroy() {
11961
12008
  super.ngOnDestroy();
11962
12009
  this.removeWindowResizeListener();
12010
+ if (this.columnsChangeSubscription) {
12011
+ this.columnsChangeSubscription.unsubscribe();
12012
+ }
11963
12013
  }
11964
12014
  /**
11965
12015
  * @hidden
@@ -11987,6 +12037,20 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
11987
12037
  this.renderer.removeStyle(header, headerPaddingPosition);
11988
12038
  }
11989
12039
  }
12040
+ /**
12041
+ *
12042
+ * @hidden
12043
+ */
12044
+ getColumnWidth(index) {
12045
+ const popupWidthNumber = +(this.popupWidth.max.slice(0, -2));
12046
+ if (this.totalColumnsWidth >= popupWidthNumber) {
12047
+ return this.columns.get(index).width;
12048
+ }
12049
+ if (this.virtual && isPresent(this.headerColumnWidths[index])) {
12050
+ return this.headerColumnWidths[index];
12051
+ }
12052
+ return this.columns.get(index).width;
12053
+ }
11990
12054
  verifySettings() {
11991
12055
  if (!isDevMode()) {
11992
12056
  return;
@@ -12021,6 +12085,12 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12021
12085
  }
12022
12086
  });
12023
12087
  }
12088
+ calculateRowWidth() {
12089
+ if (this.isActionSheetExpanded || !this.virtual) {
12090
+ return;
12091
+ }
12092
+ return this.headerTable?.nativeElement.offsetWidth;
12093
+ }
12024
12094
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
12025
12095
  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: [
12026
12096
  SelectionService,
@@ -12049,7 +12119,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12049
12119
  provide: MultiTabStop,
12050
12120
  useExisting: forwardRef(() => MultiColumnComboBoxComponent),
12051
12121
  },
12052
- ], queries: [{ propertyName: "columns", predicate: ComboBoxColumnComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
12122
+ ], 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: `
12053
12123
  <ng-container
12054
12124
  kendoMultiColumnComboBoxLocalizedMessages
12055
12125
  i18n-noDataText="
@@ -12182,7 +12252,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12182
12252
  <!--grid header-->
12183
12253
  <div #header class="k-table-header">
12184
12254
  <div #headerWrap class="k-table-header-wrap">
12185
- <table class="k-table" role="presentation">
12255
+ <table #headerTable class="k-table" role="presentation">
12186
12256
  <colgroup>
12187
12257
  <ng-container *ngFor="let column of columns">
12188
12258
  <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
@@ -12192,6 +12262,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12192
12262
  <tr class="k-table-row">
12193
12263
  <ng-container *ngFor="let column of columns">
12194
12264
  <th
12265
+ #columnHeader
12195
12266
  *ngIf="!column.hidden && column.matchesMedia"
12196
12267
  class="k-table-th"
12197
12268
  [ngStyle]="column.headerStyle"
@@ -12218,12 +12289,13 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12218
12289
  </div>
12219
12290
  <!-- item template -->
12220
12291
  <ng-template #rowTemplate let-dataItem>
12221
- <ng-container *ngFor="let column of columns">
12292
+ <ng-container *ngFor="let column of columns; let i = index">
12222
12293
  <span
12223
12294
  *ngIf="!column.hidden && column.matchesMedia"
12224
12295
  class="k-table-td"
12225
12296
  [ngClass]="column.class"
12226
- [style.width.px]="column.width"
12297
+ [style.width.px]="getColumnWidth(i)"
12298
+ [style.max-width.px]="getColumnWidth(i)"
12227
12299
  [ngStyle]="column.style"
12228
12300
  >
12229
12301
  <ng-container *ngIf="!column.cellTemplate">
@@ -12256,6 +12328,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12256
12328
  [id]="listBoxId"
12257
12329
  [virtual]="virtual"
12258
12330
  [type]="'dropdowngrid'"
12331
+ [rowWidth]="rowWidth"
12259
12332
  [showStickyHeader]="showStickyHeader"
12260
12333
  (pageChange)="pageChange($event)"
12261
12334
  (listResize)="updateHeaderPadding(header)"
@@ -12298,7 +12371,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12298
12371
  </ng-container>
12299
12372
  </div>
12300
12373
  </ng-template>
12301
- `, 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"] }] });
12374
+ `, 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"] }] });
12302
12375
  }
12303
12376
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
12304
12377
  type: Component,
@@ -12465,7 +12538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12465
12538
  <!--grid header-->
12466
12539
  <div #header class="k-table-header">
12467
12540
  <div #headerWrap class="k-table-header-wrap">
12468
- <table class="k-table" role="presentation">
12541
+ <table #headerTable class="k-table" role="presentation">
12469
12542
  <colgroup>
12470
12543
  <ng-container *ngFor="let column of columns">
12471
12544
  <col *ngIf="!column.hidden && column.matchesMedia" [style.width.px]="column.width" />
@@ -12475,6 +12548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12475
12548
  <tr class="k-table-row">
12476
12549
  <ng-container *ngFor="let column of columns">
12477
12550
  <th
12551
+ #columnHeader
12478
12552
  *ngIf="!column.hidden && column.matchesMedia"
12479
12553
  class="k-table-th"
12480
12554
  [ngStyle]="column.headerStyle"
@@ -12501,12 +12575,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12501
12575
  </div>
12502
12576
  <!-- item template -->
12503
12577
  <ng-template #rowTemplate let-dataItem>
12504
- <ng-container *ngFor="let column of columns">
12578
+ <ng-container *ngFor="let column of columns; let i = index">
12505
12579
  <span
12506
12580
  *ngIf="!column.hidden && column.matchesMedia"
12507
12581
  class="k-table-td"
12508
12582
  [ngClass]="column.class"
12509
- [style.width.px]="column.width"
12583
+ [style.width.px]="getColumnWidth(i)"
12584
+ [style.max-width.px]="getColumnWidth(i)"
12510
12585
  [ngStyle]="column.style"
12511
12586
  >
12512
12587
  <ng-container *ngIf="!column.cellTemplate">
@@ -12539,6 +12614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12539
12614
  [id]="listBoxId"
12540
12615
  [virtual]="virtual"
12541
12616
  [type]="'dropdowngrid'"
12617
+ [rowWidth]="rowWidth"
12542
12618
  [showStickyHeader]="showStickyHeader"
12543
12619
  (pageChange)="pageChange($event)"
12544
12620
  (listResize)="updateHeaderPadding(header)"
@@ -12597,6 +12673,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12597
12673
  }], header: [{
12598
12674
  type: ViewChild,
12599
12675
  args: ['header', { static: false }]
12676
+ }], headerTable: [{
12677
+ type: ViewChild,
12678
+ args: ['headerTable', { static: false }]
12679
+ }], headerColumns: [{
12680
+ type: ViewChildren,
12681
+ args: ['columnHeader']
12600
12682
  }] } });
12601
12683
 
12602
12684
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-dropdowns",
3
- "version": "17.1.1-develop.3",
3
+ "version": "17.1.1-develop.5",
4
4
  "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -25,17 +25,17 @@
25
25
  "@angular/forms": "16 - 19",
26
26
  "@angular/platform-browser": "16 - 19",
27
27
  "@progress/kendo-licensing": "^1.0.2",
28
- "@progress/kendo-angular-common": "17.1.1-develop.3",
29
- "@progress/kendo-angular-l10n": "17.1.1-develop.3",
30
- "@progress/kendo-angular-navigation": "17.1.1-develop.3",
31
- "@progress/kendo-angular-popup": "17.1.1-develop.3",
32
- "@progress/kendo-angular-icons": "17.1.1-develop.3",
33
- "@progress/kendo-angular-treeview": "17.1.1-develop.3",
28
+ "@progress/kendo-angular-common": "17.1.1-develop.5",
29
+ "@progress/kendo-angular-l10n": "17.1.1-develop.5",
30
+ "@progress/kendo-angular-navigation": "17.1.1-develop.5",
31
+ "@progress/kendo-angular-popup": "17.1.1-develop.5",
32
+ "@progress/kendo-angular-icons": "17.1.1-develop.5",
33
+ "@progress/kendo-angular-treeview": "17.1.1-develop.5",
34
34
  "rxjs": "^6.5.3 || ^7.0.0"
35
35
  },
36
36
  "dependencies": {
37
37
  "tslib": "^2.3.1",
38
- "@progress/kendo-angular-schematics": "17.1.1-develop.3",
38
+ "@progress/kendo-angular-schematics": "17.1.1-develop.5",
39
39
  "@progress/kendo-common": "^1.0.1"
40
40
  },
41
41
  "schematics": "./schematics/collection.json",
package/schematics/ngAdd/index.js CHANGED
@@ -4,9 +4,9 @@ const schematics_1 = require("@angular-devkit/schematics");
4
4
  function default_1(options) {
5
5
  const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DropDownsModule', package: 'dropdowns', peerDependencies: {
6
6
  // peers of the treeview
7
- '@progress/kendo-angular-inputs': '17.1.1-develop.3',
7
+ '@progress/kendo-angular-inputs': '17.1.1-develop.5',
8
8
  // peers of inputs
9
- '@progress/kendo-angular-intl': '17.1.1-develop.3',
9
+ '@progress/kendo-angular-intl': '17.1.1-develop.5',
10
10
  '@progress/kendo-drawing': '^1.17.2',
11
11
  // Peer dependency of icons
12
12
  '@progress/kendo-svg-icons': '^4.0.0'