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

package/esm2022/avatar/avatar.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, Input, isDevMode, Renderer2, ElementRef } from '@angular/core';
-import { NgIf, NgStyle } from '@angular/common';
+import { NgStyle } from '@angular/common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -271,7 +271,7 @@ export class AvatarComponent {
         return this.localization.get(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -279,35 +279,37 @@ export class AvatarComponent {
             }
         ], ngImport: i0, template: `
         <ng-container kendoAvatarLocalizedMessages
-            i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
-            avatarAlt="Avatar"
-        >
+          i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
+          avatarAlt="Avatar"
+          >
         </ng-container>
-
-        <ng-content *ngIf="customAvatar"></ng-content>
-
-        <ng-container *ngIf="imageSrc">
-            <span class="k-avatar-image">
-                <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
-            </span>
-        </ng-container>
-
-        <ng-container *ngIf="initials">
-            <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
-        </ng-container>
-
-        <ng-container *ngIf="icon || iconClass || svgIcon">
-            <span class="k-avatar-icon">
-                <kendo-icon-wrapper
-                    [ngStyle]="cssStyle"
-                    [name]="icon"
-                    [customFontClass]="iconClass"
-                    [svgIcon]="svgIcon"
-                >
-                </kendo-icon-wrapper>
-            </span>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
+        
+        @if (customAvatar) {
+          <ng-content></ng-content>
+        }
+        
+        @if (imageSrc) {
+          <span class="k-avatar-image">
+            <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
+          </span>
+        }
+        
+        @if (initials) {
+          <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
+        }
+        
+        @if (icon || iconClass || svgIcon) {
+          <span class="k-avatar-icon">
+            <kendo-icon-wrapper
+              [ngStyle]="cssStyle"
+              [name]="icon"
+              [customFontClass]="iconClass"
+              [svgIcon]="svgIcon"
+              >
+            </kendo-icon-wrapper>
+          </span>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
@@ -322,37 +324,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-avatar',
                     template: `
         <ng-container kendoAvatarLocalizedMessages
-            i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
-            avatarAlt="Avatar"
-        >
+          i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
+          avatarAlt="Avatar"
+          >
         </ng-container>
-
-        <ng-content *ngIf="customAvatar"></ng-content>
-
-        <ng-container *ngIf="imageSrc">
-            <span class="k-avatar-image">
-                <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
-            </span>
-        </ng-container>
-
-        <ng-container *ngIf="initials">
-            <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
-        </ng-container>
-
-        <ng-container *ngIf="icon || iconClass || svgIcon">
-            <span class="k-avatar-icon">
-                <kendo-icon-wrapper
-                    [ngStyle]="cssStyle"
-                    [name]="icon"
-                    [customFontClass]="iconClass"
-                    [svgIcon]="svgIcon"
-                >
-                </kendo-icon-wrapper>
-            </span>
-        </ng-container>
-    `,
+        
+        @if (customAvatar) {
+          <ng-content></ng-content>
+        }
+        
+        @if (imageSrc) {
+          <span class="k-avatar-image">
+            <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
+          </span>
+        }
+        
+        @if (initials) {
+          <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
+        }
+        
+        @if (icon || iconClass || svgIcon) {
+          <span class="k-avatar-icon">
+            <kendo-icon-wrapper
+              [ngStyle]="cssStyle"
+              [name]="icon"
+              [customFontClass]="iconClass"
+              [svgIcon]="svgIcon"
+              >
+            </kendo-icon-wrapper>
+          </span>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
+                    imports: [NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2022/card/card-actions.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, EventEmitter, HostBinding, Input, Output, TemplateRef } from '@angular/core';
-import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 /**
  * Defines the action buttons of the Card ([see example]({% slug actions_card %})).
@@ -80,57 +80,67 @@ export class CardActionsComponent {
         this.action.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardActionsComponent, isStandalone: true, selector: "kendo-card-actions", inputs: { orientation: "orientation", layout: "layout", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClass", "class.k-card-actions": "this.hostClass", "class.k-actions-stretched": "this.stretchedClass", "class.k-actions-start": "this.startClass", "class.k-actions-end": "this.endClass", "class.k-actions-center": "this.centerClass", "class.k-actions-vertical": "this.verticalClass", "class.k-actions-horizontal": "this.horizontalClass" } }, ngImport: i0, template: `
-        <ng-content *ngIf="!actionsArray && !actionsTemplate"></ng-content>
-
-        <ng-container *ngIf="actionsArray">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardActionsComponent, isStandalone: true, selector: "kendo-card-actions", inputs: { orientation: "orientation", layout: "layout", actions: "actions" }, outputs: { action: "action" }, host: { properties: { "class.k-actions": "this.hostClass", "class.k-card-actions": "this.hostClass", "class.k-actions-stretched": "this.stretchedClass", "class.k-actions-start": "this.startClass", "class.k-actions-end": "this.endClass", "class.k-actions-center": "this.centerClass", "class.k-actions-vertical": "this.verticalClass", "class.k-actions-horizontal": "this.horizontalClass" } }, ngImport: i0, template: `
+        @if (!actionsArray && !actionsTemplate) {
+          <ng-content></ng-content>
+        }
+        
+        @if (actionsArray) {
+          @for (action of actionsArray; track action) {
             <button
-                type="button"
-                class="k-button k-button-md k-rounded-md"
-                [class.k-button-solid]="!action.flat"
-                [class.k-button-flat]="action.flat"
-                [class.k-button-solid-base]="!action.primary && !action.flat"
-                [class.k-button-solid-primary]="action.primary && !action.flat"
-                [class.k-button-flat-base]="!action.primary && action.flat"
-                [class.k-button-flat-primary]="action.primary && action.flat"
-                (click)="onClick(action)"
-                *ngFor="let action of actionsArray"
-            >
-                <span class="k-button-text">{{ action.text }}</span>
+              type="button"
+              class="k-button k-button-md k-rounded-md"
+              [class.k-button-solid]="!action.flat"
+              [class.k-button-flat]="action.flat"
+              [class.k-button-solid-base]="!action.primary && !action.flat"
+              [class.k-button-solid-primary]="action.primary && !action.flat"
+              [class.k-button-flat-base]="!action.primary && action.flat"
+              [class.k-button-flat-primary]="action.primary && action.flat"
+              (click)="onClick(action)"
+              >
+              <span class="k-button-text">{{ action.text }}</span>
             </button>
-        </ng-container>
-
-        <ng-template [ngTemplateOutlet]="actionsTemplate" *ngIf="actionsTemplate"></ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+          }
+        }
+        
+        @if (actionsTemplate) {
+          <ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card-actions',
                     template: `
-        <ng-content *ngIf="!actionsArray && !actionsTemplate"></ng-content>
-
-        <ng-container *ngIf="actionsArray">
+        @if (!actionsArray && !actionsTemplate) {
+          <ng-content></ng-content>
+        }
+        
+        @if (actionsArray) {
+          @for (action of actionsArray; track action) {
             <button
-                type="button"
-                class="k-button k-button-md k-rounded-md"
-                [class.k-button-solid]="!action.flat"
-                [class.k-button-flat]="action.flat"
-                [class.k-button-solid-base]="!action.primary && !action.flat"
-                [class.k-button-solid-primary]="action.primary && !action.flat"
-                [class.k-button-flat-base]="!action.primary && action.flat"
-                [class.k-button-flat-primary]="action.primary && action.flat"
-                (click)="onClick(action)"
-                *ngFor="let action of actionsArray"
-            >
-                <span class="k-button-text">{{ action.text }}</span>
+              type="button"
+              class="k-button k-button-md k-rounded-md"
+              [class.k-button-solid]="!action.flat"
+              [class.k-button-flat]="action.flat"
+              [class.k-button-solid-base]="!action.primary && !action.flat"
+              [class.k-button-solid-primary]="action.primary && !action.flat"
+              [class.k-button-flat-base]="!action.primary && action.flat"
+              [class.k-button-flat-primary]="action.primary && action.flat"
+              (click)="onClick(action)"
+              >
+              <span class="k-button-text">{{ action.text }}</span>
             </button>
-        </ng-container>
-
-        <ng-template [ngTemplateOutlet]="actionsTemplate" *ngIf="actionsTemplate"></ng-template>
-    `,
+          }
+        }
+        
+        @if (actionsTemplate) {
+          <ng-template [ngTemplateOutlet]="actionsTemplate"></ng-template>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgFor, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2022/drawer/drawer-container.component.mjs

@@ -6,7 +6,6 @@ import { Component, HostBinding, ContentChild } from '@angular/core';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { DrawerComponent } from './drawer.component';
 import { isPresent } from '../common/util';
-import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
@@ -80,16 +79,18 @@ export class DrawerContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DrawerContainerComponent, isStandalone: true, selector: "kendo-drawer-container", host: { properties: { "class.k-drawer-container": "this.hostClass", "class.k-drawer-overlay": "this.overlayClass", "class.k-drawer-mini": "this.miniClass", "class.k-drawer-push": "this.pushClass", "class.k-drawer-expanded": "this.isExpandedClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerContainerComponent, isStandalone: true, selector: "kendo-drawer-container", host: { properties: { "class.k-drawer-container": "this.hostClass", "class.k-drawer-overlay": "this.overlayClass", "class.k-drawer-mini": "this.miniClass", "class.k-drawer-push": "this.pushClass", "class.k-drawer-expanded": "this.isExpandedClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.drawer.container'
             }
         ], queries: [{ propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], ngImport: i0, template: `
-        <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
+        @if (overlay) {
+          <div class="k-overlay" (click)="closeDrawer()"></div>
+        }
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
@@ -103,11 +104,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-        <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
+        @if (overlay) {
+          <div class="k-overlay" (click)="closeDrawer()"></div>
+        }
         <ng-content></ng-content>
-    `,
-                    standalone: true,
-                    imports: [NgIf]
+        `,
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2022/drawer/drawer.component.mjs

@@ -15,7 +15,7 @@ import { take } from 'rxjs/operators';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
 import { DrawerListComponent } from './list.component';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/animations";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -312,7 +312,7 @@ export class DrawerComponent {
         return player;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1.AnimationBuilder }, { token: i2.LocalizationService }, { token: i3.DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DrawerComponent, isStandalone: true, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", isItemExpanded: "isItemExpanded", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-drawer": "this.hostClasses", "class.k-drawer-start": "this.startPositionClass", "class.k-drawer-end": "this.endPositionClass", "style.transform": "this.overlayTransofrmStyles", "style.flexBasis.px": "this.flexStyles", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             DrawerService,
             {
@@ -320,35 +320,42 @@ export class DrawerComponent {
                 useValue: 'kendo.drawer'
             }
         ], queries: [{ propertyName: "drawerTemplate", first: true, predicate: DrawerTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: DrawerFooterTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: DrawerHeaderTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: DrawerItemTemplateDirective, descendants: true }], exportAs: ["kendoDrawer"], usesOnChanges: true, ngImport: i0, template: `
-        <div class="k-drawer-wrapper" *ngIf="expanded || mini" [style.width.px]="drawerWidth">
-            <ng-container *ngIf="!drawerTemplate">
-                <ng-template *ngIf="headerTemplate"
-                    [ngTemplateOutlet]="headerTemplate?.templateRef">
+        @if (expanded || mini) {
+          <div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
+            @if (!drawerTemplate) {
+              @if (headerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="headerTemplate?.templateRef">
                 </ng-template>
-
-                <ul kendoDrawerList
-                    role="menubar"
-                    aria-orientation="vertical"
-                    (select)="onSelect($event)"
-                    [mini]="mini"
-                    [expanded]="expanded"
-                    [view]="viewItems"
-                    [itemTemplate]="itemTemplate?.templateRef"
-                    class="k-drawer-items">
-                </ul>
-
-                <ng-template *ngIf="footerTemplate"
-                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+              }
+              <ul kendoDrawerList
+                role="menubar"
+                aria-orientation="vertical"
+                (select)="onSelect($event)"
+                [mini]="mini"
+                [expanded]="expanded"
+                [view]="viewItems"
+                [itemTemplate]="itemTemplate?.templateRef"
+                class="k-drawer-items">
+              </ul>
+              @if (footerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="footerTemplate?.templateRef">
                 </ng-template>
-            </ng-container>
-
-            <ng-template *ngIf="drawerTemplate"
+              }
+            }
+            @if (drawerTemplate) {
+              <ng-template
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
-            </ng-template>
-        </div>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `, 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: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
+              </ng-template>
+            }
+          </div>
+        }
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
@@ -364,37 +371,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     selector: 'kendo-drawer',
                     template: `
-        <div class="k-drawer-wrapper" *ngIf="expanded || mini" [style.width.px]="drawerWidth">
-            <ng-container *ngIf="!drawerTemplate">
-                <ng-template *ngIf="headerTemplate"
-                    [ngTemplateOutlet]="headerTemplate?.templateRef">
+        @if (expanded || mini) {
+          <div class="k-drawer-wrapper" [style.width.px]="drawerWidth">
+            @if (!drawerTemplate) {
+              @if (headerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="headerTemplate?.templateRef">
                 </ng-template>
-
-                <ul kendoDrawerList
-                    role="menubar"
-                    aria-orientation="vertical"
-                    (select)="onSelect($event)"
-                    [mini]="mini"
-                    [expanded]="expanded"
-                    [view]="viewItems"
-                    [itemTemplate]="itemTemplate?.templateRef"
-                    class="k-drawer-items">
-                </ul>
-
-                <ng-template *ngIf="footerTemplate"
-                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+              }
+              <ul kendoDrawerList
+                role="menubar"
+                aria-orientation="vertical"
+                (select)="onSelect($event)"
+                [mini]="mini"
+                [expanded]="expanded"
+                [view]="viewItems"
+                [itemTemplate]="itemTemplate?.templateRef"
+                class="k-drawer-items">
+              </ul>
+              @if (footerTemplate) {
+                <ng-template
+                  [ngTemplateOutlet]="footerTemplate?.templateRef">
                 </ng-template>
-            </ng-container>
-
-            <ng-template *ngIf="drawerTemplate"
+              }
+            }
+            @if (drawerTemplate) {
+              <ng-template
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
-            </ng-template>
-        </div>
-
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
-    `,
+              </ng-template>
+            }
+          </div>
+        }
+        
+        @if (showLicenseWatermark) {
+          <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
+                    imports: [NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.AnimationBuilder }, { type: i2.LocalizationService }, { type: i3.DrawerService }], propDecorators: { hostClasses: [{
                 type: HostBinding,