@progress/kendo-angular-layout 7.0.2-dev.202205251252 → 7.1.0-dev.202206080813

package/esm2015/drawer/models/drawer-item-expand.interface.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/drawer/models/drawer-view-item.interface.js

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1653483097,
+    publishDate: 1654675998,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2015/tilelayout/dragging-service.js

@@ -5,7 +5,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { calculateCellFromPosition, getDropTarget, isRowItemPresent, normalizeValue, propsChanged, setElementStyles } from './util';
-import { closestInScope } from '../common/dom-queries';
+import { closestInScope, isFocusable } from '../common/dom-queries';
 import { DRAGGED_ZINDEX, HINT_BORDERS_HEIGHT, OVERLAP_THRESHOLD, REVERSE_OVERLAP_THRESHOLD } from './constants';
 import { TileLayoutReorderEvent } from './reorder-event';
 import { TileLayoutResizeEvent } from './resize-event';
@@ -57,7 +57,8 @@ export class TileLayoutDraggingService {
                 .find(item => item.order === +closestTile.style.order);
         });
         const reordering = !resizing && this.reorderable.getValue() && this.draggedItem.reorderable && closestHeader;
-        if (!(reordering || resizing)) {
+        const focusableTarget = isFocusable(originalEvent.target);
+        if (!(reordering || resizing) || focusableTarget) {
             return;
         }
         else {

package/esm2015/tilelayout/tilelayout.component.js

@@ -5,7 +5,7 @@
 import { Component, HostBinding, Input, Output, EventEmitter, ContentChildren, ViewChild } from '@angular/core';
 import { TileLayoutDraggingService } from './dragging-service';
 import { Subscription } from 'rxjs';
-import Draggable from '@telerik/kendo-draggable';
+import Draggable from '@progress/kendo-draggable';
 import { TileLayoutItemComponent } from './tilelayout-item.component';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { hasObservers } from '@progress/kendo-angular-common';

package/fesm2015/kendo-angular-layout.js

@@ -17,7 +17,7 @@ import { CommonModule } from '@angular/common';
 import { delay, takeUntil, map, tap, filter, switchMap, take } from 'rxjs/operators';
 import * as i4 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
-import Draggable from '@telerik/kendo-draggable';
+import Draggable from '@progress/kendo-draggable';
 
 /**
  * @hidden
@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1653483097,
+    publishDate: 1654675998,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -3949,12 +3949,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }] }]; } });
 
+/**
+ * @hidden
+ */
+const defaultIsItemExpanded = (_item) => false;
 /**
  * @hidden
  */
 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];
@@ -3963,15 +4005,14 @@ 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 });
@@ -4170,18 +4211,13 @@ 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) {
@@ -4192,18 +4228,31 @@ 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: 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>
@@ -4218,13 +4267,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>
@@ -4232,7 +4291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { item: [{
+        }], ctorParameters: function () { return [{ type: DrawerService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { viewItem: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -4269,27 +4328,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 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) {
@@ -4302,26 +4358,27 @@ 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;
             }
         });
     }
@@ -4344,45 +4401,45 @@ class DrawerListComponent {
         }
     }
 }
-DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, deps: [{ token: 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: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["item", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+DrawerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerListComponent, deps: [{ token: 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: DrawerItemComponent, selector: "[kendoDrawerItem]", inputs: ["viewItem", "index", "itemTemplate", "mini", "expanded", "disabled", "cssClass", "cssStyle"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.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: DrawerService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { items: [{
-                type: Input
-            }], itemTemplate: [{
+        }], ctorParameters: function () { return [{ type: 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
             }] } });
@@ -4467,6 +4524,10 @@ 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)).
@@ -4499,7 +4560,6 @@ 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;
@@ -4532,16 +4592,23 @@ 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) {
@@ -4633,14 +4700,14 @@ class DrawerComponent {
     }
 }
 DrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.AnimationBuilder }, { token: i1.LocalizationService }, { token: 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"
@@ -4649,7 +4716,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>
@@ -4663,7 +4732,7 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
             </ng-template>
         </div>
-    `, isInline: true, components: [{ type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["items", "itemTemplate", "mini", "expanded"], outputs: ["select"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -4686,7 +4755,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>
@@ -4736,6 +4807,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']
@@ -7410,7 +7483,8 @@ class TileLayoutDraggingService {
                 .find(item => item.order === +closestTile.style.order);
         });
         const reordering = !resizing && this.reorderable.getValue() && this.draggedItem.reorderable && closestHeader;
-        if (!(reordering || resizing)) {
+        const focusableTarget = isFocusable(originalEvent.target);
+        if (!(reordering || resizing) || focusableTarget) {
             return;
         }
         else {

package/main.d.ts

@@ -31,6 +31,7 @@ export { DrawerItem } from './drawer/models/drawer-item.interface';
 export { DrawerSelectEvent } from './drawer/events/select-event';
 export { DrawerPosition } from './drawer/models/position';
 export { DrawerMode } from './drawer/models/mode';
+export { DrawerItemExpandedFn } from './drawer/models/drawer-item-expand.interface';
 export * from './drawer/template-directives';
 export { StepperComponent } from './stepper/stepper.component';
 export { StepperActivateEvent } from './stepper/events/activate-event';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "7.0.2-dev.202205251252",
+  "version": "7.1.0-dev.202206080813",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@progress/kendo-schematics": "^3.0.0",
-    "@telerik/kendo-draggable": "^2.2.0",
+    "@progress/kendo-draggable": "^3.0.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
@@ -84,11 +84,11 @@
     "fallbackTags": {
       "dev": "latest"
     },
-    "analyzeCommits": "@telerik/semantic-prerelease/analyzeCommits",
+    "analyzeCommits": "@progress/semantic-prerelease/analyzeCommits",
     "generateNotes": "@progress/kendo-angular-tasks/lib/generateNotes",
-    "getLastRelease": "@telerik/semantic-prerelease/getLastRelease",
-    "verifyConditions": "@telerik/semantic-prerelease/verifyConditions",
-    "verifyRelease": "@telerik/semantic-prerelease/verifyRelease"
+    "getLastRelease": "@progress/semantic-prerelease/getLastRelease",
+    "verifyConditions": "@progress/semantic-prerelease/verifyConditions",
+    "verifyRelease": "@progress/semantic-prerelease/verifyRelease"
   },
   "main": "bundles/kendo-angular-layout.umd.js",
   "module": "fesm2015/kendo-angular-layout.js",