@progress/kendo-angular-layout 7.0.3-dev.202206061201 → 7.1.0-dev.202206080813

package/drawer/drawer.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ElementRef, EventEmitter, OnDestroy, SimpleChange } from '@angular/core';
 import { DrawerMode, DrawerPosition, DrawerAnimation } from './types';
 import { DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective } from './template-directives';
 import { DrawerService } from './drawer.service';
@@ -10,6 +10,8 @@ import { DrawerSelectEvent } from './events/select-event';
 import { AnimationBuilder } from '@angular/animations';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { DrawerListSelectEvent } from './events/drawer-list-select.event';
+import { DrawerViewItem } from './models/drawer-view-item.interface';
+import { DrawerItemExpandedFn } from './models/drawer-item-expand.interface';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
@@ -96,8 +98,12 @@ export declare class DrawerComponent implements OnDestroy {
     /**
      * The collection of items that will be rendered in the Drawer.
      */
-    set items(items: any[]);
-    get items(): any[];
+    items: any[];
+    /**
+     * Defines a callback function which determines if an item should be expanded.
+     */
+    set isItemExpanded(fn: DrawerItemExpandedFn);
+    get isItemExpanded(): DrawerItemExpandedFn;
     /**
      * @hidden
      */
@@ -148,11 +154,12 @@ export declare class DrawerComponent implements OnDestroy {
      * @hidden
      */
     itemTemplate: DrawerItemTemplateDirective;
+    viewItems: DrawerViewItem[];
     private animationEnd;
     private dynamicRTLSubscription;
     private rtl;
-    private _items;
     constructor(element: ElementRef, builder: AnimationBuilder, localizationService: LocalizationService, drawerService: DrawerService);
+    ngOnChanges(changes: SimpleChange): void;
     ngOnDestroy(): void;
     /**
      * @hidden
@@ -177,5 +184,5 @@ export declare class DrawerComponent implements OnDestroy {
     private animate;
     private createPlayer;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "kendo-drawer", ["kendoDrawer"], { "mode": "mode"; "position": "position"; "mini": "mini"; "expanded": "expanded"; "width": "width"; "miniWidth": "miniWidth"; "autoCollapse": "autoCollapse"; "items": "items"; "animation": "animation"; }, { "expand": "expand"; "collapse": "collapse"; "select": "select"; "expandedChange": "expandedChange"; }, ["drawerTemplate", "footerTemplate", "headerTemplate", "itemTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "kendo-drawer", ["kendoDrawer"], { "mode": "mode"; "position": "position"; "mini": "mini"; "expanded": "expanded"; "width": "width"; "miniWidth": "miniWidth"; "autoCollapse": "autoCollapse"; "items": "items"; "isItemExpanded": "isItemExpanded"; "animation": "animation"; }, { "expand": "expand"; "collapse": "collapse"; "select": "select"; "expandedChange": "expandedChange"; }, ["drawerTemplate", "footerTemplate", "headerTemplate", "itemTemplate"], never>;
 }

package/drawer/drawer.service.d.ts

@@ -2,15 +2,31 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { DrawerItemExpandedFn } from './models/drawer-item-expand.interface';
+import { DrawerViewItem } from './models/drawer-view-item.interface';
 import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare const defaultIsItemExpanded: (_item: any) => boolean;
 /**
  * @hidden
  */
 export declare class DrawerService {
     owner: any;
     selectedIndices: Array<number>;
+    viewData: Set<DrawerViewItem>;
+    private originalItems;
+    private idxCounter;
+    init(): void;
+    get view(): Array<DrawerViewItem>;
+    private populateViewData;
+    private resetViewData;
+    private loadChildren;
+    isItemExpanded: DrawerItemExpandedFn;
     onSelect(selectedIdx: number): void;
-    initSelection(): void;
+    private setSelection;
+    resetSelection(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DrawerService>;
 }

package/drawer/item.component.d.ts

@@ -2,17 +2,18 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TemplateRef, ElementRef, Renderer2 } from "@angular/core";
+import { TemplateRef, ElementRef, Renderer2, AfterViewInit } from "@angular/core";
 import { DrawerService } from './drawer.service';
+import { DrawerViewItem } from "./models/drawer-view-item.interface";
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class DrawerItemComponent {
+export declare class DrawerItemComponent implements AfterViewInit {
     drawer: DrawerService;
     private element;
     private renderer;
-    item: any;
+    viewItem: DrawerViewItem;
     index: number;
     itemTemplate: TemplateRef<any>;
     mini: boolean;
@@ -24,14 +25,9 @@ export declare class DrawerItemComponent {
     get selectedClass(): boolean;
     get label(): boolean;
     constructor(drawer: DrawerService, element: ElementRef, renderer: Renderer2);
-    /**
-     * @hidden
-     */
     ngAfterViewInit(): void;
-    /**
-     * @hidden
-     */
     get iconClasses(): string[];
+    get item(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerItemComponent, "[kendoDrawerItem]", never, { "item": "item"; "index": "index"; "itemTemplate": "itemTemplate"; "mini": "mini"; "expanded": "expanded"; "disabled": "disabled"; "cssClass": "cssClass"; "cssStyle": "cssStyle"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerItemComponent, "[kendoDrawerItem]", never, { "viewItem": "viewItem"; "index": "index"; "itemTemplate": "itemTemplate"; "mini": "mini"; "expanded": "expanded"; "disabled": "disabled"; "cssClass": "cssClass"; "cssStyle": "cssStyle"; }, {}, never, never>;
 }

package/drawer/list.component.d.ts

@@ -2,9 +2,10 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, NgZone, OnDestroy, OnInit, Renderer2, TemplateRef, ChangeDetectorRef, EventEmitter } from "@angular/core";
+import { ElementRef, NgZone, OnDestroy, OnInit, Renderer2, TemplateRef, EventEmitter } from "@angular/core";
 import { DrawerService } from './drawer.service';
 import { DrawerListSelectEvent } from './events/drawer-list-select.event';
+import { DrawerViewItem } from './models/drawer-view-item.interface';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -13,22 +14,21 @@ export declare class DrawerListComponent implements OnInit, OnDestroy {
     private drawerService;
     private renderer;
     private ngZone;
-    private changeDetector;
     element: ElementRef;
-    items: any[];
     itemTemplate: TemplateRef<any>;
     mini: boolean;
     expanded: boolean;
+    view: DrawerViewItem[];
     select: EventEmitter<DrawerListSelectEvent>;
     private subscriptions;
-    constructor(drawerService: DrawerService, renderer: Renderer2, ngZone: NgZone, changeDetector: ChangeDetectorRef, element: ElementRef);
+    constructor(drawerService: DrawerService, renderer: Renderer2, ngZone: NgZone, element: ElementRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    private initialSelection;
+    identifyItem(_index: number, viewItem: DrawerViewItem): any;
     private initDomEvents;
     private clickHandler;
     private keyDownHandler;
     private getDrawerItemIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerListComponent, "[kendoDrawerList]", never, { "items": "items"; "itemTemplate": "itemTemplate"; "mini": "mini"; "expanded": "expanded"; }, { "select": "select"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerListComponent, "[kendoDrawerList]", never, { "itemTemplate": "itemTemplate"; "mini": "mini"; "expanded": "expanded"; "view": "view"; }, { "select": "select"; }, never, never>;
 }

package/drawer/models/drawer-item-expand.interface.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the callback that is used by the [isItemExpanded]({% slug api_layout_drawercomponent %}#toc-isItemExpanded) property. ([see example]({% slug hierarchical_drawer %})).
+ */
+export declare type DrawerItemExpandedFn = (item: any) => boolean;

package/drawer/models/drawer-item.interface.d.ts

@@ -31,6 +31,14 @@ export interface DrawerItem {
      * Allows the usage of custom icons.
      */
     iconClass?: string;
+    /**
+     * Specifies the id of the Drawer item.
+     */
+    id?: number | string;
+    /**
+     * Specifies the parentId of the Drawer item.
+     */
+    parentId?: number | string;
     /**
      * Specifies if the Drawer item is initially selected.
      */

package/drawer/models/drawer-view-item.interface.d.ts

@@ -0,0 +1,29 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export interface DrawerViewItem {
+    /**
+     * A reference to the original data item
+     */
+    item: any;
+    /**
+     * The item index in the view data items collection
+     */
+    index: number;
+    /**
+     * The hierarchical level of the item
+     */
+    level: number;
+    /**
+     * Indicates whether the item has children
+     */
+    hasChildren: boolean;
+    /**
+     * Indicates whether the item is currently expanded
+     */
+    isExpanded: boolean;
+}

package/esm2015/drawer/drawer.component.js

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, isDevMode } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective } from './template-directives';
@@ -97,6 +97,10 @@ export class DrawerComponent {
          * 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)).
@@ -129,7 +133,6 @@ export class DrawerComponent {
         this.expandedChange = new EventEmitter();
         this.animationEnd = new EventEmitter();
         this.rtl = false;
-        this._items = [];
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
@@ -162,16 +165,23 @@ export class DrawerComponent {
         return this.drawerWidth;
     }
     /**
-     * The collection of items that will be rendered in the Drawer.
+     * Defines a callback function which determines if an item should be expanded.
      */
-    set items(items) {
-        if (isPresent(items)) {
-            this._items = items;
-            this.drawerService.initSelection();
+    set isItemExpanded(fn) {
+        if (isDevMode && isPresent(fn) && typeof fn !== 'function') {
+            throw new Error(`isItemExpanded must be a function, but received ${JSON.stringify(fn)}.`);
         }
+        this.drawerService.isItemExpanded = fn;
     }
-    get items() {
-        return this._items;
+    get isItemExpanded() {
+        return this.drawerService.isItemExpanded;
+    }
+    ngOnChanges(changes) {
+        if (changes && changes['items']) {
+            this.drawerService.resetSelection();
+            this.drawerService.init();
+            this.viewItems = this.drawerService.view;
+        }
     }
     ngOnDestroy() {
         if (this.dynamicRTLSubscription) {
@@ -263,14 +273,14 @@ export class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: DrawerComponent, selector: "kendo-drawer", inputs: { mode: "mode", position: "position", mini: "mini", expanded: "expanded", width: "width", miniWidth: "miniWidth", autoCollapse: "autoCollapse", items: "items", animation: "animation" }, outputs: { expand: "expand", collapse: "collapse", select: "select", expandedChange: "expandedChange" }, host: { properties: { "class.k-widget": "this.hostClasses", "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: "12.0.0", version: "12.2.16", 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-widget": "this.hostClasses", "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"], ngImport: i0, template: `
+    ], 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"
@@ -279,7 +289,9 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
 
                 <ul kendoDrawerList
                     (select)="onSelect($event)"
-                    [items]="items" [mini]="mini" [expanded]="expanded"
+                    [mini]="mini"
+                    [expanded]="expanded"
+                    [view]="viewItems"
                     [itemTemplate]="itemTemplate?.templateRef"
                     class="k-drawer-items">
                 </ul>
@@ -293,7 +305,7 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
             </ng-template>
         </div>
-    `, isInline: true, components: [{ type: i4.DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["items", "itemTemplate", "mini", "expanded"], outputs: ["select"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i4.DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -316,7 +328,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
                 <ul kendoDrawerList
                     (select)="onSelect($event)"
-                    [items]="items" [mini]="mini" [expanded]="expanded"
+                    [mini]="mini"
+                    [expanded]="expanded"
+                    [view]="viewItems"
                     [itemTemplate]="itemTemplate?.templateRef"
                     class="k-drawer-items">
                 </ul>
@@ -366,6 +380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], items: [{
                 type: Input
+            }], isItemExpanded: [{
+                type: Input
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']

package/esm2015/drawer/drawer.service.js

@@ -3,13 +3,56 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
+import { isPresent } from '../common/util';
 import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export const defaultIsItemExpanded = (_item) => false;
 /**
  * @hidden
  */
 export class DrawerService {
     constructor() {
         this.selectedIndices = [];
+        this.originalItems = [];
+        this.idxCounter = 0;
+        this.isItemExpanded = defaultIsItemExpanded;
+    }
+    init() {
+        this.resetViewData();
+        this.originalItems = this.owner.items || [];
+        let rootItems = this.originalItems.filter(item => !isPresent(item.parentId));
+        this.populateViewData(rootItems);
+    }
+    get view() {
+        return Array.from(this.viewData);
+    }
+    populateViewData(items, level = 0) {
+        items.forEach((item) => {
+            this.setSelection(item);
+            const children = this.loadChildren(item);
+            const isExpanded = this.isItemExpanded(item);
+            this.viewData.add({
+                item: item,
+                index: this.idxCounter++,
+                level: level,
+                hasChildren: children.length > 0,
+                isExpanded: isExpanded
+            });
+            if (children.length > 0 && isExpanded) {
+                this.populateViewData(children, level + 1);
+            }
+        });
+    }
+    resetViewData() {
+        this.idxCounter = 0;
+        this.viewData = new Set();
+    }
+    loadChildren(item) {
+        return this.originalItems.filter(i => {
+            return isPresent(i.parentId) && (i.parentId === item.id);
+        });
     }
     onSelect(selectedIdx) {
         this.selectedIndices = [selectedIdx];
@@ -18,15 +61,14 @@ export class DrawerService {
             drawer.toggle(false);
         }
     }
-    initSelection() {
-        const items = this.owner.items;
-        this.selectedIndices = [];
-        for (let i = 0; i < items.length; i++) {
-            if (items[i].selected) {
-                this.selectedIndices.push(i);
-            }
+    setSelection(item) {
+        if (this.selectedIndices.length === 0 && item.selected) {
+            this.selectedIndices.push(this.idxCounter);
         }
     }
+    resetSelection() {
+        this.selectedIndices = [];
+    }
 }
 DrawerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 DrawerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerService });

package/esm2015/drawer/item.component.js

@@ -25,18 +25,13 @@ export class DrawerItemComponent {
     get label() {
         return this.item.text ? this.item.text : null;
     }
-    /**
-     * @hidden
-     */
     ngAfterViewInit() {
-        const link = nestedLink(this.element.nativeElement, DRAWER_LINK_SELECTOR);
+        const elem = this.element.nativeElement;
+        const link = nestedLink(elem, DRAWER_LINK_SELECTOR);
         if (link) {
             this.renderer.removeAttribute(link, 'tabindex');
         }
     }
-    /**
-     * @hidden
-     */
     get iconClasses() {
         const classes = [];
         if (this.item.icon) {
@@ -47,18 +42,31 @@ export class DrawerItemComponent {
         }
         return classes;
     }
+    get item() {
+        return this.viewItem.item;
+    }
 }
 DrawerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerItemComponent, deps: [{ token: i1.DrawerService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: { item: "item", index: "index", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-state-disabled": "this.disabledClass", "attr.aria-selected": "this.selectedClass", "class.k-state-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
+DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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-state-disabled": "this.disabledClass", "attr.aria-selected": "this.selectedClass", "class.k-state-selected": "this.selectedClass", "attr.aria-label": "this.label" } }, ngImport: i0, template: `
         <ng-template *ngIf="itemTemplate; else defaultTemplate"
             [ngTemplateOutlet]="itemTemplate"
-            [ngTemplateOutletContext]="{ $implicit: item }">
+            [ngTemplateOutletContext]="{
+                $implicit: item,
+                isItemExpanded: viewItem.isExpanded,
+                hasChildren: viewItem.hasChildren,
+                level: viewItem.level
+            }">
         </ng-template>
 
         <ng-template #defaultTemplate>
             <ng-container *ngIf="expanded">
                 <span [ngClass]="iconClasses"></span>
                 <span class="k-item-text">{{ item.text }}</span>
+                <span *ngIf="viewItem.hasChildren"
+                      class="k-icon k-drawer-toggle"
+                      [class.k-i-arrow-chevron-up]="viewItem.isExpanded"
+                      [class.k-i-arrow-chevron-down]="!viewItem.isExpanded"
+                ></span>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
                 <span [ngClass]="iconClasses"></span>
@@ -73,13 +81,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <ng-template *ngIf="itemTemplate; else defaultTemplate"
             [ngTemplateOutlet]="itemTemplate"
-            [ngTemplateOutletContext]="{ $implicit: item }">
+            [ngTemplateOutletContext]="{
+                $implicit: item,
+                isItemExpanded: viewItem.isExpanded,
+                hasChildren: viewItem.hasChildren,
+                level: viewItem.level
+            }">
         </ng-template>
 
         <ng-template #defaultTemplate>
             <ng-container *ngIf="expanded">
                 <span [ngClass]="iconClasses"></span>
                 <span class="k-item-text">{{ item.text }}</span>
+                <span *ngIf="viewItem.hasChildren"
+                      class="k-icon k-drawer-toggle"
+                      [class.k-i-arrow-chevron-up]="viewItem.isExpanded"
+                      [class.k-i-arrow-chevron-down]="!viewItem.isExpanded"
+                ></span>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
                 <span [ngClass]="iconClasses"></span>
@@ -87,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { item: [{
+        }], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { viewItem: [{
                 type: Input
             }], index: [{
                 type: Input

package/esm2015/drawer/list.component.js

@@ -17,27 +17,24 @@ import * as i3 from "@angular/common";
  * @hidden
  */
 export class DrawerListComponent {
-    constructor(drawerService, renderer, ngZone, changeDetector, element) {
+    constructor(drawerService, renderer, ngZone, element) {
         this.drawerService = drawerService;
         this.renderer = renderer;
         this.ngZone = ngZone;
-        this.changeDetector = changeDetector;
         this.element = element;
+        this.view = [];
         this.select = new EventEmitter();
         this.subscriptions = new Subscription();
     }
     ngOnInit() {
-        this.initialSelection();
         this.initDomEvents();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    initialSelection() {
-        /* Differentiates a user selected item */
-        if (this.drawerService.selectedIndices.length === 0) {
-            this.drawerService.initSelection();
-        }
+    identifyItem(_index, viewItem) {
+        var _a;
+        return (_a = viewItem.item.id) !== null && _a !== void 0 ? _a : viewItem.index;
     }
     initDomEvents() {
         if (!this.element) {
@@ -50,26 +47,27 @@ export class DrawerListComponent {
         });
     }
     clickHandler(e) {
-        const itemIdx = this.getDrawerItemIndex(e.target);
-        const item = this.items[itemIdx];
-        if (!item) {
+        const viewItemIdx = this.getDrawerItemIndex(e.target);
+        const viewItem = this.view[viewItemIdx];
+        if (!viewItem) {
             return;
         }
-        if (item.disabled) {
+        if (viewItem.item.disabled) {
             e.preventDefault();
             return;
         }
         const args = {
-            index: itemIdx,
-            item: item,
+            index: viewItem.index,
+            item: viewItem.item,
             originalEvent: e
         };
         this.ngZone.run(() => {
             const event = new DrawerListSelectEvent(args);
             this.select.emit(event);
             if (!event.isDefaultPrevented()) {
-                this.drawerService.onSelect(itemIdx);
-                this.changeDetector.detectChanges();
+                this.drawerService.onSelect(viewItemIdx);
+                this.drawerService.init();
+                this.view = this.drawerService.view;
             }
         });
     }
@@ -92,45 +90,45 @@ export class DrawerListComponent {
         }
     }
 }
-DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, deps: [{ token: i1.DrawerService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DrawerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { items: "items", itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded" }, outputs: { select: "select" }, ngImport: i0, template: "\n        <ng-container *ngFor=\"let item of items; let idx = index\">\n            <li *ngIf=\"!item.separator\" kendoDrawerItem\n                class=\"k-drawer-item\"\n                [item]=\"item\"\n                [index]=\"idx\"\n                [mini]=\"mini\"\n                [expanded]=\"expanded\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr.data-kendo-drawer-index]=\"idx\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                tabindex=\"0\">\n            </li>\n\n            <li *ngIf=\"item.separator\"\n                class=\"k-drawer-item k-drawer-separator\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\">\n                &nbsp;\n            </li>\n        </ng-container>\n    ", isInline: true, components: [{ type: i2.DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["item", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: { itemTemplate: "itemTemplate", mini: "mini", expanded: "expanded", view: "view" }, outputs: { select: "select" }, 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                [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=\"0\">\n            </li>\n\n            <li *ngIf=\"v.item.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, components: [{ type: i2.DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoDrawerList]',
                     template: `
-        <ng-container *ngFor="let item of items; let idx = index">
-            <li *ngIf="!item.separator" kendoDrawerItem
-                class="k-drawer-item"
-                [item]="item"
+        <ng-container *ngFor="let v of view; trackBy:identifyItem; let idx = index">
+            <li *ngIf="!v.item.separator" kendoDrawerItem
+                class="k-drawer-item {{expanded ? ' k-level-' + v.level : ''}}"
+                [viewItem]="v"
                 [index]="idx"
                 [mini]="mini"
                 [expanded]="expanded"
                 [itemTemplate]="itemTemplate"
-                [attr.${DRAWER_ITEM_INDEX}]="idx"
-                [ngClass]="item.cssClass"
-                [ngStyle]="item.cssStyle"
+                [attr.${DRAWER_ITEM_INDEX}]="v.index"
+                [ngClass]="v.item.cssClass"
+                [ngStyle]="v.item.cssStyle"
                 tabindex="0">
             </li>
 
-            <li *ngIf="item.separator"
+            <li *ngIf="v.item.separator"
                 class="k-drawer-item k-drawer-separator"
-                [ngClass]="item.cssClass"
-                [ngStyle]="item.cssStyle">
+                [ngClass]="v.item.cssClass"
+                [ngStyle]="v.item.cssStyle">
                 &nbsp;
             </li>
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { items: [{
-                type: Input
-            }], itemTemplate: [{
+        }], ctorParameters: function () { return [{ type: i1.DrawerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { itemTemplate: [{
                 type: Input
             }], mini: [{
                 type: Input
             }], expanded: [{
                 type: Input
+            }], view: [{
+                type: Input
             }], select: [{
                 type: Output
             }] } });