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

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 (14) hide show
  1. package/esm2022/autocomplete/autocomplete.component.mjs +259 -217
  2. package/esm2022/comboboxes/combobox.component.mjs +295 -253
  3. package/esm2022/comboboxes/multicolumncombobox.component.mjs +429 -383
  4. package/esm2022/common/adaptive-renderer.component.mjs +123 -107
  5. package/esm2022/common/list.component.mjs +295 -217
  6. package/esm2022/common/taglist.component.mjs +73 -59
  7. package/esm2022/dropdownlist/dropdownlist.component.mjs +259 -231
  8. package/esm2022/dropdowntrees/dropdowntree.component.mjs +298 -258
  9. package/esm2022/dropdowntrees/multiselecttree.component.mjs +359 -331
  10. package/esm2022/multiselect/multiselect.component.mjs +321 -281
  11. package/esm2022/package-metadata.mjs +2 -2
  12. package/fesm2022/progress-kendo-angular-dropdowns.mjs +2705 -2331
  13. package/package.json +10 -10
  14. package/schematics/ngAdd/index.js +6 -2
package/esm2022/common/taglist.component.mjs CHANGED
@@ -7,7 +7,7 @@ import { TagTemplateDirective } from '../common/templates/tag-template.directive
7
7
  import { GroupTagTemplateDirective } from '../common/templates/group-tag-template.directive';
8
8
  import { getSizeClass, getter, isPresent } from '../common/util';
9
9
  import { xCircleIcon } from '@progress/kendo-svg-icons';
10
- import { NgFor, NgClass, NgIf } from '@angular/common';
10
+ import { NgClass } from '@angular/common';
11
11
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
12
  import { TemplateContextDirective } from '@progress/kendo-angular-common';
13
13
  import * as i0 from "@angular/core";
@@ -108,9 +108,9 @@ export class TagListComponent {
108
108
  }
109
109
  }
110
110
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
111
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
112
- <div
113
- *ngFor="let tag of tags; let index = index;"
111
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
112
+ @for (tag of tags; track $index; let index = $index) {
113
+ <div
114
114
  [attr.id]="itemId(tag, index)"
115
115
  [attr.aria-selected]="true"
116
116
  [attr.role]="'option'"
@@ -129,53 +129,60 @@ export class TagListComponent {
129
129
  'k-chip-flat k-chip-flat-base': fillMode === 'flat',
130
130
  'k-chip-outline k-chip-outline-base': fillMode === 'outline'
131
131
  }"
132
- >
132
+ >
133
133
  <span class="k-chip-content">
134
- <ng-template *ngIf="isGroupTag(tag); then groupTag else singleTag"></ng-template>
135
- <ng-template #groupTag>
136
- <span class="k-chip-label k-text-ellipsis">
137
- <ng-template *ngIf="groupTemplate"
134
+ @if (isGroupTag(tag)) {
135
+ <span class="k-chip-label k-text-ellipsis">
136
+ @if (groupTemplate) {
137
+ <ng-template
138
138
  [templateContext]="{
139
139
  templateRef: groupTemplate.templateRef,
140
140
  $implicit: tag
141
141
  }">
142
- </ng-template>
143
- <ng-template [ngIf]="!groupTemplate">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>
144
- </span>
145
- </ng-template>
146
- <ng-template #singleTag>
147
- <span class="k-chip-label k-text-ellipsis">
148
- <ng-template *ngIf="template"
142
+ </ng-template>
143
+ }
144
+ @if (!groupTemplate) {
145
+ {{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected
146
+ }
147
+ </span>
148
+ } @else {
149
+ <span class="k-chip-label k-text-ellipsis">
150
+ @if (template) {
151
+ <ng-template
149
152
  [templateContext]="{
150
153
  templateRef: template.templateRef,
151
154
  $implicit: tag
152
155
  }">
153
- </ng-template>
154
- <ng-template [ngIf]="!template">{{ tagProp(tag, textField, index) }}</ng-template>
155
- </span>
156
- </ng-template>
156
+ </ng-template>
157
+ }
158
+ @if (!template) {
159
+ {{ tagProp(tag, textField, index) }}
160
+ }
161
+ </span>
162
+ }
157
163
  </span>
158
164
  <span class="k-chip-actions">
159
- <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
160
- <kendo-icon-wrapper
161
- (mousedown)="deleteTag($event, tag, index)"
162
- name="x-circle"
163
- [svgIcon]="xCircleIcon"
164
- >
165
- </kendo-icon-wrapper>
166
- </span>
165
+ <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
166
+ <kendo-icon-wrapper
167
+ (mousedown)="deleteTag($event, tag, index)"
168
+ name="x-circle"
169
+ [svgIcon]="xCircleIcon"
170
+ >
171
+ </kendo-icon-wrapper>
172
+ </span>
167
173
  </span>
168
- </div>
174
+ </div>
175
+ }
169
176
  <ng-content></ng-content>
