@progress/kendo-angular-dropdowns 21.1.1-develop.2 → 21.2.0-develop.10

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 (32) hide show
  1. package/codemods/utils.js +805 -394
  2. package/codemods/v19/autocomplete-subtitle.js +10 -13
  3. package/codemods/v19/autocomplete-title.js +10 -13
  4. package/codemods/v19/combobox-subtitle.js +10 -13
  5. package/codemods/v19/combobox-title.js +10 -14
  6. package/codemods/v19/dropdownlist-subtitle.js +10 -13
  7. package/codemods/v19/dropdownlist-title.js +10 -14
  8. package/codemods/v19/dropdowntree-subtitle.js +10 -13
  9. package/codemods/v19/dropdowntree-title.js +10 -13
  10. package/codemods/v19/multicolumncombobox-subtitle.js +10 -13
  11. package/codemods/v19/multicolumncombobox-title.js +10 -13
  12. package/codemods/v19/multiselect-subtitle.js +10 -13
  13. package/codemods/v19/multiselect-title.js +10 -13
  14. package/codemods/v19/multiselecttree-subtitle.js +10 -13
  15. package/codemods/v19/multiselecttree-title.js +10 -13
  16. package/esm2022/autocomplete/autocomplete.component.mjs +261 -219
  17. package/esm2022/comboboxes/combobox.component.mjs +298 -256
  18. package/esm2022/comboboxes/multicolumncombobox.component.mjs +429 -383
  19. package/esm2022/common/adaptive-renderer.component.mjs +123 -107
  20. package/esm2022/common/list.component.mjs +295 -217
  21. package/esm2022/common/navigation/navigation.service.mjs +2 -2
  22. package/esm2022/common/searchbar.component.mjs +2 -2
  23. package/esm2022/common/taglist.component.mjs +73 -59
  24. package/esm2022/dropdownlist/dropdownlist.component.mjs +262 -234
  25. package/esm2022/dropdowntrees/dropdowntree.component.mjs +298 -258
  26. package/esm2022/dropdowntrees/multiselecttree.component.mjs +361 -333
  27. package/esm2022/multiselect/multiselect.component.mjs +308 -267
  28. package/esm2022/package-metadata.mjs +2 -2
  29. package/fesm2022/progress-kendo-angular-dropdowns.mjs +2700 -2325
  30. package/package.json +11 -12
  31. package/schematics/ngAdd/index.js +2 -2
  32. package/codemods/template-transformer/index.js +0 -93
@@ -9,7 +9,7 @@ import { IconComponent } from '@progress/kendo-angular-icons';
9
9
  import { checkIcon } from '@progress/kendo-svg-icons';
10
10
  import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
11
11
  import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
12
- import { NgIf, NgTemplateOutlet } from '@angular/common';
12
+ import { NgTemplateOutlet } from '@angular/common';
13
13
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
14
14
  import { AdaptiveService } from '@progress/kendo-angular-utils';
15
15
  import * as i0 from "@angular/core";
@@ -66,11 +66,11 @@ export class AdaptiveRendererComponent {
66
66
  return this.adaptiveService.size;
67
67
  }
68
68
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
69
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
69
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
70
70
  <kendo-actionsheet
71
- #actionSheet
72
- [animation]="{ duration: animationDuration }"
73
- [initialFocus]="false"
71
+ #actionSheet
72
+ [animation]="{ duration: animationDuration }"
73
+ [initialFocus]="false"
74
74
  [cssClass]="{
75
75
  'k-adaptive-actionsheet': true,
76
76
  'k-actionsheet-fullscreen': windowSize === 'small',
@@ -79,58 +79,66 @@ export class AdaptiveRendererComponent {
79
79
  [cssStyle]="{
80
80
  height: windowSize === 'small' ? '100vh' : '60vh'
81
81
  }"
