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

package/dist/fesm5/index.js

@@ -21,7 +21,7 @@ var 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'
 };
@@ -707,7 +707,7 @@ var PanelBarItemComponent = /** @class */ (function () {
             ],
             exportAs: 'kendoPanelbarItem',
             selector: "kendo-panelbar-item",
-            template: "\n            <span\n                #header\n                [class.k-link]=\"true\"\n                [class.k-state-selected]=\"!disabled && selected\"\n                [class.k-state-focused]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\n                <span\n                    *ngIf=\"icon || iconClass\"\n                    class=\"k-icon k-panelbar-item-icon\"\n                    [ngClass]=\"iconClasses\">\n                </span>\n                <img\n                    *ngIf=\"imageUrl\"\n                    class=\"k-image k-panelbar-item-icon\"\n                    [src]=\"imageUrl\"\n                    alt=\"\">\n                <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n                <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-template>\n                <span *ngIf=\"hasChildItems || hasContent\"\n                    class=\"k-icon k-panelbar-toggle\"\n                    [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n                </span>\n            </span>\n            <div #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                        <ng-content select=\"kendo-panelbar-item\"></ng-content>\n                </div>\n                <div\n                    *ngIf=\"hasContent && !content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
+            template: "\n            <span\n                #header\n                [class.k-link]=\"true\"\n                [class.k-state-selected]=\"!disabled && selected\"\n                [class.k-state-focused]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\n                <span\n                    *ngIf=\"icon || iconClass\"\n                    class=\"k-icon k-panelbar-item-icon\"\n                    [ngClass]=\"iconClasses\">\n                </span>\n                <img\n                    *ngIf=\"imageUrl\"\n                    class=\"k-image k-panelbar-item-icon\"\n                    [src]=\"imageUrl\"\n                    alt=\"\">\n                <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n                <ng-template *ngIf=\"titleTemplate\"\n                [ngTemplateOutlet]=\"titleTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    item: {\n                        title: title,\n                        id: id,\n                        icon: icon,\n                        iconClass: iconClass,\n                        imageUrl: imageUrl,\n                        selected: selected,\n                        expanded: expanded,\n                        disabled: disabled,\n                        focused: focused,\n                        content: content\n                    }\n                }\"></ng-template>\n                <span *ngIf=\"hasChildItems || hasContent\"\n                    class=\"k-icon k-panelbar-toggle\"\n                    [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n                </span>\n            </span>\n            <div #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                        <ng-content select=\"kendo-panelbar-item\"></ng-content>\n                </div>\n                <div\n                    *ngIf=\"hasContent && !content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
         }),
         __param(0, SkipSelf()), __param(0, Host()), __param(0, Optional()),
         __metadata("design:paramtypes", [PanelBarItemComponent,
@@ -735,6 +735,71 @@ var PanelBarItemTemplateDirective = /** @class */ (function () {
     return PanelBarItemTemplateDirective;
 }());
 
+/**
+ * @hidden
+ */
+var PreventableEvent$1 = /** @class */ (function () {
+    /**
+     * @hidden
+     */
+    function PreventableEvent$$1(args) {
+        this.prevented = false;
+        Object.assign(this, args);
+    }
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses
+     * the built-in behavior that follows the event.
+     */
+    PreventableEvent$$1.prototype.preventDefault = function () {
+        this.prevented = true;
+    };
+    /**
+     * Returns `true` if the event was prevented
+     * by any of its subscribers.
+     *
+     * @returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    PreventableEvent$$1.prototype.isDefaultPrevented = function () {
+        return this.prevented;
+    };
+    return PreventableEvent$$1;
+}());
+
+/**
+ * Arguments for the `collapse` event of the PanelBar.
+ */
+var PanelBarCollapseEvent = /** @class */ (function (_super) {
+    __extends(PanelBarCollapseEvent, _super);
+    function PanelBarCollapseEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return PanelBarCollapseEvent;
+}(PreventableEvent$1));
+
+/**
+ * Arguments for the `expand` event of the PanelBar.
+ */
+var PanelBarExpandEvent = /** @class */ (function (_super) {
+    __extends(PanelBarExpandEvent, _super);
+    function PanelBarExpandEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return PanelBarExpandEvent;
+}(PreventableEvent$1));
+
+/**
+ * Arguments for the `select` event of the PanelBar.
+ */
+var PanelBarSelectEvent = /** @class */ (function (_super) {
+    __extends(PanelBarSelectEvent, _super);
+    function PanelBarSelectEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return PanelBarSelectEvent;
+}(PreventableEvent$1));
+
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
  */
@@ -765,17 +830,35 @@ var PanelBarComponent = /** @class */ (function () {
          * 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;
@@ -787,7 +870,7 @@ var PanelBarComponent = /** @class */ (function () {
                 childrenHeight += item.headerHeight();
             });
             _this.childrenItems.forEach(function (item) {
-                item.contentHeight = PanelBarExpandMode.Full === _this.expandMode ? (panelbarHeight - childrenHeight) + "px" : 'auto';
+                item.contentHeight = PanelBarExpandMode.Full === _this.expandMode ? (panelbarHeight - childrenHeight) + 'px' : 'auto';
                 item.contentOverflow = contentOverflow;
             });
         };
@@ -839,7 +922,7 @@ var PanelBarComponent = /** @class */ (function () {
     });
     Object.defineProperty(PanelBarComponent.prototype, "overflow", {
         get: function () {
-            return this.expandMode === PanelBarExpandMode.Full ? "hidden" : "visible";
+            return this.expandMode === PanelBarExpandMode.Full ? 'hidden' : 'visible';
         },
         enumerable: true,
         configurable: true
@@ -906,7 +989,7 @@ var PanelBarComponent = /** @class */ (function () {
         this.validateConfiguration();
     };
     PanelBarComponent.prototype.ngOnChanges = function (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);
             }
@@ -957,7 +1040,7 @@ var PanelBarComponent = /** @class */ (function () {
     PanelBarComponent.prototype.onComponentBlur = function () {
         this.eventService.onBlur();
         this.focused = false;
-        this.activeDescendant = "";
+        this.activeDescendant = '';
     };
     /**
      * @hidden
@@ -976,6 +1059,26 @@ var PanelBarComponent = /** @class */ (function () {
             }
         }
     };
+    /**
+     * @hidden
+     */
+    PanelBarComponent.prototype.emitEvent = function (event, item) {
+        var 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;
+    };
     Object.defineProperty(PanelBarComponent.prototype, "viewItems", {
         get: function () {
             var treeItems = [];
@@ -991,7 +1094,7 @@ var PanelBarComponent = /** @class */ (function () {
     PanelBarComponent.prototype.validateConfiguration = function () {
         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.');
             }
         }
     };
@@ -1007,30 +1110,69 @@ var PanelBarComponent = /** @class */ (function () {
             var 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);
+                var 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) {
+                var 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 {
             var siblings = item.parent ? item.parent.childrenItems : this.childrenItems;
-            if (item.hasChildItems || item.hasContent) {
+            var preventedCollapseItem_1;
+            var expandedItems_1 = [];
+            if ((item.hasChildItems || item.hasContent) && item.selected) {
                 siblings
                     .forEach(function (currentItem) {
                     var expandedState = currentItem === item;
                     if (currentItem.expanded !== expandedState) {
-                        currentItem.expanded = expandedState;
-                        if (modifiedItems.indexOf(currentItem) < 0) {
-                            modifiedItems.push(currentItem);
+                        var isEventPrevented = currentItem.expanded ?
+                            _this.emitEvent('collapse', currentItem).isDefaultPrevented() :
+                            _this.emitEvent('expand', currentItem).isDefaultPrevented();
+                        if (!isEventPrevented) {
+                            currentItem.expanded = expandedState;
+                            if (currentItem.expanded) {
+                                expandedItems_1.push(currentItem);
+                            }
+                            if (modifiedItems.indexOf(currentItem) < 0) {
+                                modifiedItems.push(currentItem);
+                            }
+                        }
+                        else if (isEventPrevented && currentItem.expanded) {
+                            preventedCollapseItem_1 = currentItem;
+                        }
+                    }
+                    else if (currentItem.expanded === expandedState && expandedState) {
+                        var isCollapsePrevented = _this.emitEvent('collapse', currentItem).isDefaultPrevented();
+                        if (!isCollapsePrevented) {
+                            currentItem.expanded = !currentItem.expanded;
+                            if (modifiedItems.indexOf(currentItem) < 0) {
+                                modifiedItems.push(currentItem);
+                            }
+                        }
+                    }
+                });
+                expandedItems_1.forEach(function (item) {
+                    if (preventedCollapseItem_1 && item.id !== preventedCollapseItem_1.id) {
+                        item.expanded = false;
+                        if (isDevMode()) {
+                            var expandMode = PanelBarExpandMode[_this.expandMode].toLowerCase();
+                            console.warn("\n                            The " + expandMode + " expandMode allows the expansion of only one item at a time.\n                            See https://www.telerik.com/kendo-angular-ui-develop/components/layout/panelbar/expand-modes/");
                         }
                     }
                 });
@@ -1063,16 +1205,16 @@ var PanelBarComponent = /** @class */ (function () {
             currentIndex = visibleItems.findIndex(function (item) { return 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:
@@ -1089,16 +1231,16 @@ var PanelBarComponent = /** @class */ (function () {
         this.stateChange.emit(modifiedItems);
     };
     PanelBarComponent.prototype.focusLastItem = function () {
-        this.focusItem("lastItem");
+        this.focusItem('lastItem');
     };
     PanelBarComponent.prototype.focusFirstItem = function () {
-        this.focusItem("firstItem");
+        this.focusItem('firstItem');
     };
     PanelBarComponent.prototype.focusNextItem = function () {
-        this.focusItem("nextItem");
+        this.focusItem('nextItem');
     };
     PanelBarComponent.prototype.focusPreviousItem = function () {
-        this.focusItem("previousItem");
+        this.focusItem('previousItem');
     };
     PanelBarComponent.prototype.expandItem = function () {
         var currentItem = this.allItems.filter(function (item) { return item.focused; })[0];
@@ -1182,6 +1324,18 @@ var PanelBarComponent = /** @class */ (function () {
         Output(),
         __metadata("design:type", EventEmitter)
     ], PanelBarComponent.prototype, "stateChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PanelBarComponent.prototype, "select", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PanelBarComponent.prototype, "expand", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PanelBarComponent.prototype, "collapse", void 0);
     __decorate([
         HostBinding('attr.tabIndex'),
         __metadata("design:type", Number)
@@ -1265,7 +1419,7 @@ var PanelBarComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-panelbar',
-            template: "\n        <ng-content *ngIf=\"contentChildItems && !items\" select=\"kendo-panelbar-item\"></ng-content>\n        <ng-template [ngIf]=\"items?.length\">\n            <ng-container *ngFor=\"let item of items\">\n                <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                     [title]=\"item.title\"\n                     [id]=\"item.id\"\n                     [icon]=\"item.icon\"\n                     [iconClass]=\"item.iconClass\"\n                     [imageUrl]=\"item.imageUrl\"\n                     [selected]=\"!!item.selected\"\n                     [expanded]=\"!!item.expanded\"\n                     [disabled]=\"!!item.disabled\"\n                     [template]=\"templateRef\"\n                     [items]=\"item.children\"\n                     [content]=\"item.content\"\n                >\n                </kendo-panelbar-item>\n            </ng-container>\n        </ng-template>\n    "
+            template: "\n        <ng-content *ngIf=\"contentChildItems && !items\" select=\"kendo-panelbar-item\"></ng-content>\n        <ng-template [ngIf]=\"items?.length\">\n            <ng-container *ngFor=\"let item of items\">\n                <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                    [title]=\"item.title\"\n                    [id]=\"item.id\"\n                    [icon]=\"item.icon\"\n                    [iconClass]=\"item.iconClass\"\n                    [imageUrl]=\"item.imageUrl\"\n                    [selected]=\"!!item.selected\"\n                    [expanded]=\"!!item.expanded\"\n                    [disabled]=\"!!item.disabled\"\n                    [template]=\"templateRef\"\n                    [items]=\"item.children\"\n                    [content]=\"item.content\"\n                >\n                </kendo-panelbar-item>\n            </ng-container>\n        </ng-template>\n    "
         })
         // TODO: add styles as input prop
         ,
@@ -2655,38 +2809,6 @@ var DIRECTION_CLASSES = {
  */
 var DEFAULT_SCROLL_BEHAVIOR = 'smooth';
 
-/**
- * @hidden
- */
-var PreventableEvent$1 = /** @class */ (function () {
-    /**
-     * @hidden
-     */
-    function PreventableEvent$$1(args) {
-        this.prevented = false;
-        Object.assign(this, args);
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    PreventableEvent$$1.prototype.preventDefault = function () {
-        this.prevented = true;
-    };
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    PreventableEvent$$1.prototype.isDefaultPrevented = function () {
-        return this.prevented;
-    };
-    return PreventableEvent$$1;
-}());
-
 /**
  * Arguments for the `tabScroll` event of the TabStrip.
  * The `tabScroll` event fires when the tabs are being scrolled.
@@ -9176,4 +9298,4 @@ var LayoutModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { PreventableEvent$1 as PreventableEvent, DrawerService, DrawerItemComponent, DrawerListComponent, DRAWER_ITEM_INDEX, PanelBarService, SplitterBarComponent, SplitterService, StepperListComponent, StepperMessages, STEPPER_STEP_INDEX, StepperStepComponent, StepperService, TabStripMessages, TabComponent, TabStripScrollableButtonComponent, ScrollService, TabStripService, TileLayoutDraggingService, PreventableEvent$2 as PreventableEvent$1, TileLayoutResizeHandleDirective, PanelBarComponent, PanelBarItemComponent, PanelBarContentDirective, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarExpandMode, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective, TabTitleDirective, LocalizedTabStripMessagesDirective, TabStripCustomMessagesComponent, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerSelectEvent, StepperComponent, StepperActivateEvent, StepperCustomMessagesComponent, LocalizedStepperMessagesDirective, AvatarComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CardActionsComponent, CardSeparatorDirective, CardTitleDirective, CardSubtitleDirective, CardMediaDirective, CardAction, ExpansionPanelComponent, ExpansionPanelTitleDirective, ExpansionPanelActionEvent, TileLayoutComponent, TileLayoutItemComponent, TileLayoutItemBodyComponent, TileLayoutItemHeaderComponent, TileLayoutReorderEvent, TileLayoutResizeEvent, AvatarModule, CardModule, DrawerModule, LayoutModule, PanelBarModule, SplitterModule, StepperModule, TabStripModule, ExpansionPanelModule, TileLayoutModule, StackLayoutModule, GridLayoutModule, StackLayoutComponent, GridLayoutComponent, GridLayoutItemComponent, TabCloseEvent, SelectEvent, DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective };
+export { PreventableEvent$1 as PreventableEvent, DrawerService, DrawerItemComponent, DrawerListComponent, DRAWER_ITEM_INDEX, PanelBarService, SplitterBarComponent, SplitterService, StepperListComponent, StepperMessages, STEPPER_STEP_INDEX, StepperStepComponent, StepperService, TabStripMessages, TabComponent, TabStripScrollableButtonComponent, ScrollService, TabStripService, TileLayoutDraggingService, PreventableEvent$2 as PreventableEvent$1, TileLayoutResizeHandleDirective, PanelBarComponent, PanelBarItemComponent, PanelBarContentDirective, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarExpandMode, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective, TabTitleDirective, LocalizedTabStripMessagesDirective, TabStripCustomMessagesComponent, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerSelectEvent, StepperComponent, StepperActivateEvent, StepperCustomMessagesComponent, LocalizedStepperMessagesDirective, AvatarComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CardActionsComponent, CardSeparatorDirective, CardTitleDirective, CardSubtitleDirective, CardMediaDirective, CardAction, ExpansionPanelComponent, ExpansionPanelTitleDirective, ExpansionPanelActionEvent, TileLayoutComponent, TileLayoutItemComponent, TileLayoutItemBodyComponent, TileLayoutItemHeaderComponent, TileLayoutReorderEvent, TileLayoutResizeEvent, AvatarModule, CardModule, DrawerModule, LayoutModule, PanelBarModule, SplitterModule, StepperModule, TabStripModule, ExpansionPanelModule, TileLayoutModule, StackLayoutModule, GridLayoutModule, StackLayoutComponent, GridLayoutComponent, GridLayoutItemComponent, PanelBarCollapseEvent, PanelBarExpandEvent, PanelBarSelectEvent, TabCloseEvent, SelectEvent, DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective };

package/dist/npm/main.js

@@ -17,6 +17,7 @@ var panelbar_item_title_directive_1 = require("./panelbar/panelbar-item-title.di
 exports.PanelBarItemTitleDirective = panelbar_item_title_directive_1.PanelBarItemTitleDirective;
 var panelbar_expand_mode_1 = require("./panelbar/panelbar-expand-mode");
 exports.PanelBarExpandMode = panelbar_expand_mode_1.PanelBarExpandMode;
+tslib_1.__exportStar(require("./panelbar/events"), exports);
 var splitter_component_1 = require("./splitter/splitter.component");
 exports.SplitterComponent = splitter_component_1.SplitterComponent;
 var splitter_pane_component_1 = require("./splitter/splitter-pane.component");

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.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/npm/panelbar/events/collapse-event.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var preventable_event_1 = require("../../common/preventable-event");
+/**
+ * Arguments for the `collapse` event of the PanelBar.
+ */
+var PanelBarCollapseEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(PanelBarCollapseEvent, _super);
+    function PanelBarCollapseEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return PanelBarCollapseEvent;
+}(preventable_event_1.PreventableEvent));
+exports.PanelBarCollapseEvent = PanelBarCollapseEvent;

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

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var preventable_event_1 = require("../../common/preventable-event");
+/**
+ * Arguments for the `expand` event of the PanelBar.
+ */
+var PanelBarExpandEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(PanelBarExpandEvent, _super);
+    function PanelBarExpandEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return PanelBarExpandEvent;
+}(preventable_event_1.PreventableEvent));
+exports.PanelBarExpandEvent = PanelBarExpandEvent;

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

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var preventable_event_1 = require("../../common/preventable-event");
+/**
+ * Arguments for the `select` event of the PanelBar.
+ */
+var PanelBarSelectEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(PanelBarSelectEvent, _super);
+    function PanelBarSelectEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return PanelBarSelectEvent;
+}(preventable_event_1.PreventableEvent));
+exports.PanelBarSelectEvent = PanelBarSelectEvent;

package/dist/npm/panelbar/events.js

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var collapse_event_1 = require("./events/collapse-event");
+exports.PanelBarCollapseEvent = collapse_event_1.PanelBarCollapseEvent;
+var expand_event_1 = require("./events/expand-event");
+exports.PanelBarExpandEvent = expand_event_1.PanelBarExpandEvent;
+var select_event_1 = require("./events/select-event");
+exports.PanelBarSelectEvent = select_event_1.PanelBarSelectEvent;

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

@@ -444,7 +444,7 @@ var PanelBarItemComponent = /** @class */ (function () {
             ],
             exportAs: 'kendoPanelbarItem',
             selector: "kendo-panelbar-item",
-            template: "\n            <span\n                #header\n                [class.k-link]=\"true\"\n                [class.k-state-selected]=\"!disabled && selected\"\n                [class.k-state-focused]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\n                <span\n                    *ngIf=\"icon || iconClass\"\n                    class=\"k-icon k-panelbar-item-icon\"\n                    [ngClass]=\"iconClasses\">\n                </span>\n                <img\n                    *ngIf=\"imageUrl\"\n                    class=\"k-image k-panelbar-item-icon\"\n                    [src]=\"imageUrl\"\n                    alt=\"\">\n                <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n                <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-template>\n                <span *ngIf=\"hasChildItems || hasContent\"\n                    class=\"k-icon k-panelbar-toggle\"\n                    [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n                </span>\n            </span>\n            <div #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                        <ng-content select=\"kendo-panelbar-item\"></ng-content>\n                </div>\n                <div\n                    *ngIf=\"hasContent && !content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
+            template: "\n            <span\n                #header\n                [class.k-link]=\"true\"\n                [class.k-state-selected]=\"!disabled && selected\"\n                [class.k-state-focused]=\"focused && wrapperFocused\"\n                (click)=\"onItemClick($event)\">\n                <span\n                    *ngIf=\"icon || iconClass\"\n                    class=\"k-icon k-panelbar-item-icon\"\n                    [ngClass]=\"iconClasses\">\n                </span>\n                <img\n                    *ngIf=\"imageUrl\"\n                    class=\"k-image k-panelbar-item-icon\"\n                    [src]=\"imageUrl\"\n                    alt=\"\">\n                <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n                <ng-template *ngIf=\"titleTemplate\"\n                [ngTemplateOutlet]=\"titleTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    item: {\n                        title: title,\n                        id: id,\n                        icon: icon,\n                        iconClass: iconClass,\n                        imageUrl: imageUrl,\n                        selected: selected,\n                        expanded: expanded,\n                        disabled: disabled,\n                        focused: focused,\n                        content: content\n                    }\n                }\"></ng-template>\n                <span *ngIf=\"hasChildItems || hasContent\"\n                    class=\"k-icon k-panelbar-toggle\"\n                    [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n                </span>\n            </span>\n            <div #contentWrapper\n                *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n                [@toggle]=\"state\"\n                [attr.role]=\"'group'\"\n                [attr.aria-hidden]=\"!disabled && !expanded\">\n                <div\n                    *ngIf=\"hasChildItems && !items?.length\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                        <ng-content select=\"kendo-panelbar-item\"></ng-content>\n                </div>\n                <div\n                    *ngIf=\"hasContent && !content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                </div>\n                <div *ngIf=\"hasItems\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-panel k-group k-panelbar-group\">\n                    <ng-container *ngFor=\"let item of items\">\n                        <kendo-panelbar-item *ngIf=\"!item.hidden\"\n                            [title]=\"item.title\"\n                            [id]=\"item.id\"\n                            [icon]=\"item.icon\"\n                            [iconClass]=\"item.iconClass\"\n                            [imageUrl]=\"item.imageUrl\"\n                            [selected]=\"!!item.selected\"\n                            [expanded]=\"!!item.expanded\"\n                            [disabled]=\"!!item.disabled\"\n                            [template]=\"template\"\n                            [items]=\"item.children\"\n                            [content]=\"item.content\">\n                        </kendo-panelbar-item>\n                    </ng-container>\n                </div>\n                <div\n                    *ngIf=\"content\"\n                    [style.overflow]=\"contentOverflow\"\n                    [style.height]=\"contentHeight\"\n                    class=\"k-content k-panelbar-content\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"template\"\n                        [ngTemplateOutletContext]=\"{\n                            $implicit: {\n                                title: title,\n                                id: id,\n                                icon: icon,\n                                imageUrl: imageUrl,\n                                disabled: disabled,\n                                content: content\n                            }\n                        }\">\n                    </ng-template>\n                    <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n                </div>\n            </div>"
         }),
         tslib_1.__param(0, core_1.SkipSelf()), tslib_1.__param(0, core_1.Host()), tslib_1.__param(0, core_1.Optional()),
         tslib_1.__metadata("design:paramtypes", [PanelBarItemComponent,