170
- `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
177
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
171
178
  }
172
179
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TagListComponent, decorators: [{
173
180
  type: Component,
174
181
  args: [{
175
182
  selector: 'kendo-taglist',
176
183
  template: `
177
- <div
178
- *ngFor="let tag of tags; let index = index;"
184
+ @for (tag of tags; track $index; let index = $index) {
185
+ <div
179
186
  [attr.id]="itemId(tag, index)"
180
187
  [attr.aria-selected]="true"
181
188
  [attr.role]="'option'"
@@ -194,47 +201,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
194
201
  'k-chip-flat k-chip-flat-base': fillMode === 'flat',
195
202
  'k-chip-outline k-chip-outline-base': fillMode === 'outline'
196
203
  }"
197
- >
204
+ >
198
205
  <span class="k-chip-content">
199
- <ng-template *ngIf="isGroupTag(tag); then groupTag else singleTag"></ng-template>
200
- <ng-template #groupTag>
201
- <span class="k-chip-label k-text-ellipsis">
202
- <ng-template *ngIf="groupTemplate"
206
+ @if (isGroupTag(tag)) {
207
+ <span class="k-chip-label k-text-ellipsis">
208
+ @if (groupTemplate) {
209
+ <ng-template
203
210
  [templateContext]="{
204
211
  templateRef: groupTemplate.templateRef,
205
212
  $implicit: tag
206
213
  }">
207
- </ng-template>
208
- <ng-template [ngIf]="!groupTemplate">{{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected</ng-template>
209
- </span>
210
- </ng-template>
211
- <ng-template #singleTag>
212
- <span class="k-chip-label k-text-ellipsis">
213
- <ng-template *ngIf="template"
214
+ </ng-template>
215
+ }
216
+ @if (!groupTemplate) {
217
+ {{ tag.length }} {{ tag.length === 1 ? 'item' : 'items' }} selected
218
+ }
219
+ </span>
220
+ } @else {
221
+ <span class="k-chip-label k-text-ellipsis">
222
+ @if (template) {
223
+ <ng-template
214
224
  [templateContext]="{
215
225
  templateRef: template.templateRef,
216
226
  $implicit: tag
217
227
  }">
218
- </ng-template>
219
- <ng-template [ngIf]="!template">{{ tagProp(tag, textField, index) }}</ng-template>
220
- </span>
221
- </ng-template>
228
+ </ng-template>
229
+ }
230
+ @if (!template) {
231
+ {{ tagProp(tag, textField, index) }}
232
+ }
233
+ </span>
234
+ }
222
235
  </span>
223
236
  <span class="k-chip-actions">
224
- <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
225
- <kendo-icon-wrapper
226
- (mousedown)="deleteTag($event, tag, index)"
227
- name="x-circle"
228
- [svgIcon]="xCircleIcon"
229
- >
230
- </kendo-icon-wrapper>
231
- </span>
237
+ <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
238
+ <kendo-icon-wrapper
239
+ (mousedown)="deleteTag($event, tag, index)"
240
+ name="x-circle"
241
+ [svgIcon]="xCircleIcon"
242
+ >
243
+ </kendo-icon-wrapper>
244
+ </span>
232
245
  </span>
233
- </div>
246
+ </div>
247
+ }
234
248
  <ng-content></ng-content>
235
- `,
249
+ `,
236
250
  standalone: true,
237
- imports: [NgFor, NgClass, NgIf, TemplateContextDirective, IconWrapperComponent]
251
+ imports: [NgClass, TemplateContextDirective, IconWrapperComponent]
238
252
  }]
239
253
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tags: [{
240
254
  type: Input