82
- (overlayClick)="onOverlayClick()"
83
- (keydown)="navigate.emit($event)"
84
- (expand)="handleExpand()"
85
- (collapse)="closePopup.emit()"
86
- >
87
- <ng-template kendoActionSheetTemplate>
88
- <div class="k-text-center k-actionsheet-titlebar">
89
- <div class="k-actionsheet-titlebar-group">
90
- <div class="k-actionsheet-title">
91
- <div class="k-text-center" *ngIf="title">{{ title }}</div>
92
- <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
93
- </div>
94
- <div class="k-actionsheet-actions">
95
- <button
96
- kendoButton
97
- icon="check"
98
- type="button"
99
- [attr.title]="messageFor('adaptiveCloseButtonTitle')"
100
- [svgIcon]="checkIcon"
101
- fillMode="flat"
102
- themeColor="primary"
103
- size="large"
104
- [tabIndex]="-1"
105
- innerCssClass="k-button-icon"
106
- (click)="handleClose()"
107
- ></button>
108
- </div>
109
- </div>
110
- <div class="k-actionsheet-titlebar-group k-actionsheet-filter" *ngIf="showTextInput">
111
- <kendo-textbox
112
- #actionSheetSearchBar
113
- [value]="searchBarValue || ''"
114
- size="large"
115
- [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
116
- class="k-searchbox"
117
- autocomplete="off"
118
- (valueChange)="onValueChange($event)"
119
- >
120
- <ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
121
- <kendo-icon name="search"></kendo-icon>
122
- </ng-template>
123
- </kendo-textbox>
124
- </div>
82
+ (overlayClick)="onOverlayClick()"
83
+ (keydown)="navigate.emit($event)"
84
+ (expand)="handleExpand()"
85
+ (collapse)="closePopup.emit()"
86
+ >
87
+ <ng-template kendoActionSheetTemplate>
88
+ <div class="k-text-center k-actionsheet-titlebar">
89
+ <div class="k-actionsheet-titlebar-group">
90
+ <div class="k-actionsheet-title">
91
+ @if (title) {
92
+ <div class="k-text-center">{{ title }}</div>
93
+ }
94
+ @if (subtitle) {
95
+ <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
96
+ }
125
97
  </div>
126
- <div class="k-actionsheet-content">
127
- <div class="k-list-container">
128
- <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
129
- </div>
98
+ <div class="k-actionsheet-actions">
99
+ <button
100
+ kendoButton
101
+ icon="check"
102
+ type="button"
103
+ [attr.title]="messageFor('adaptiveCloseButtonTitle')"
104
+ [svgIcon]="checkIcon"
105
+ fillMode="flat"
106
+ themeColor="primary"
107
+ size="large"
108
+ [tabIndex]="-1"
109
+ innerCssClass="k-button-icon"
110
+ (click)="handleClose()"
111
+ ></button>
130
112
  </div>
131
- </ng-template>
113
+ </div>
114
+ @if (showTextInput) {
115
+ <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
116
+ <kendo-textbox
117
+ #actionSheetSearchBar
118
+ [value]="searchBarValue || ''"
119
+ size="large"
120
+ [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
121
+ class="k-searchbox"
122
+ autocomplete="off"
123
+ (valueChange)="onValueChange($event)"
124
+ >
125
+ @if (filterable) {
126
+ <ng-template kendoTextBoxPrefixTemplate>
127
+ <kendo-icon name="search"></kendo-icon>
128
+ </ng-template>
129
+ }
130
+ </kendo-textbox>
131
+ </div>
132
+ }
133
+ </div>
134
+ <div class="k-actionsheet-content">
135
+ <div class="k-list-container">
136
+ <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
137
+ </div>
138
+ </div>
139
+ </ng-template>
132
140
  </kendo-actionsheet>
133
- `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
141
+ `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
134
142
  }
135
143
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
136
144
  type: Component,
@@ -138,9 +146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
138
146
  selector: 'kendo-adaptive-renderer',
139
147
  template: `
140
148
  <kendo-actionsheet
141
- #actionSheet
142
- [animation]="{ duration: animationDuration }"
143
- [initialFocus]="false"
149
+ #actionSheet
150
+ [animation]="{ duration: animationDuration }"
151
+ [initialFocus]="false"
144
152
  [cssClass]="{
145
153
  'k-adaptive-actionsheet': true,
146
154
  'k-actionsheet-fullscreen': windowSize === 'small',
@@ -149,60 +157,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
149
157
  [cssStyle]="{
150
158
  height: windowSize === 'small' ? '100vh' : '60vh'
151
159
  }"
152
- (overlayClick)="onOverlayClick()"
153
- (keydown)="navigate.emit($event)"
154
- (expand)="handleExpand()"
155
- (collapse)="closePopup.emit()"
156
- >
157
- <ng-template kendoActionSheetTemplate>
158
- <div class="k-text-center k-actionsheet-titlebar">
159
- <div class="k-actionsheet-titlebar-group">
160
- <div class="k-actionsheet-title">
161
- <div class="k-text-center" *ngIf="title">{{ title }}</div>
162
- <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
163
- </div>
164
- <div class="k-actionsheet-actions">
165
- <button
166
- kendoButton
167
- icon="check"
168
- type="button"
169
- [attr.title]="messageFor('adaptiveCloseButtonTitle')"
170
- [svgIcon]="checkIcon"
171
- fillMode="flat"
172
- themeColor="primary"
173
- size="large"
174
- [tabIndex]="-1"
175
- innerCssClass="k-button-icon"
176
- (click)="handleClose()"
177
- ></button>
178
- </div>
179
- </div>
180
- <div class="k-actionsheet-titlebar-group k-actionsheet-filter" *ngIf="showTextInput">
181
- <kendo-textbox
182
- #actionSheetSearchBar
183
- [value]="searchBarValue || ''"
184
- size="large"
185
- [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
186
- class="k-searchbox"
187
- autocomplete="off"
188
- (valueChange)="onValueChange($event)"
189
- >
190
- <ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
191
- <kendo-icon name="search"></kendo-icon>
192
- </ng-template>
193
- </kendo-textbox>
194
- </div>
160
+ (overlayClick)="onOverlayClick()"
161
+ (keydown)="navigate.emit($event)"
162
+ (expand)="handleExpand()"
163
+ (collapse)="closePopup.emit()"
164
+ >
165
+ <ng-template kendoActionSheetTemplate>
166
+ <div class="k-text-center k-actionsheet-titlebar">
167
+ <div class="k-actionsheet-titlebar-group">
168
+ <div class="k-actionsheet-title">
169
+ @if (title) {
170
+ <div class="k-text-center">{{ title }}</div>
171
+ }
172
+ @if (subtitle) {
173
+ <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
174
+ }
175
+ </div>
176
+ <div class="k-actionsheet-actions">
177
+ <button
178
+ kendoButton
179
+ icon="check"
180
+ type="button"
181
+ [attr.title]="messageFor('adaptiveCloseButtonTitle')"
182
+ [svgIcon]="checkIcon"
183
+ fillMode="flat"
184
+ themeColor="primary"
185
+ size="large"
186
+ [tabIndex]="-1"
187
+ innerCssClass="k-button-icon"
188
+ (click)="handleClose()"
189
+ ></button>
195
190
  </div>
196
- <div class="k-actionsheet-content">
197
- <div class="k-list-container">
198
- <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
199
- </div>
191
+ </div>
192
+ @if (showTextInput) {
193
+ <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
194
+ <kendo-textbox
195
+ #actionSheetSearchBar
196
+ [value]="searchBarValue || ''"
197
+ size="large"
198
+ [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
199
+ class="k-searchbox"
200
+ autocomplete="off"
201
+ (valueChange)="onValueChange($event)"
202
+ >
203
+ @if (filterable) {
204
+ <ng-template kendoTextBoxPrefixTemplate>
205
+ <kendo-icon name="search"></kendo-icon>
206
+ </ng-template>
207
+ }
208
+ </kendo-textbox>
200
209
  </div>
201
- </ng-template>
210
+ }
211
+ </div>
212
+ <div class="k-actionsheet-content">
213
+ <div class="k-list-container">
214
+ <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
215
+ </div>
216
+ </div>
217
+ </ng-template>
202
218
  </kendo-actionsheet>
203
- `,
219
+ `,
204
220
  standalone: true,
205
- imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
221
+ imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
206
222
  }]
207
223
  }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }], propDecorators: { title: [{
208
224
  type: Input