@progress/kendo-angular-layout 17.0.0-develop.8 → 17.0.0

package/{esm2020 → esm2022}/card/card.component.mjs

@@ -12,30 +12,8 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Represents the [Kendo UI Card component for Angular]({% slug overview_card %})
  */
 export class CardComponent {
-    constructor(localizationService) {
-        this.localizationService = localizationService;
-        this.hostClass = true;
-        /**
-         * Specifies the layout of the Card content.
-         *
-         * The possible values are:
-         * * (Default) `vertical`
-         * * `horizontal`
-         *
-         */
-        this.orientation = 'vertical';
-        /**
-         * Defines the width of the Card.
-         * Defaults to `285px`.
-         */
-        this.width = '285px';
-        this.rtl = false;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-    }
+    localizationService;
+    hostClass = true;
     get widthStyle() {
         return this.width;
     }
@@ -45,23 +23,51 @@ export class CardComponent {
     get horizontal() {
         return this.orientation === 'horizontal';
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Specifies the layout of the Card content.
+     *
+     * The possible values are:
+     * * (Default) `vertical`
+     * * `horizontal`
+     *
+     */
+    orientation = 'vertical';
+    /**
+     * Defines the width of the Card.
+     * Defaults to `285px`.
+     */
+    width = '285px';
+    dynamicRTLSubscription;
+    rtl = false;
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+    }
     ngOnDestroy() {
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
     }
-}
-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, 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,
-            useValue: 'kendo.card.component'
-        }
-    ], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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,
+                useValue: 'kendo.card.component'
+            }
+        ], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-card',

package/{esm2020 → esm2022}/card/directives/card-media.directive.mjs

@@ -8,13 +8,11 @@ import * as i0 from "@angular/core";
  * Specifies any media that will be displayed and aligned in the Card.
  */
 export class CardMediaDirective {
-    constructor() {
-        this.hostClass = true;
-    }
+    hostClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardMediaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CardMediaDirective, isStandalone: true, selector: "[kendoCardMedia]", host: { properties: { "class.k-card-media": "this.hostClass" } }, ngImport: i0 });
 }
-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, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardMediaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardMedia]',

package/{esm2020 → esm2022}/card/directives/card-separator.directive.mjs

@@ -8,27 +8,29 @@ import * as i0 from "@angular/core";
  * Specifies a separator in the content of the Card.
  */
 export class CardSeparatorDirective {
-    constructor() {
-        this.hostClass = true;
-        /**
-         * Specifies the orientation of the Card separator.
-         *
-         * The possible values are:
-         * (Default) `horizontal`
-         * `vertical`
-         */
-        this.orientation = 'horizontal';
-    }
+    hostClass = true;
     get verticalClass() {
         return this.orientation === 'vertical';
     }
     get horizontalClass() {
         return this.orientation === 'horizontal';
     }
+    /**
+     * Sets the color of the Card separator.
+     */
+    color;
+    /**
+     * Specifies the orientation of the Card separator.
+     *
+     * The possible values are:
+     * (Default) `horizontal`
+     * `vertical`
+     */
+    orientation = 'horizontal';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSeparatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", 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 });
 }
-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, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSeparatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardSeparator]',

package/{esm2020 → esm2022}/card/directives/card-subtitle.directive.mjs

@@ -8,13 +8,11 @@ import * as i0 from "@angular/core";
  * Specifies the text and styles for the subtitle of the Card.
  */
 export class CardSubtitleDirective {
-    constructor() {
-        this.hostClass = true;
-    }
+    hostClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CardSubtitleDirective, isStandalone: true, selector: "[kendoCardSubtitle]", host: { properties: { "class.k-card-subtitle": "this.hostClass" } }, ngImport: i0 });
 }
-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, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardSubtitle]',

package/{esm2020 → esm2022}/card/directives/card-title.directive.mjs

@@ -8,13 +8,11 @@ import * as i0 from "@angular/core";
  * Specifies the text and styles for the title of the Card.
  */
 export class CardTitleDirective {
-    constructor() {
-        this.hostClass = true;
-    }
+    hostClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CardTitleDirective, isStandalone: true, selector: "[kendoCardTitle]", host: { properties: { "class.k-card-title": "this.hostClass" } }, ngImport: i0 });
 }
-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, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoCardTitle]',

package/{esm2020 → esm2022}/card/models/card-action.mjs

