@progress/kendo-angular-layout 6.5.2 → 6.6.0-dev.202204071221

package/dist/es2015/main.d.ts

@@ -10,6 +10,7 @@ export { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template
 export { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
 export { PanelBarItemModel } from './panelbar/panelbar-item-model';
+export * from './panelbar/events';
 export { SplitterComponent } from './splitter/splitter.component';
 export { SplitterPaneComponent } from './splitter/splitter-pane.component';
 export { TabStripComponent } from './tabstrip/tabstrip.component';

package/dist/es2015/main.js

@@ -8,6 +8,7 @@ export { PanelBarContentDirective } from './panelbar/panelbar-content.directive'
 export { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
 export { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 export { PanelBarExpandMode } from './panelbar/panelbar-expand-mode';
+export * from './panelbar/events';
 export { SplitterComponent } from './splitter/splitter.component';
 export { SplitterPaneComponent } from './splitter/splitter-pane.component';
 export { TabStripComponent } from './tabstrip/tabstrip.component';

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647343533,
+    publishDate: 1649334013,
     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/dist/es2015/panelbar/events/collapse-event.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+import { PanelBarItemModel } from '../panelbar-item-model';
+/**
+ * Arguments for the `collapse` event of the PanelBar.
+ */
+export declare class PanelBarCollapseEvent extends PreventableEvent {
+    /**
+     * The item that will be collapsed.
+     */
+    item: PanelBarItemModel;
+}

package/dist/es2015/panelbar/events/collapse-event.js

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+/**
+ * Arguments for the `collapse` event of the PanelBar.
+ */
+export class PanelBarCollapseEvent extends PreventableEvent {
+}

package/dist/es2015/panelbar/events/expand-event.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+import { PanelBarItemModel } from '../panelbar-item-model';
+/**
+ * Arguments for the `expand` event of the PanelBar.
+ */
+export declare class PanelBarExpandEvent extends PreventableEvent {
+    /**
+     * The item that will be expanded.
+     */
+    item: PanelBarItemModel;
+}

package/dist/es2015/panelbar/events/expand-event.js

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+/**
+ * Arguments for the `expand` event of the PanelBar.
+ */
+export class PanelBarExpandEvent extends PreventableEvent {
+}

package/dist/es2015/panelbar/events/select-event.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+import { PanelBarItemModel } from '../panelbar-item-model';
+/**
+ * Arguments for the `select` event of the PanelBar.
+ */
+export declare class PanelBarSelectEvent extends PreventableEvent {
+    /**
+     * The item that will be selected.
+     */
+    item: PanelBarItemModel;
+}

package/dist/es2015/panelbar/events/select-event.js

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from '../../common/preventable-event';
+/**
+ * Arguments for the `select` event of the PanelBar.
+ */
+export class PanelBarSelectEvent extends PreventableEvent {
+}

package/dist/es2015/panelbar/events.d.ts

@@ -0,0 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { PanelBarCollapseEvent } from './events/collapse-event';
+export { PanelBarExpandEvent } from './events/expand-event';
+export { PanelBarSelectEvent } from './events/select-event';

package/dist/es2015/panelbar/events.js

@@ -0,0 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { PanelBarCollapseEvent } from './events/collapse-event';
+export { PanelBarExpandEvent } from './events/expand-event';
+export { PanelBarSelectEvent } from './events/select-event';

package/dist/es2015/panelbar/panelbar-item.component.js

@@ -404,7 +404,22 @@ PanelBarItemComponent = PanelBarItemComponent_1 = tslib_1.__decorate([
                     [src]="imageUrl"
                     alt="">
                 <ng-container *ngIf="!titleTemplate"><span class="k-panelbar-item-text">{{title}}</span></ng-container>
-                <ng-template *ngIf="titleTemplate" [ngTemplateOutlet]="titleTemplate"></ng-template>
+                <ng-template *ngIf="titleTemplate"
+                [ngTemplateOutlet]="titleTemplate"
+                [ngTemplateOutletContext]="{
+                    item: {
+                        title: title,
+                        id: id,
+                        icon: icon,
+                        iconClass: iconClass,
+                        imageUrl: imageUrl,
+                        selected: selected,
+                        expanded: expanded,
+                        disabled: disabled,
+                        focused: focused,
+                        content: content
+                    }
+                }"></ng-template>
                 <span *ngIf="hasChildItems || hasContent"
                     class="k-icon k-panelbar-toggle"
                     [ngClass]="{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}">

package/dist/es2015/panelbar/panelbar.component.d.ts

@@ -9,6 +9,7 @@ import { PanelBarItemComponent } from './panelbar-item.component';
 import { PanelBarItemModel } from './panelbar-item-model';
 import { PanelBarService } from "./panelbar.service";
 import { PanelBarItemTemplateDirective } from "./panelbar-item-template.directive";
+import { PanelBarSelectEvent, PanelBarExpandEvent, PanelBarCollapseEvent } from './events';
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
  */
@@ -55,6 +56,24 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
      * The event data contains all items that are modified.
      */
     stateChange: EventEmitter<any>;
+    /**
+     * Fires when an item is about to be selected.
+     * ([see example]({% slug events_panelbar %}))
+     * This event is preventable. If you cancel it, the item will not be selected.
+     */
+    select: EventEmitter<PanelBarSelectEvent>;
+    /**
+     * Fires when an item is about to be expanded.
+     * ([see example]({% slug events_panelbar %}))
+     * This event is preventable. If you cancel it, the item will remain collapsed.
+     */
+    expand: EventEmitter<PanelBarExpandEvent>;
+    /**
+     * Fires when an item is about to be collapsed.
+     * ([see example]({% slug events_panelbar %}))
+     * This event is preventable. If you cancel it, the item will remain expanded.
+     */
+    collapse: EventEmitter<PanelBarCollapseEvent>;
     tabIndex: number;
     role: string;
     hostClass: boolean;
@@ -105,6 +124,10 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
      * @hidden
      */
     onComponentKeyDown(event: any): void;
+    /**
+     * @hidden
+     */
+    emitEvent(event: string, item: PanelBarItemComponent): any;
     private readonly viewItems;
     private validateConfiguration;
     private updateChildrenHeight;

package/dist/es2015/panelbar/panelbar.component.js

@@ -14,6 +14,7 @@ import { PanelBarService } from "./panelbar.service";
 import { PanelBarItemTemplateDirective } from "./panelbar-item-template.directive";
 import util from "../common/util";
 import { isFocusable } from './../common/dom-queries';
+import { PanelBarSelectEvent, PanelBarExpandEvent, PanelBarCollapseEvent } from './events';
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
  */
@@ -45,17 +46,35 @@ class PanelBarComponent {
          * Sets the height of the component when the `"full"` expand mode is used.
          * This option is ignored in the `"multiple"` and `"single"` expand modes.
          */
-        this.height = "400px";
+        this.height = '400px';
         /**
          * Fires each time the user interacts with a PanelBar item
          * ([see example]({% slug routing_panelbar %}#toc-getting-the-selected-item)).
          * The event data contains all items that are modified.
          */
         this.stateChange = new EventEmitter();
+        /**
+         * Fires when an item is about to be selected.
+         * ([see example]({% slug events_panelbar %}))
+         * This event is preventable. If you cancel it, the item will not be selected.
+         */
+        this.select = new EventEmitter();
+        /**
+         * Fires when an item is about to be expanded.
+         * ([see example]({% slug events_panelbar %}))
+         * This event is preventable. If you cancel it, the item will remain collapsed.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when an item is about to be collapsed.
+         * ([see example]({% slug events_panelbar %}))
+         * This event is preventable. If you cancel it, the item will remain expanded.
+         */
+        this.collapse = new EventEmitter();
         this.tabIndex = 0;
-        this.role = "tree";
+        this.role = 'tree';
         this.hostClass = true;
-        this.activeDescendant = "";
+        this.activeDescendant = '';
         this.isViewInit = true;
         this.focused = false;
         this._keepItemContent = false;
@@ -67,7 +86,7 @@ class PanelBarComponent {
                 childrenHeight += item.headerHeight();
             });
             this.childrenItems.forEach(item => {
-                item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + "px" : 'auto';
+                item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + 'px' : 'auto';
                 item.contentOverflow = contentOverflow;
             });
         };
@@ -106,7 +125,7 @@ class PanelBarComponent {
         return this.expandMode === PanelBarExpandMode.Full ? this.height : 'auto';
     }
     get overflow() {
-        return this.expandMode === PanelBarExpandMode.Full ? "hidden" : "visible";
+        return this.expandMode === PanelBarExpandMode.Full ? 'hidden' : 'visible';
     }
     get dir() {
         return this.localization.rtl ? 'rtl' : 'ltr';
@@ -156,7 +175,7 @@ class PanelBarComponent {
         this.validateConfiguration();
     }
     ngOnChanges(changes) {
-        if (changes['height'] || changes['expandMode'] || changes["items"]) { // tslint:disable-line
+        if (changes['height'] || changes['expandMode'] || changes['items']) { // tslint:disable-line
             if (this.childrenItems) {
                 setTimeout(this.updateChildrenHeight);
             }
@@ -203,7 +222,7 @@ class PanelBarComponent {
     onComponentBlur() {
         this.eventService.onBlur();
         this.focused = false;
-        this.activeDescendant = "";
+        this.activeDescendant = '';
     }
     /**
      * @hidden
@@ -222,6 +241,26 @@ class PanelBarComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    emitEvent(event, item) {
+        let eventArgs;
+        switch (event) {
+            case 'select':
+                eventArgs = new PanelBarSelectEvent();
+                break;
+            case 'collapse':
+                eventArgs = new PanelBarCollapseEvent();
+                break;
+            default:
+                eventArgs = new PanelBarExpandEvent();
+                break;
+        }
+        eventArgs.item = item.serialize();
+        this[event].emit(eventArgs);
+        return eventArgs;
+    }
     get viewItems() {
         let treeItems = [];
         this.viewChildItems.toArray().forEach(item => {
@@ -233,7 +272,7 @@ class PanelBarComponent {
     validateConfiguration() {
         if (isDevMode()) {
             if (this.items && (this.contentItems && this.contentItems.length > 0)) {
-                throw new Error("Invalid configuration: mixed template components and items property.");
+                throw new Error('Invalid configuration: mixed template components and items property.');
             }
         }
     }
@@ -248,30 +287,71 @@ class PanelBarComponent {
             let focusedState = selectedState;
             selectedState = this.selectable ? selectedState : currentItem.selected;
             if (currentItem.selected !== selectedState || currentItem.focused !== focusedState) {
-                currentItem.selected = selectedState;
-                currentItem.focused = focusedState;
-                this.activeDescendant = focusedState ? currentItem.itemId : "";
-                modifiedItems.push(currentItem);
+                const isSelectPrevented = selectedState ? this.emitEvent('select', currentItem).isDefaultPrevented() : false;
+                if (!isSelectPrevented) {
+                    currentItem.selected = selectedState;
+                    currentItem.focused = focusedState;
+                    this.activeDescendant = focusedState ? currentItem.itemId : '';
+                    modifiedItems.push(currentItem);
+                }
             }
         });
         if (this.expandMode === PanelBarExpandMode.Multiple) {
-            if (item.hasChildItems || item.hasContent) {
-                item.expanded = !item.expanded;
-            }
-            if (modifiedItems.indexOf(item) < 0) {
-                modifiedItems.push(item);
+            if ((item.hasChildItems || item.hasContent) && item.selected) {
+                const isEventPrevented = item.expanded ?
+                    this.emitEvent('collapse', item).isDefaultPrevented() :
+                    this.emitEvent('expand', item).isDefaultPrevented();
+                if (!isEventPrevented) {
+                    item.expanded = !item.expanded;
+                    if (modifiedItems.indexOf(item) < 0) {
+                        modifiedItems.push(item);
+                    }
+                }
             }
         }
         else {
             let siblings = item.parent ? item.parent.childrenItems : this.childrenItems;
-            if (item.hasChildItems || item.hasContent) {
+            let preventedCollapseItem;
+            let expandedItems = [];
+            if ((item.hasChildItems || item.hasContent) && item.selected) {
                 siblings
                     .forEach((currentItem) => {
                     let expandedState = currentItem === item;
                     if (currentItem.expanded !== expandedState) {
-                        currentItem.expanded = expandedState;
-                        if (modifiedItems.indexOf(currentItem) < 0) {
-                            modifiedItems.push(currentItem);
+                        const isEventPrevented = currentItem.expanded ?
+                            this.emitEvent('collapse', currentItem).isDefaultPrevented() :
+                            this.emitEvent('expand', currentItem).isDefaultPrevented();
+                        if (!isEventPrevented) {
+                            currentItem.expanded = expandedState;
+                            if (currentItem.expanded) {
+                                expandedItems.push(currentItem);
+                            }
+                            if (modifiedItems.indexOf(currentItem) < 0) {
+                                modifiedItems.push(currentItem);
+                            }
+                        }
+                        else if (isEventPrevented && currentItem.expanded) {
+                            preventedCollapseItem = currentItem;
+                        }
+                    }
+                    else if (currentItem.expanded === expandedState && expandedState) {
+                        const isCollapsePrevented = this.emitEvent('collapse', currentItem).isDefaultPrevented();
+                        if (!isCollapsePrevented) {
+                            currentItem.expanded = !currentItem.expanded;
+                            if (modifiedItems.indexOf(currentItem) < 0) {
+                                modifiedItems.push(currentItem);
+                            }
+                        }
+                    }
+                });
+                expandedItems.forEach(item => {
+                    if (preventedCollapseItem && item.id !== preventedCollapseItem.id) {
+                        item.expanded = false;
+                        if (isDevMode()) {
+                            const expandMode = PanelBarExpandMode[this.expandMode].toLowerCase();
+                            console.warn(`
+                            The ${expandMode} expandMode allows the expansion of only one item at a time.
+                            See https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/expand-modes/`);
                         }
                     }
                 });
@@ -304,16 +384,16 @@ class PanelBarComponent {
             currentIndex = visibleItems.findIndex(item => item === currentItem);
         }
         switch (action) {
-            case "lastItem":
+            case 'lastItem':
                 nextItem = visibleItems[visibleItems.length - 1];
                 break;
-            case "firstItem":
+            case 'firstItem':
                 nextItem = visibleItems[0];
                 break;
-            case "nextItem":
+            case 'nextItem':
                 nextItem = visibleItems[currentIndex < visibleItems.length - 1 ? currentIndex + 1 : 0];
                 break;
-            case "previousItem":
+            case 'previousItem':
                 nextItem = visibleItems[currentIndex > 0 ? currentIndex - 1 : visibleItems.length - 1];
                 break;
             default:
@@ -330,16 +410,16 @@ class PanelBarComponent {
         this.stateChange.emit(modifiedItems);
     }
     focusLastItem() {
-        this.focusItem("lastItem");
+        this.focusItem('lastItem');
     }
     focusFirstItem() {
-        this.focusItem("firstItem");
+        this.focusItem('firstItem');
     }
     focusNextItem() {
-        this.focusItem("nextItem");
+        this.focusItem('nextItem');
     }
     focusPreviousItem() {
-        this.focusItem("previousItem");
+        this.focusItem('previousItem');
     }
     expandItem() {
         let currentItem = this.allItems.filter(item => item.focused)[0];
@@ -421,6 +501,18 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], PanelBarComponent.prototype, "stateChange", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], PanelBarComponent.prototype, "select", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], PanelBarComponent.prototype, "expand", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], PanelBarComponent.prototype, "collapse", void 0);
 tslib_1.__decorate([
     HostBinding('attr.tabIndex'),
     tslib_1.__metadata("design:type", Number)
@@ -509,17 +601,17 @@ PanelBarComponent = tslib_1.__decorate([
         <ng-template [ngIf]="items?.length">
             <ng-container *ngFor="let item of items">
                 <kendo-panelbar-item *ngIf="!item.hidden"
-                     [title]="item.title"
-                     [id]="item.id"
-                     [icon]="item.icon"
-                     [iconClass]="item.iconClass"
-                     [imageUrl]="item.imageUrl"
-                     [selected]="!!item.selected"
-                     [expanded]="!!item.expanded"
-                     [disabled]="!!item.disabled"
-                     [template]="templateRef"
-                     [items]="item.children"
-                     [content]="item.content"
+                    [title]="item.title"
+                    [id]="item.id"
+                    [icon]="item.icon"
+                    [iconClass]="item.iconClass"
+                    [imageUrl]="item.imageUrl"
+                    [selected]="!!item.selected"
+                    [expanded]="!!item.expanded"
+                    [disabled]="!!item.disabled"
+                    [template]="templateRef"
+                    [items]="item.children"
+                    [content]="item.content"
                 >
                 </kendo-panelbar-item>
             </ng-container>