@progress/kendo-angular-menu 21.1.1-develop.2 → 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.
@@ -36,7 +36,9 @@ import * as i0 from "@angular/core";
36
36
  * <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
37
37
  * <span [kendoMenuItemLink]="index">
38
38
  * {{ item.text }}
39
- * <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
39
+ * @if (item.items && item.items.length) {
40
+ * <span [kendoMenuExpandArrow]="index"></span>
41
+ * }
40
42
  * </span>
41
43
  * </ng-template>
42
44
  * </kendo-menu-item>
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1763729129,
14
- version: '21.1.1-develop.2',
13
+ publishDate: 1763998254,
14
+ version: '21.2.0-develop.1',
15
15
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
16
  };
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, ElementRef, Input, NgZone, Optional, Renderer2, TemplateRef, ViewContainerRef, forwardRef } from '@angular/core';
6
- import { NgFor, NgIf, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
6
+ import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
7
7
  import { ChangeDetectorRef, HostBinding, ViewChild } from '@angular/core';
8
8
  import { isDocumentAvailable } from '@progress/kendo-angular-common';
9
9
  import { POPUP_CONTAINER, PopupService } from '@progress/kendo-angular-popup';
@@ -196,48 +196,51 @@ export class ListComponent {
196
196
  this.actions.execute();
197
197
  }
198
198
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: i1.ItemsService }, { token: i2.HoverService }, { token: i3.ActionsService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
199
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" \n kendoMenuItem\n [appendTo]=\"appendTo\"\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li \n *ngIf=\"item.separator\"\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
199
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n @for (item of items; track item; let idx = $index) {\n @if (!item.separator) {\n <li\n kendoMenuItem\n [appendTo]=\"appendTo\"\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n }\n @if (item.separator) {\n <li\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n }\n }\n ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
200
200
  }
201
201
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
202
202
  type: Component,
203
203
  args: [{
204
204
  selector: '[kendoMenuList]',
205
205
  template: `
206
- <ng-container *ngFor="let item of items; let idx = index">
207
- <li *ngIf="!item.separator"
208
- kendoMenuItem
209
- [appendTo]="appendTo"
210
- [item]="item"
211
- [level]="level"
212
- [size]="size"
213
- [vertical]="vertical"
214
- [animate]="animate"
215
- [rtl]="rtl"
216
- [itemTemplate]="itemTemplate"
217
- [itemLinkTemplate]="itemLinkTemplate"
218
- [openOnClick]="openOnClick"
219
- [index]="hierarchyIndex(idx)"
220
- [siblingIndex]="idx"
221
- [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
222
- [ngClass]="item.cssClass"
223
- [ngStyle]="item.cssStyle"
224
- role="menuitem"
225
- class="k-item k-menu-item"
226
- [class.k-first]="idx === 0"
227
- [class.k-last]="idx === items.length - 1"
228
- [class.k-disabled]="item.disabled"></li>
229
- <li
230
- *ngIf="item.separator"
231
- class="k-separator k-item"
232
- [ngClass]="item.cssClass"
233
- aria-hidden="true"
234
- [ngStyle]="item.cssStyle">
235
- &nbsp;
206
+ @for (item of items; track item; let idx = $index) {
207
+ @if (!item.separator) {
208
+ <li
209
+ kendoMenuItem
210
+ [appendTo]="appendTo"
211
+ [item]="item"
212
+ [level]="level"
213
+ [size]="size"
214
+ [vertical]="vertical"
215
+ [animate]="animate"
216
+ [rtl]="rtl"
217
+ [itemTemplate]="itemTemplate"
218
+ [itemLinkTemplate]="itemLinkTemplate"
219
+ [openOnClick]="openOnClick"
220
+ [index]="hierarchyIndex(idx)"
221
+ [siblingIndex]="idx"
222
+ [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
223
+ [ngClass]="item.cssClass"
224
+ [ngStyle]="item.cssStyle"
225
+ role="menuitem"
226
+ class="k-item k-menu-item"
227
+ [class.k-first]="idx === 0"
228
+ [class.k-last]="idx === items.length - 1"
229
+ [class.k-disabled]="item.disabled"></li>
230
+ }
231
+ @if (item.separator) {
232
+ <li
233
+ class="k-separator k-item"
234
+ [ngClass]="item.cssClass"
235
+ aria-hidden="true"
236
+ [ngStyle]="item.cssStyle">
237
+ &nbsp;
236
238
  </li>
237
- </ng-container>
238
- `,
239
+ }
240
+ }
241
+ `,
239
242
  standalone: true,
240
- imports: [NgFor, NgIf, forwardRef(() => ItemComponent), NgClass, NgStyle]
243
+ imports: [forwardRef(() => ItemComponent), NgClass, NgStyle]
241
244
  }]
242
245
  }], ctorParameters: () => [{ type: i1.ItemsService }, { type: i2.HoverService }, { type: i3.ActionsService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { appendTo: [{
243
246
  type: Input
@@ -472,58 +475,72 @@ export class ItemComponent {
472
475
  this.renderer.setAttribute(this.element.nativeElement, name, value);
473
476
  }
474
477
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, deps: [{ token: i1.ItemsService }, { token: i4.NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: i6.ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
475
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
478
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
476
479
  provide: POPUP_CONTAINER,
477
480
  useFactory: bodyFactory
478
481
  }], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
479
- <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
482
+ @if (!hasLink && !item.content && !linkTemplate) {
483
+ <span class="k-link k-menu-link" #link
480
484
  [class.k-active]="opened" role="presentation">
481
485
  <ng-template [ngTemplateOutlet]="itemcontent">
482
486
  </ng-template>
483
- </span>
484
- <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
487
+ </span>
488
+ }
489
+ @if (item.url && !linkTemplate) {
490
+ <a class="k-link k-menu-link" #link [attr.href]="item.url"
485
491
  [class.k-active]="opened" tabindex="-1" role="presentation">
486
492
  <ng-template [ngTemplateOutlet]="itemcontent">
487
493
  </ng-template>
488
- </a>
489
- <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
494
+ </a>
495
+ }
496
+ @if (linkTemplate && !item.content) {
497
+ <ng-template [ngTemplateOutlet]="linkTemplate"
490
498
  [ngTemplateOutletContext]="{ item: item, index: index }">
491
- </ng-template>
492
-
493
- <div class="k-content" *ngIf="item.content" role="presentation">
499
+ </ng-template>
500
+ }
501
+
502
+ @if (item.content) {
503
+ <div class="k-content" role="presentation">
494
504
  <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
495
505
  </ng-template>
496
- </div>
497
-
506
+ </div>
507
+ }
508
+
498
509
  <ng-template #popupTemplate>
499
- <ul kendoMenuList
500
- [appendTo]="appendTo"
501
- [attr.id]="childId"
502
- [animate]="animate"
503
- [rtl]="rtl"
504
- [vertical]="vertical"
505
- [size]="size"
506
- [openOnClick]="openOnClick"
507
- [items]="children"
508
- [level]="level + 1"
509
- [index]="index"
510
- [itemTemplate]="itemTemplate"
511
- [itemLinkTemplate]="itemLinkTemplate"
512
- [ngClass]="menuListClasses"
513
- role="menu">
514
- </ul>
510
+ <ul kendoMenuList
511
+ [appendTo]="appendTo"
512
+ [attr.id]="childId"
513
+ [animate]="animate"
514
+ [rtl]="rtl"
515
+ [vertical]="vertical"
516
+ [size]="size"
517
+ [openOnClick]="openOnClick"
518
+ [items]="children"
519
+ [level]="level + 1"
520
+ [index]="index"
521
+ [itemTemplate]="itemTemplate"
522
+ [itemLinkTemplate]="itemLinkTemplate"
523
+ [ngClass]="menuListClasses"
524
+ role="menu">
525
+ </ul>
515
526
  </ng-template>
516
-
527
+
517
528
  <ng-template #itemcontent>
518
- <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
519
- <ng-container *ngIf="!template">
520
- <span class="k-menu-link-text">{{ item.text }}</span>
521
- </ng-container>
522
- <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
529
+ @if (item.icon || item.svgIcon) {
530
+ <kendo-icon-wrapper [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
531
+ }
532
+ @if (!template) {
533
+ <span class="k-menu-link-text">{{ item.text }}</span>
534
+ }
535
+ @if (template) {
536
+ <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
523
537
  </ng-template>
524
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
538
+ }
539
+ @if (hasContent) {
540
+ <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
541
+ }
525
542
  </ng-template>
526
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
543
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
527
544
  }
528
545
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, decorators: [{
529
546
  type: Component,
@@ -534,56 +551,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
534
551
  }],
535
552
  selector: '[kendoMenuItem]',
536
553
  template: `
537
- <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
554
+ @if (!hasLink && !item.content && !linkTemplate) {
555
+ <span class="k-link k-menu-link" #link
538
556
  [class.k-active]="opened" role="presentation">
539
557
  <ng-template [ngTemplateOutlet]="itemcontent">
540
558
  </ng-template>
541
- </span>
542
- <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
559
+ </span>
560
+ }
561
+ @if (item.url && !linkTemplate) {
562
+ <a class="k-link k-menu-link" #link [attr.href]="item.url"
543
563
  [class.k-active]="opened" tabindex="-1" role="presentation">
544
564
  <ng-template [ngTemplateOutlet]="itemcontent">
545
565
  </ng-template>
546
- </a>
547
- <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
566
+ </a>
567
+ }
568
+ @if (linkTemplate && !item.content) {
569
+ <ng-template [ngTemplateOutlet]="linkTemplate"
548
570
  [ngTemplateOutletContext]="{ item: item, index: index }">
549
- </ng-template>
550
-
551
- <div class="k-content" *ngIf="item.content" role="presentation">
571
+ </ng-template>
572
+ }
573
+
574
+ @if (item.content) {
575
+ <div class="k-content" role="presentation">
552
576
  <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
553
577
  </ng-template>
554
- </div>
555
-
578
+ </div>
579
+ }
580
+
556
581
  <ng-template #popupTemplate>
557
- <ul kendoMenuList
558
- [appendTo]="appendTo"
559
- [attr.id]="childId"
560
- [animate]="animate"
561
- [rtl]="rtl"
562
- [vertical]="vertical"
563
- [size]="size"
564
- [openOnClick]="openOnClick"
565
- [items]="children"
566
- [level]="level + 1"
567
- [index]="index"
568
- [itemTemplate]="itemTemplate"
569
- [itemLinkTemplate]="itemLinkTemplate"
570
- [ngClass]="menuListClasses"
571
- role="menu">
572
- </ul>
582
+ <ul kendoMenuList
583
+ [appendTo]="appendTo"
584
+ [attr.id]="childId"
585
+ [animate]="animate"
586
+ [rtl]="rtl"
587
+ [vertical]="vertical"
588
+ [size]="size"
589
+ [openOnClick]="openOnClick"
590
+ [items]="children"
591
+ [level]="level + 1"
592
+ [index]="index"
593
+ [itemTemplate]="itemTemplate"
594
+ [itemLinkTemplate]="itemLinkTemplate"
595
+ [ngClass]="menuListClasses"
596
+ role="menu">
597
+ </ul>
573
598
  </ng-template>
574
-
599
+
575
600
  <ng-template #itemcontent>
576
- <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
577
- <ng-container *ngIf="!template">
578
- <span class="k-menu-link-text">{{ item.text }}</span>
579
- </ng-container>
580
- <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
601
+ @if (item.icon || item.svgIcon) {
602
+ <kendo-icon-wrapper [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
603
+ }
604
+ @if (!template) {
605
+ <span class="k-menu-link-text">{{ item.text }}</span>
606
+ }
607
+ @if (template) {
608
+ <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
581
609
  </ng-template>
582
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
610
+ }
611
+ @if (hasContent) {
612
+ <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
613
+ }
583
614
  </ng-template>
584
- `,
615
+ `,
585
616
  standalone: true,
586
- imports: [NgIf, NgTemplateOutlet, ListComponent, NgClass, IconWrapperComponent]
617
+ imports: [NgTemplateOutlet, ListComponent, NgClass, IconWrapperComponent]
587
618
  }]
588
619
  }], ctorParameters: () => [{ type: i1.ItemsService }, { type: i4.NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.PopupService }, { type: i0.ElementRef }, { type: i6.ContextMenuService, decorators: [{
589
620
  type: Optional
@@ -24,7 +24,9 @@ import * as i0 from "@angular/core";
24
24
  * <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
25
25
  * <span [kendoMenuItemLink]="index">
26
26
  * {{ item.text }}
27
- * <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
27
+ * @if (item.items && item.items.length) {
28
+ * <span [kendoMenuExpandArrow]="index"></span>
29
+ * }
28
30
  * </span>
29
31
  * </ng-template>
30
32
  * </kendo-menu-item>
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
6
  import { Injectable, NgZone, EventEmitter, Directive, Optional, Component, Input, ContentChildren, ElementRef, forwardRef, ViewChild, HostBinding, Output, isDevMode, ContentChild, NgModule } from '@angular/core';
7
- import { NgFor, NgIf, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
7
+ import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
8
8
  import * as i3 from '@progress/kendo-angular-l10n';
9
9
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
10
10
  import { validatePackage } from '@progress/kendo-licensing';
@@ -22,8 +22,8 @@ const packageMetadata = {
22
22
  productName: 'Kendo UI for Angular',
23
23
  productCode: 'KENDOUIANGULAR',
24
24
  productCodes: ['KENDOUIANGULAR'],
25
- publishDate: 1763729129,
26
- version: '21.1.1-develop.2',
25
+ publishDate: 1763998254,
26
+ version: '21.2.0-develop.1',
27
27
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
28
28
  };
29
29
 
@@ -912,7 +912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
912
912
  * <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
913
913
  * <span [kendoMenuItemLink]="index">
914
914
  * {{ item.text }}
915
- * <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
915
+ * @if (item.items && item.items.length) {
916
+ * <span [kendoMenuExpandArrow]="index"></span>
917
+ * }
916
918
  * </span>
917
919
  * </ng-template>
918
920
  * </kendo-menu-item>
@@ -1019,7 +1021,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
1019
1021
  * <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
1020
1022
  * <span [kendoMenuItemLink]="index">
1021
1023
  * {{ item.text }}
1022
- * <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
1024
+ * @if (item.items && item.items.length) {
1025
+ * <span [kendoMenuExpandArrow]="index"></span>
1026
+ * }
1023
1027
  * </span>
1024
1028
  * </ng-template>
1025
1029
  * </kendo-menu-item>
@@ -1498,48 +1502,51 @@ class ListComponent {
1498
1502
  this.actions.execute();
1499
1503
  }
1500
1504
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1501
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <li *ngIf=\"!item.separator\" \n kendoMenuItem\n [appendTo]=\"appendTo\"\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n <li \n *ngIf=\"item.separator\"\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n </ng-container>\n ", isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1505
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, ngImport: i0, template: "\n @for (item of items; track item; let idx = $index) {\n @if (!item.separator) {\n <li\n kendoMenuItem\n [appendTo]=\"appendTo\"\n [item]=\"item\"\n [level]=\"level\"\n [size]=\"size\"\n [vertical]=\"vertical\"\n [animate]=\"animate\"\n [rtl]=\"rtl\"\n [itemTemplate]=\"itemTemplate\"\n [itemLinkTemplate]=\"itemLinkTemplate\"\n [openOnClick]=\"openOnClick\"\n [index]=\"hierarchyIndex(idx)\"\n [siblingIndex]=\"idx\"\n [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n [ngClass]=\"item.cssClass\"\n [ngStyle]=\"item.cssStyle\"\n role=\"menuitem\"\n class=\"k-item k-menu-item\"\n [class.k-first]=\"idx === 0\"\n [class.k-last]=\"idx === items.length - 1\"\n [class.k-disabled]=\"item.disabled\"></li>\n }\n @if (item.separator) {\n <li\n class=\"k-separator k-item\"\n [ngClass]=\"item.cssClass\"\n aria-hidden=\"true\"\n [ngStyle]=\"item.cssStyle\">\n &nbsp;\n </li>\n }\n }\n ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1502
1506
  }
1503
1507
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
1504
1508
  type: Component,
1505
1509
  args: [{
1506
1510
  selector: '[kendoMenuList]',
1507
1511
  template: `
1508
- <ng-container *ngFor="let item of items; let idx = index">
1509
- <li *ngIf="!item.separator"
1510
- kendoMenuItem
1511
- [appendTo]="appendTo"
1512
- [item]="item"
1513
- [level]="level"
1514
- [size]="size"
1515
- [vertical]="vertical"
1516
- [animate]="animate"
1517
- [rtl]="rtl"
1518
- [itemTemplate]="itemTemplate"
1519
- [itemLinkTemplate]="itemLinkTemplate"
1520
- [openOnClick]="openOnClick"
1521
- [index]="hierarchyIndex(idx)"
1522
- [siblingIndex]="idx"
1523
- [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
1524
- [ngClass]="item.cssClass"
1525
- [ngStyle]="item.cssStyle"
1526
- role="menuitem"
1527
- class="k-item k-menu-item"
1528
- [class.k-first]="idx === 0"
1529
- [class.k-last]="idx === items.length - 1"
1530
- [class.k-disabled]="item.disabled"></li>
1531
- <li
1532
- *ngIf="item.separator"
1533
- class="k-separator k-item"
1534
- [ngClass]="item.cssClass"
1535
- aria-hidden="true"
1536
- [ngStyle]="item.cssStyle">
1537
- &nbsp;
1512
+ @for (item of items; track item; let idx = $index) {
1513
+ @if (!item.separator) {
1514
+ <li
1515
+ kendoMenuItem
1516
+ [appendTo]="appendTo"
1517
+ [item]="item"
1518
+ [level]="level"
1519
+ [size]="size"
1520
+ [vertical]="vertical"
1521
+ [animate]="animate"
1522
+ [rtl]="rtl"
1523
+ [itemTemplate]="itemTemplate"
1524
+ [itemLinkTemplate]="itemLinkTemplate"
1525
+ [openOnClick]="openOnClick"
1526
+ [index]="hierarchyIndex(idx)"
1527
+ [siblingIndex]="idx"
1528
+ [attr.${NODE_INDEX}]="hierarchyIndex(idx)"
1529
+ [ngClass]="item.cssClass"
1530
+ [ngStyle]="item.cssStyle"
1531
+ role="menuitem"
1532
+ class="k-item k-menu-item"
1533
+ [class.k-first]="idx === 0"
1534
+ [class.k-last]="idx === items.length - 1"
1535
+ [class.k-disabled]="item.disabled"></li>
1536
+ }
1537
+ @if (item.separator) {
1538
+ <li
1539
+ class="k-separator k-item"
1540
+ [ngClass]="item.cssClass"
1541
+ aria-hidden="true"
1542
+ [ngStyle]="item.cssStyle">
1543
+ &nbsp;
1538
1544
  </li>
1539
- </ng-container>
1540
- `,
1545
+ }
1546
+ }
1547
+ `,
1541
1548
  standalone: true,
1542
- imports: [NgFor, NgIf, forwardRef(() => ItemComponent), NgClass, NgStyle]
1549
+ imports: [forwardRef(() => ItemComponent), NgClass, NgStyle]
1543
1550
  }]
1544
1551
  }], ctorParameters: () => [{ type: ItemsService }, { type: HoverService }, { type: ActionsService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { appendTo: [{
1545
1552
  type: Input
@@ -1774,58 +1781,72 @@ class ItemComponent {
1774
1781
  this.renderer.setAttribute(this.element.nativeElement, name, value);
1775
1782
  }
1776
1783
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, deps: [{ token: ItemsService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
1777
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
1784
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
1778
1785
  provide: POPUP_CONTAINER,
1779
1786
  useFactory: bodyFactory
1780
1787
  }], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
1781
- <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
1788
+ @if (!hasLink && !item.content && !linkTemplate) {
1789
+ <span class="k-link k-menu-link" #link
1782
1790
  [class.k-active]="opened" role="presentation">
1783
1791
  <ng-template [ngTemplateOutlet]="itemcontent">
1784
1792
  </ng-template>
1785
- </span>
1786
- <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
1793
+ </span>
1794
+ }
1795
+ @if (item.url && !linkTemplate) {
1796
+ <a class="k-link k-menu-link" #link [attr.href]="item.url"
1787
1797
  [class.k-active]="opened" tabindex="-1" role="presentation">
1788
1798
  <ng-template [ngTemplateOutlet]="itemcontent">
1789
1799
  </ng-template>
1790
- </a>
1791
- <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
1800
+ </a>
1801
+ }
1802
+ @if (linkTemplate && !item.content) {
1803
+ <ng-template [ngTemplateOutlet]="linkTemplate"
1792
1804
  [ngTemplateOutletContext]="{ item: item, index: index }">
1793
- </ng-template>
1794
-
1795
- <div class="k-content" *ngIf="item.content" role="presentation">
1805
+ </ng-template>
1806
+ }
1807
+
1808
+ @if (item.content) {
1809
+ <div class="k-content" role="presentation">
1796
1810
  <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
1797
1811
  </ng-template>
1798
- </div>
1799
-
1812
+ </div>
1813
+ }
1814
+
1800
1815
  <ng-template #popupTemplate>
1801
- <ul kendoMenuList
1802
- [appendTo]="appendTo"
1803
- [attr.id]="childId"
1804
- [animate]="animate"
1805
- [rtl]="rtl"
1806
- [vertical]="vertical"
1807
- [size]="size"
1808
- [openOnClick]="openOnClick"
1809
- [items]="children"
1810
- [level]="level + 1"
1811
- [index]="index"
1812
- [itemTemplate]="itemTemplate"
1813
- [itemLinkTemplate]="itemLinkTemplate"
1814
- [ngClass]="menuListClasses"
1815
- role="menu">
1816
- </ul>
1816
+ <ul kendoMenuList
1817
+ [appendTo]="appendTo"
1818
+ [attr.id]="childId"
1819
+ [animate]="animate"
1820
+ [rtl]="rtl"
1821
+ [vertical]="vertical"
1822
+ [size]="size"
1823
+ [openOnClick]="openOnClick"
1824
+ [items]="children"
1825
+ [level]="level + 1"
1826
+ [index]="index"
1827
+ [itemTemplate]="itemTemplate"
1828
+ [itemLinkTemplate]="itemLinkTemplate"
1829
+ [ngClass]="menuListClasses"
1830
+ role="menu">
1831
+ </ul>
1817
1832
  </ng-template>
1818
-
1833
+
1819
1834
  <ng-template #itemcontent>
1820
- <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
1821
- <ng-container *ngIf="!template">
1822
- <span class="k-menu-link-text">{{ item.text }}</span>
1823
- </ng-container>
1824
- <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1835
+ @if (item.icon || item.svgIcon) {
1836
+ <kendo-icon-wrapper [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
1837
+ }
1838
+ @if (!template) {
1839
+ <span class="k-menu-link-text">{{ item.text }}</span>
1840
+ }
1841
+ @if (template) {
1842
+ <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1825
1843
  </ng-template>
1826
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1844
+ }
1845
+ @if (hasContent) {
1846
+ <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1847
+ }
1827
1848
  </ng-template>
1828
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
1849
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
1829
1850
  }
1830
1851
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemComponent, decorators: [{
1831
1852
  type: Component,
@@ -1836,56 +1857,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
1836
1857
  }],
1837
1858
  selector: '[kendoMenuItem]',
1838
1859
  template: `
1839
- <span *ngIf="!hasLink && !item.content && !linkTemplate" class="k-link k-menu-link" #link
1860
+ @if (!hasLink && !item.content && !linkTemplate) {
1861
+ <span class="k-link k-menu-link" #link
1840
1862
  [class.k-active]="opened" role="presentation">
1841
1863
  <ng-template [ngTemplateOutlet]="itemcontent">
1842
1864
  </ng-template>
1843
- </span>
1844
- <a *ngIf="item.url && !linkTemplate" class="k-link k-menu-link" #link [attr.href]="item.url"
1865
+ </span>
1866
+ }
1867
+ @if (item.url && !linkTemplate) {
1868
+ <a class="k-link k-menu-link" #link [attr.href]="item.url"
1845
1869
  [class.k-active]="opened" tabindex="-1" role="presentation">
1846
1870
  <ng-template [ngTemplateOutlet]="itemcontent">
1847
1871
  </ng-template>
1848
- </a>
1849
- <ng-template *ngIf="linkTemplate && !item.content" [ngTemplateOutlet]="linkTemplate"
1872
+ </a>
1873
+ }
1874
+ @if (linkTemplate && !item.content) {
1875
+ <ng-template [ngTemplateOutlet]="linkTemplate"
1850
1876
  [ngTemplateOutletContext]="{ item: item, index: index }">
1851
- </ng-template>
1852
-
1853
- <div class="k-content" *ngIf="item.content" role="presentation">
1877
+ </ng-template>
1878
+ }
1879
+
1880
+ @if (item.content) {
1881
+ <div class="k-content" role="presentation">
1854
1882
  <ng-template [ngTemplateOutlet]="item.content" [ngTemplateOutletContext]="{ item: item.owner, index: item.ownerIndex }">
1855
1883
  </ng-template>
1856
- </div>
1857
-
1884
+ </div>
1885
+ }
1886
+
1858
1887
  <ng-template #popupTemplate>
1859
- <ul kendoMenuList
1860
- [appendTo]="appendTo"
1861
- [attr.id]="childId"
1862
- [animate]="animate"
1863
- [rtl]="rtl"
1864
- [vertical]="vertical"
1865
- [size]="size"
1866
- [openOnClick]="openOnClick"
1867
- [items]="children"
1868
- [level]="level + 1"
1869
- [index]="index"
1870
- [itemTemplate]="itemTemplate"
1871
- [itemLinkTemplate]="itemLinkTemplate"
1872
- [ngClass]="menuListClasses"
1873
- role="menu">
1874
- </ul>
1888
+ <ul kendoMenuList
1889
+ [appendTo]="appendTo"
1890
+ [attr.id]="childId"
1891
+ [animate]="animate"
1892
+ [rtl]="rtl"
1893
+ [vertical]="vertical"
1894
+ [size]="size"
1895
+ [openOnClick]="openOnClick"
1896
+ [items]="children"
1897
+ [level]="level + 1"
1898
+ [index]="index"
1899
+ [itemTemplate]="itemTemplate"
1900
+ [itemLinkTemplate]="itemLinkTemplate"
1901
+ [ngClass]="menuListClasses"
1902
+ role="menu">
1903
+ </ul>
1875
1904
  </ng-template>
1876
-
1905
+
1877
1906
  <ng-template #itemcontent>
1878
- <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
1879
- <ng-container *ngIf="!template">
1880
- <span class="k-menu-link-text">{{ item.text }}</span>
1881
- </ng-container>
1882
- <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1907
+ @if (item.icon || item.svgIcon) {
1908
+ <kendo-icon-wrapper [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
1909
+ }
1910
+ @if (!template) {
1911
+ <span class="k-menu-link-text">{{ item.text }}</span>
1912
+ }
1913
+ @if (template) {
1914
+ <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
1883
1915
  </ng-template>
1884
- <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1916
+ }
1917
+ @if (hasContent) {
1918
+ <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
1919
+ }
1885
1920
  </ng-template>
1886
- `,
1921
+ `,
1887
1922
  standalone: true,
1888
- imports: [NgIf, NgTemplateOutlet, ListComponent, NgClass, IconWrapperComponent]
1923
+ imports: [NgTemplateOutlet, ListComponent, NgClass, IconWrapperComponent]
1889
1924
  }]
1890
1925
  }], ctorParameters: () => [{ type: ItemsService }, { type: NavigationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i5.PopupService }, { type: i0.ElementRef }, { type: ContextMenuService, decorators: [{
1891
1926
  type: Optional
@@ -38,7 +38,9 @@ import * as i0 from "@angular/core";
38
38
  * <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
39
39
  * <span [kendoMenuItemLink]="index">
40
40
  * {{ item.text }}
41
- * <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
41
+ * @if (item.items && item.items.length) {
42
+ * <span [kendoMenuExpandArrow]="index"></span>
43
+ * }
42
44
  * </span>
43
45
  * </ng-template>
44
46
  * </kendo-menu-item>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-menu",
3
- "version": "21.1.1-develop.2",
3
+ "version": "21.2.0-develop.1",
4
4
  "description": "Kendo UI Angular Menu component",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -19,7 +19,7 @@
19
19
  "package": {
20
20
  "productName": "Kendo UI for Angular",
21
21
  "productCode": "KENDOUIANGULAR",
22
- "publishDate": 1763729129,
22
+ "publishDate": 1763998254,
23
23
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
24
24
  }
25
25
  },
@@ -29,15 +29,15 @@
29
29
  "@angular/core": "18 - 21",
30
30
  "@angular/platform-browser": "18 - 21",
31
31
  "@progress/kendo-licensing": "^1.7.0",
32
- "@progress/kendo-angular-common": "21.1.1-develop.2",
33
- "@progress/kendo-angular-l10n": "21.1.1-develop.2",
34
- "@progress/kendo-angular-icons": "21.1.1-develop.2",
35
- "@progress/kendo-angular-popup": "21.1.1-develop.2",
32
+ "@progress/kendo-angular-common": "21.2.0-develop.1",
33
+ "@progress/kendo-angular-l10n": "21.2.0-develop.1",
34
+ "@progress/kendo-angular-icons": "21.2.0-develop.1",
35
+ "@progress/kendo-angular-popup": "21.2.0-develop.1",
36
36
  "rxjs": "^6.5.3 || ^7.0.0"
37
37
  },
38
38
  "dependencies": {
39
39
  "tslib": "^2.3.1",
40
- "@progress/kendo-angular-schematics": "21.1.1-develop.2"
40
+ "@progress/kendo-angular-schematics": "21.2.0-develop.1"
41
41
  },
42
42
  "schematics": "./schematics/collection.json",
43
43
  "module": "fesm2022/progress-kendo-angular-menu.mjs",
@@ -24,7 +24,9 @@ import * as i0 from "@angular/core";
24
24
  * <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
25
25
  * <span [kendoMenuItemLink]="index">
26
26
  * {{ item.text }}
27
- * <span *ngIf="item.items && item.items.length" [kendoMenuExpandArrow]="index"></span>
27
+ * @if (item.items && item.items.length) {
28
+ * <span [kendoMenuExpandArrow]="index"></span>
29
+ * }
28
30
  * </span>
29
31
  * </ng-template>
30
32
  * </kendo-menu-item>