@@ -6,4 +6,16 @@
  * The settings of the Card action buttons.
  */
 export class CardAction {
+    /**
+     * Determines if the action button is styled as a primary button.
+     */
+    primary;
+    /**
+     * Determines if the action button is styled as a flat button.
+     */
+    flat;
+    /**
+     * The text of the action button.
+     */
+    text;
 }

package/{esm2020 → esm2022}/card.module.mjs

@@ -20,11 +20,11 @@ import * as i9 from "./card/directives/card-title.directive";
  * definition for the Card component.
  */
 export class CardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: 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, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_CARD],

package/{esm2020 → esm2022}/common/preventable-event.mjs

@@ -6,13 +6,7 @@
  * @hidden
  */
 export class PreventableEvent {
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        this.prevented = false;
-        Object.assign(this, args);
-    }
+    prevented = false;
     /**
      * Prevents the default action for a specified event.
      * In this way, the source component suppresses
@@ -31,4 +25,10 @@ export class PreventableEvent {
     isDefaultPrevented() {
         return this.prevented;
     }
+    /**
+     * @hidden
+     */
+    constructor(args) {
+        Object.assign(this, args);
+    }
 }

package/{esm2020 → esm2022}/drawer/drawer-container.component.mjs

@@ -13,14 +13,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Serves as a container for the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}) and its content.
  */
 export class DrawerContainerComponent {
-    constructor(localizationService) {
-        this.localizationService = localizationService;
-        this.rtl = false;
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-    }
+    localizationService;
     get hostClass() {
         return true;
     }
@@ -36,6 +29,23 @@ export class DrawerContainerComponent {
     get isExpandedClass() {
         return this.drawer.expanded;
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * @hidden
+     */
+    drawer;
+    dynamicRTLSubscription;
+    rtl = false;
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+    }
     ngOnDestroy() {
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
@@ -57,19 +67,19 @@ export class DrawerContainerComponent {
             this.drawer.toggle(false);
         }
     }
-}
-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, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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>
         <ng-content></ng-content>
     `, 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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-drawer-container',

package/{esm2020 → esm2022}/drawer/drawer-content.component.mjs

@@ -8,15 +8,14 @@ import * as i0 from "@angular/core";
  * Represents the content of the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
  */
 export class DrawerContentComponent {
-    constructor() {
-        this.hostClasses = true;
-    }
-}
-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, isStandalone: true, selector: "kendo-drawer-content", host: { properties: { "class.k-drawer-content": "this.hostClasses" } }, ngImport: i0, template: `
+    hostClasses = true;
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-drawer-content',

package/{esm2020 → esm2022}/drawer/drawer.component.mjs

@@ -53,101 +53,11 @@ const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
  * ```
  */
 export class DrawerComponent {
-    constructor(element, builder, localizationService, drawerService) {
-        this.element = element;
-        this.builder = builder;
-        this.localizationService = localizationService;
-        this.drawerService = drawerService;
-        this.hostClasses = true;
-        /**
-         * Specifies the mode in which the Drawer will be displayed.
-         *
-         * The possible values are:
-         * * (Default) `overlay`
-         * * `push`
-         */
-        this.mode = 'overlay';
-        /**
-         * Specifies the position of the Drawer
-         * ([see example]({% slug positioning_drawer %})).
-         *
-         * The possible values are:
-         * * (Default) `start`
-         * * `end`
-         */
-        this.position = 'start';
-        /**
-         * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
-         * ([see example]({% slug expandmodespositions_drawer %}#toc-mini-view)).
-         */
-        this.mini = false;
-        /**
-         * Specifies the state of the Drawer.
-         */
-        this.expanded = false;
-        /**
-         * Defines the width of the Drawer when it is expanded.
-         * Defaults to `240`.
-         */
-        this.width = 240;
-        /**
-         * Defines the width of the Drawer when the mini view is enabled
-         * and the component is collapsed. Defaults to `60`.
-         */
-        this.miniWidth = 50;
-        /**
-         * Specifies if the Drawer will be automatically collapsed when an item
-         * or the overlay is clicked. Defaults to `true`.
-         */
-        this.autoCollapse = true;
-        /**
-         * The collection of items that will be rendered in the Drawer.
-         */
-        this.items = [];
-        /**
-         * Specifies the animation settings of the Drawer.
-         * ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
-         *
-         * The possible values are:
-         * * Boolean
-         *    * (Default) `true`
-         *    * `false`
-         * * `DrawerAnimation`
-         *    * (Default) `type?: 'slide'`
-         *    * `duration`—Accepts a number in milliseconds. Defaults to `300ms`.
-         */
-        this.animation = DEFAULT_ANIMATION;
-        /**
-         * Fires when the Drawer is expanded and its animation is complete.
-         */
-        this.expand = new EventEmitter();
-        /**
-         * Fires when the Drawer is collapsed and its animation is complete.
-         */
-        this.collapse = new EventEmitter();
-        /**
-         * Fires when a Drawer item is selected. This event is preventable.
-         */
-        this.select = new EventEmitter();
-        /**
-         * Fires when the `expanded` property of the component was updated.
-         * Used to provide a two-way binding for the `expanded` property.
-         */
-        this.expandedChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this.animationEnd = new EventEmitter();
-        this.rtl = false;
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-        this.drawerService.owner = this;
-    }
+    element;
+    builder;
+    localizationService;
+    drawerService;
+    hostClasses = true;
     get startPositionClass() {
         return this.position === 'start';
     }
@@ -172,6 +82,51 @@ export class DrawerComponent {
         }
         return this.drawerWidth;
     }
+    /**
+     * Specifies the mode in which the Drawer will be displayed.
+     *
+     * The possible values are:
+     * * (Default) `overlay`
+     * * `push`
+     */
+    mode = 'overlay';
+    /**
+     * Specifies the position of the Drawer
+     * ([see example]({% slug positioning_drawer %})).
+     *
+     * The possible values are:
+     * * (Default) `start`
+     * * `end`
+     */
+    position = 'start';
+    /**
+     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
+     * ([see example]({% slug expandmodespositions_drawer %}#toc-mini-view)).
+     */
+    mini = false;
+    /**
+     * Specifies the state of the Drawer.
+     */
+    expanded = false;
+    /**
+     * Defines the width of the Drawer when it is expanded.
+     * Defaults to `240`.
+     */
+    width = 240;
+    /**
+     * Defines the width of the Drawer when the mini view is enabled
+     * and the component is collapsed. Defaults to `60`.
+     */
+    miniWidth = 50;
+    /**
+     * Specifies if the Drawer will be automatically collapsed when an item
+     * or the overlay is clicked. Defaults to `true`.
+     */
+    autoCollapse = true;
+    /**
+     * The collection of items that will be rendered in the Drawer.
+     */
+    items = [];
     /**
      * Defines a callback function which determines if an item should be expanded.
      */
@@ -184,6 +139,77 @@ export class DrawerComponent {
     get isItemExpanded() {
         return this.drawerService.isItemExpanded;
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Specifies the animation settings of the Drawer.
+     * ([see example]({% slug interaction_drawer %}#toc-toggling-between-states)).
+     *
+     * The possible values are:
+     * * Boolean
+     *    * (Default) `true`
+     *    * `false`
+     * * `DrawerAnimation`
+     *    * (Default) `type?: 'slide'`
+     *    * `duration`—Accepts a number in milliseconds. Defaults to `300ms`.
+     */
+    animation = DEFAULT_ANIMATION;
+    /**
+     * Fires when the Drawer is expanded and its animation is complete.
+     */
+    expand = new EventEmitter();
+    /**
+     * Fires when the Drawer is collapsed and its animation is complete.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Fires when a Drawer item is selected. This event is preventable.
+     */
+    select = new EventEmitter();
+    /**
+     * Fires when the `expanded` property of the component was updated.
+     * Used to provide a two-way binding for the `expanded` property.
+     */
+    expandedChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    drawerTemplate;
+    /**
+     * @hidden
+     */
+    footerTemplate;
+    /**
+     * @hidden
+     */
+    headerTemplate;
+    /**
+     * @hidden
+     */
+    itemTemplate;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    viewItems;
+    animationEnd = new EventEmitter();
+    dynamicRTLSubscription;
+    rtl = false;
+    constructor(element, builder, localizationService, drawerService) {
+        this.element = element;
+        this.builder = builder;
+        this.localizationService = localizationService;
+        this.drawerService = drawerService;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+        this.drawerService.owner = this;
+    }
     ngOnChanges(changes) {
         if (changes && changes['items']) {
             this.drawerService.resetSelection();
@@ -279,16 +305,15 @@ export class DrawerComponent {
         });
         return player;
     }
-}
-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, 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,
-        {
-            provide: L10N_PREFIX,
-            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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "16.2.12", 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,
+            {
+                provide: L10N_PREFIX,
+                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"
@@ -318,7 +343,8 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></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]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DrawerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoDrawer',