@progress/kendo-angular-layout 16.5.0 → 16.6.0-develop.1

package/esm2020/card/card.component.mjs

@@ -52,7 +52,7 @@ export class CardComponent {
     }
 }
 CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "kendo-card", inputs: { orientation: "orientation", width: "width" }, host: { properties: { "class.k-card": "this.hostClass", "style.width": "this.widthStyle", "class.k-card-vertical": "this.vertical", "class.k-card-horizontal": "this.horizontal", "attr.dir": "this.direction" } }, providers: [
+CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, isStandalone: true, selector: "kendo-card", inputs: { orientation: "orientation", width: "width" }, host: { properties: { "class.k-card": "this.hostClass", "style.width": "this.widthStyle", "class.k-card-vertical": "this.vertical", "class.k-card-horizontal": "this.horizontal", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -74,7 +74,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ],
                     template: `
         <ng-content></ng-content>
-    `
+    `,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2020/card/directives/card-media.directive.mjs

@@ -13,11 +13,12 @@ export class CardMediaDirective {
     }
 }
 CardMediaDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardMediaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardMediaDirective, selector: "[kendoCardMedia]", host: { properties: { "class.k-card-media": "this.hostClass" } }, ngImport: i0 });
+CardMediaDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardMediaDirective, isStandalone: true, selector: "[kendoCardMedia]", host: { properties: { "class.k-card-media": "this.hostClass" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardMediaDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoCardMedia]'
+                    selector: '[kendoCardMedia]',
+                    standalone: true
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2020/card/directives/card-separator.directive.mjs

@@ -27,11 +27,12 @@ export class CardSeparatorDirective {
     }
 }
 CardSeparatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardSeparatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardSeparatorDirective, selector: "[kendoCardSeparator]", inputs: { color: "color", orientation: "orientation" }, host: { properties: { "class.k-card-separator": "this.hostClass", "class.k-separator-vertical": "this.verticalClass", "class.k-separator-horizontal": "this.horizontalClass", "style.color": "this.color" } }, ngImport: i0 });
+CardSeparatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardSeparatorDirective, isStandalone: true, selector: "[kendoCardSeparator]", inputs: { color: "color", orientation: "orientation" }, host: { properties: { "class.k-card-separator": "this.hostClass", "class.k-separator-vertical": "this.verticalClass", "class.k-separator-horizontal": "this.horizontalClass", "style.color": "this.color" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoCardSeparator]'
+                    selector: '[kendoCardSeparator]',
+                    standalone: true
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2020/card/directives/card-subtitle.directive.mjs

@@ -13,11 +13,12 @@ export class CardSubtitleDirective {
     }
 }
 CardSubtitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardSubtitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]", host: { properties: { "class.k-card-subtitle": "this.hostClass" } }, ngImport: i0 });
+CardSubtitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardSubtitleDirective, isStandalone: true, selector: "[kendoCardSubtitle]", host: { properties: { "class.k-card-subtitle": "this.hostClass" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoCardSubtitle]'
+                    selector: '[kendoCardSubtitle]',
+                    standalone: true
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2020/card/directives/card-title.directive.mjs

@@ -13,11 +13,12 @@ export class CardTitleDirective {
     }
 }
 CardTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CardTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardTitleDirective, selector: "[kendoCardTitle]", host: { properties: { "class.k-card-title": "this.hostClass" } }, ngImport: i0 });
+CardTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: CardTitleDirective, isStandalone: true, selector: "[kendoCardTitle]", host: { properties: { "class.k-card-title": "this.hostClass" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoCardTitle]'
+                    selector: '[kendoCardTitle]',
+                    standalone: true
                 }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2020/card.module.mjs

@@ -3,32 +3,18 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CardComponent } from './card/card.component';
-import { CardHeaderComponent } from './card/card-header.component';
-import { CardFooterComponent } from './card/card-footer.component';
-import { CardBodyComponent } from './card/card-body.component';
-import { CardActionsComponent } from './card/card-actions.component';
-import { CardSeparatorDirective } from './card/directives/card-separator.directive';
-import { CardTitleDirective } from './card/directives/card-title.directive';
-import { CardSubtitleDirective } from './card/directives/card-subtitle.directive';
-import { CardMediaDirective } from './card/directives/card-media.directive';
+import { KENDO_CARD } from './directives';
 import * as i0 from "@angular/core";
-const cardDirectives = [
-    CardTitleDirective,
-    CardSubtitleDirective,
-    CardSeparatorDirective,
-    CardMediaDirective
-];
-const exportedModules = [
-    CardComponent,
-    CardHeaderComponent,
-    CardBodyComponent,
-    CardFooterComponent,
-    CardActionsComponent,
-    ...cardDirectives
-];
-const declarations = [...exportedModules];
+import * as i1 from "./card/card.component";
+import * as i2 from "./card/card-actions.component";
+import * as i3 from "./card/card-body.component";
+import * as i4 from "./card/card-footer.component";
+import * as i5 from "./card/card-header.component";
+import * as i6 from "./card/directives/card-media.directive";
+import * as i7 from "./card/directives/card-separator.directive";
+import * as i8 from "./card/directives/card-subtitle.directive";
+import * as i9 from "./card/directives/card-title.directive";
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Card component.
@@ -36,27 +22,12 @@ const declarations = [...exportedModules];
 export class CardModule {
 }
 CardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CardModule, declarations: [CardComponent,
-        CardHeaderComponent,
-        CardBodyComponent,
-        CardFooterComponent,
-        CardActionsComponent, CardTitleDirective,
-        CardSubtitleDirective,
-        CardSeparatorDirective,
-        CardMediaDirective], imports: [CommonModule], exports: [CardComponent,
-        CardHeaderComponent,
-        CardBodyComponent,
-        CardFooterComponent,
-        CardActionsComponent, CardTitleDirective,
-        CardSubtitleDirective,
-        CardSeparatorDirective,
-        CardMediaDirective] });
-CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardModule, imports: [CommonModule] });
+CardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: CardModule, imports: [i1.CardComponent, i2.CardActionsComponent, i3.CardBodyComponent, i4.CardFooterComponent, i5.CardHeaderComponent, i6.CardMediaDirective, i7.CardSeparatorDirective, i8.CardSubtitleDirective, i9.CardTitleDirective], exports: [i1.CardComponent, i2.CardActionsComponent, i3.CardBodyComponent, i4.CardFooterComponent, i5.CardHeaderComponent, i6.CardMediaDirective, i7.CardSeparatorDirective, i8.CardSubtitleDirective, i9.CardTitleDirective] });
+CardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardModule, imports: [i1.CardComponent, i2.CardActionsComponent, i3.CardBodyComponent, i4.CardFooterComponent, i5.CardHeaderComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations],
-                    exports: [exportedModules],
-                    imports: [CommonModule]
+                    exports: [...KENDO_CARD],
+                    imports: [...KENDO_CARD]
                 }]
         }] });

package/esm2020/directives.mjs

@@ -0,0 +1,135 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { AvatarComponent } from "./avatar/avatar.component";
+import { AvatarCustomMessagesComponent } from "./avatar/l10n/custom-messages.component";
+import { CardActionsComponent } from "./card/card-actions.component";
+import { CardBodyComponent } from "./card/card-body.component";
+import { CardFooterComponent } from "./card/card-footer.component";
+import { CardHeaderComponent } from "./card/card-header.component";
+import { CardComponent } from "./card/card.component";
+import { CardMediaDirective } from "./card/directives/card-media.directive";
+import { CardSeparatorDirective } from "./card/directives/card-separator.directive";
+import { CardSubtitleDirective } from "./card/directives/card-subtitle.directive";
+import { CardTitleDirective } from "./card/directives/card-title.directive";
+import { DrawerContainerComponent } from "./drawer/drawer-container.component";
+import { DrawerContentComponent } from "./drawer/drawer-content.component";
+import { DrawerComponent } from "./drawer/drawer.component";
+import { DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerTemplateDirective } from "./drawer/template-directives";
+import { ExpansionPanelTitleDirective } from "./expansionpanel/expansionpanel-title.directive";
+import { ExpansionPanelComponent } from "./expansionpanel/expansionpanel.component";
+import { GridLayoutComponent } from "./layouts/grid-layout.component";
+import { GridLayoutItemComponent } from "./layouts/gridlayout-item.component";
+import { StackLayoutComponent } from "./layouts/stack-layout.component";
+import { PanelBarContentDirective } from "./panelbar/panelbar-content.directive";
+import { PanelBarItemTemplateDirective } from "./panelbar/panelbar-item-template.directive";
+import { PanelBarItemTitleDirective } from "./panelbar/panelbar-item-title.directive";
+import { PanelBarItemComponent } from "./panelbar/panelbar-item.component";
+import { PanelBarComponent } from "./panelbar/panelbar.component";
+import { SplitterPaneComponent } from "./splitter/splitter-pane.component";
+import { SplitterComponent } from "./splitter/splitter.component";
+import { StepperCustomMessagesComponent } from "./stepper/localization/custom-messages.component";
+import { StepperComponent } from "./stepper/stepper.component";
+import { StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective } from "./stepper/template-directives";
+import { TabContentDirective } from "./tabstrip/directives/tab-content.directive";
+import { TabTitleDirective } from "./tabstrip/directives/tab-title.directive";
+import { TabStripCustomMessagesComponent } from "./tabstrip/localization/custom-messages.component";
+import { TabStripTabComponent } from "./tabstrip/models/tabstrip-tab.component";
+import { TabStripComponent } from "./tabstrip/tabstrip.component";
+import { TileLayoutItemBodyComponent } from "./tilelayout/tilelayout-item-body.component";
+import { TileLayoutItemHeaderComponent } from "./tilelayout/tilelayout-item-header.component";
+import { TileLayoutItemComponent } from "./tilelayout/tilelayout-item.component";
+import { TileLayoutComponent } from "./tilelayout/tilelayout.component";
+import { TimelineCustomMessagesComponent } from "./timeline/localization/custom-messages.component";
+import { TimelineCardActionsTemplateDirective } from "./timeline/templates/timeline-card-actions.directive";
+import { TimelineCardBodyTemplateDirective } from "./timeline/templates/timeline-card-body.directive";
+import { TimelineCardHeaderTemplateDirective } from "./timeline/templates/timeline-card-header.directive";
+import { TimelineComponent } from "./timeline/timeline.component";
+export const KENDO_AVATAR = [
+    AvatarComponent,
+    AvatarCustomMessagesComponent
+];
+export const KENDO_CARD = [
+    CardComponent,
+    CardActionsComponent,
+    CardBodyComponent,
+    CardFooterComponent,
+    CardHeaderComponent,
+    CardMediaDirective,
+    CardSeparatorDirective,
+    CardSubtitleDirective,
+    CardTitleDirective
+];
+export const KENDO_DRAWER = [
+    DrawerComponent,
+    DrawerContainerComponent,
+    DrawerContentComponent,
+    DrawerTemplateDirective,
+    DrawerFooterTemplateDirective,
+    DrawerHeaderTemplateDirective,
+    DrawerItemTemplateDirective
+];
+export const KENDO_EXPANSIONPANEL = [
+    ExpansionPanelComponent,
+    ExpansionPanelTitleDirective
+];
+export const KENDO_GRIDLAYOUT = [
+    GridLayoutComponent,
+    GridLayoutItemComponent
+];
+export const KENDO_PANELBAR = [
+    PanelBarComponent,
+    PanelBarItemComponent,
+    PanelBarContentDirective,
+    PanelBarItemTemplateDirective,
+    PanelBarItemTitleDirective
+];
+export const KENDO_SPLITTER = [
+    SplitterComponent,
+    SplitterPaneComponent
+];
+export const KENDO_STACKLAYOUT = [
+    StackLayoutComponent
+];
+export const KENDO_STEPPER = [
+    StepperComponent,
+    StepperCustomMessagesComponent,
+    StepperIndicatorTemplateDirective,
+    StepperLabelTemplateDirective,
+    StepperStepTemplateDirective
+];
+export const KENDO_TABSTRIP = [
+    TabStripComponent,
+    TabStripTabComponent,
+    TabContentDirective,
+    TabTitleDirective,
+    TabStripCustomMessagesComponent
+];
+export const KENDO_TILELAYOUT = [
+    TileLayoutComponent,
+    TileLayoutItemBodyComponent,
+    TileLayoutItemComponent,
+    TileLayoutItemHeaderComponent
+];
+export const KENDO_TIMELINE = [
+    TimelineComponent,
+    TimelineCustomMessagesComponent,
+    TimelineCardActionsTemplateDirective,
+    TimelineCardBodyTemplateDirective,
+    TimelineCardHeaderTemplateDirective
+];
+export const KENDO_LAYOUT = [
+    ...KENDO_AVATAR,
+    ...KENDO_CARD,
+    ...KENDO_DRAWER,
+    ...KENDO_EXPANSIONPANEL,
+    ...KENDO_GRIDLAYOUT,
+    ...KENDO_PANELBAR,
+    ...KENDO_SPLITTER,
+    ...KENDO_STACKLAYOUT,
+    ...KENDO_STEPPER,
+    ...KENDO_TABSTRIP,
+    ...KENDO_TILELAYOUT,
+    ...KENDO_TIMELINE
+];

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

@@ -6,9 +6,9 @@ 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";
-import * as i2 from "@angular/common";
 /**
  * Serves as a container for the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}) and its content.
  */
@@ -59,7 +59,7 @@ export class DrawerContainerComponent {
     }
 }
 DrawerContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerContainerComponent, 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: [
+DrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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,
@@ -68,7 +68,7 @@ DrawerContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
     ], queries: [{ propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true }], ngImport: i0, template: `
         <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -83,7 +83,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <div class="k-overlay" *ngIf="overlay" (click)="closeDrawer()"></div>
         <ng-content></ng-content>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,

package/esm2020/drawer/drawer-content.component.mjs

@@ -13,7 +13,7 @@ export class DrawerContentComponent {
     }
 }
 DrawerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerContentComponent, selector: "kendo-drawer-content", host: { properties: { "class.k-drawer-content": "this.hostClasses" } }, ngImport: i0, template: `
+DrawerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerContentComponent, isStandalone: true, selector: "kendo-drawer-content", host: { properties: { "class.k-drawer-content": "this.hostClasses" } }, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerContentComponent, decorators: [{
@@ -23,7 +23,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: `
         <ng-content></ng-content>
     `,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2020/drawer/drawer.component.mjs

@@ -13,14 +13,13 @@ import { AnimationBuilder } from '@angular/animations';
 import { collapseAnimation, expandAnimation } from './animations';
 import { take } from 'rxjs/operators';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { shouldShowValidationUI } from '@progress/kendo-angular-common';
+import { shouldShowValidationUI, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
+import { DrawerListComponent } from './list.component';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/animations";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./drawer.service";
-import * as i4 from "@angular/common";
-import * as i5 from "@progress/kendo-angular-common";
-import * as i6 from "./list.component";
 const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
 /**
  * Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
@@ -282,7 +281,7 @@ export class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1.AnimationBuilder }, { token: i2.LocalizationService }, { token: i3.DrawerService }], target: i0.ɵɵFactoryTarget.Component });
-DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerComponent, 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: [
+DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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,
         {
@@ -318,7 +317,7 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         </div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i6.DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }] });
+    `, 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]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -361,7 +360,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </div>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgTemplateOutlet, DrawerListComponent, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.AnimationBuilder }, { type: i2.LocalizationService }, { type: i3.DrawerService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,

package/esm2020/drawer/item.component.mjs

@@ -7,10 +7,10 @@ import { Component, Input, TemplateRef, HostBinding, ElementRef, Renderer2 } fro
 import { chevronDownIcon, chevronUpIcon } from "@progress/kendo-svg-icons";
 import { DrawerService } from './drawer.service';
 import { nestedLink, DRAWER_LINK_SELECTOR } from './util';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { NgIf, NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
 import * as i1 from "./drawer.service";
-import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-icons";
 /**
  * @hidden
  */
@@ -59,7 +59,7 @@ export class DrawerItemComponent {
     }
 }
 DrawerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemComponent, deps: [{ token: i1.DrawerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
+DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerItemComponent, isStandalone: true, selector: "[kendoDrawerItem]", inputs: { viewItem: "viewItem", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
         <ng-template *ngIf="itemTemplate; else defaultTemplate"
             [ngTemplateOutlet]="itemTemplate"
             [ngTemplateOutletContext]="{
@@ -102,7 +102,7 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, 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: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -151,7 +151,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgTemplateOutlet, IconWrapperComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { viewItem: [{
                 type: Input

package/esm2020/drawer/list.component.mjs

@@ -11,10 +11,9 @@ import { Keys } from '@progress/kendo-angular-common';
 import { ACTIVE_NESTED_LINK_SELECTOR, nestedLink } from './util';
 import { DrawerListSelectEvent } from './events/drawer-list-select.event';
 import { DrawerItemComponent } from './item.component';
+import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./drawer.service";
-import * as i2 from "@angular/common";
-import * as i3 from "./item.component";
 /**
  * @hidden
  */
@@ -104,7 +103,7 @@ export class DrawerListComponent {
     }
 }
 DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerListComponent, deps: [{ token: i1.DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                role=\"menuitem\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                role=\"separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }] });
+DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DrawerListComponent, isStandalone: true, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, viewQueries: [{ propertyName: "items", predicate: DrawerItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "\n        <ng-container *ngFor=\"let v of view; trackBy:identifyItem; let idx = index\">\n            <li *ngIf=\"!v.item.separator\" kendoDrawerItem\n                class=\"k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}\"\n                role=\"menuitem\"\n                [viewItem]=\"v\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"v.index\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\"\n                [tabindex]=\"v.index === 0 ? '0' : '-1'\">\n            </li>\n\n            <li *ngIf=\"v.item.separator\"\n                role=\"separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"v.item.cssClass\"\n                [ngStyle]=\"v.item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
             args: [{
@@ -134,7 +133,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 &nbsp;
             </li>
         </ng-container>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, DrawerItemComponent, NgClass, NgStyle]
                 }]
         }], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { itemTemplate: [{
                 type: Input

package/esm2020/drawer/template-directives/drawer-template.directive.mjs

@@ -17,11 +17,12 @@ export class DrawerTemplateDirective {
     }
 }
 DrawerTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerTemplateDirective, selector: "[kendoDrawerTemplate]", ngImport: i0 });
+DrawerTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerTemplateDirective, isStandalone: true, selector: "[kendoDrawerTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDrawerTemplate]'
+                    selector: '[kendoDrawerTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional

package/esm2020/drawer/template-directives/footer-template.directive.mjs

@@ -15,11 +15,12 @@ export class DrawerFooterTemplateDirective {
     }
 }
 DrawerFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerFooterTemplateDirective, selector: "[kendoDrawerFooterTemplate]", ngImport: i0 });
+DrawerFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerFooterTemplateDirective, isStandalone: true, selector: "[kendoDrawerFooterTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDrawerFooterTemplate]'
+                    selector: '[kendoDrawerFooterTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional

package/esm2020/drawer/template-directives/header-template.directive.mjs

@@ -15,11 +15,12 @@ export class DrawerHeaderTemplateDirective {
     }
 }
 DrawerHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerHeaderTemplateDirective, selector: "[kendoDrawerHeaderTemplate]", ngImport: i0 });
+DrawerHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerHeaderTemplateDirective, isStandalone: true, selector: "[kendoDrawerHeaderTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDrawerHeaderTemplate]'
+                    selector: '[kendoDrawerHeaderTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional

package/esm2020/drawer/template-directives/item-template.directive.mjs

@@ -15,11 +15,12 @@ export class DrawerItemTemplateDirective {
     }
 }
 DrawerItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DrawerItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerItemTemplateDirective, selector: "[kendoDrawerItemTemplate]", ngImport: i0 });
+DrawerItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DrawerItemTemplateDirective, isStandalone: true, selector: "[kendoDrawerItemTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoDrawerItemTemplate]'
+                    selector: '[kendoDrawerItemTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional