@progress/kendo-angular-layout 14.4.0-develop.19 → 14.4.0-develop.20

package/esm2020/common/util.mjs

@@ -24,7 +24,7 @@ const SHAPE_TO_ROUNDED = {
  */
 export const parsePanelBarItems = (data) => {
     return data.map((item) => {
-        if (!item.id) {
+        if (!isPresent(item.id)) {
             item.id = `default-${nextId++}`;
         }
         if (item.children) {

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1706287392,
-    version: '14.4.0-develop.19',
+    publishDate: 1706519724,
+    version: '14.4.0-develop.20',
     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/esm2020/panelbar/events/item-click-event.mjs

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Arguments for the `itemClick` event of the PanelBar.
+ */
+export class PanelBarItemClickEvent {
+}

package/esm2020/panelbar/events.mjs

@@ -6,3 +6,4 @@ export { PanelBarCollapseEvent } from './events/collapse-event';
 export { PanelBarExpandEvent } from './events/expand-event';
 export { PanelBarSelectEvent } from './events/select-event';
 export { PanelBarStateChangeEvent } from './events/state-change-event';
+export { PanelBarItemClickEvent } from './events/item-click-event';

package/esm2020/panelbar/panelbar-item.component.mjs

@@ -170,6 +170,7 @@ export class PanelBarItemComponent {
      */
     onItemClick(e) {
         if (!isFocusable(e.target)) {
+            this.eventService.itemClick.next({ item: this.serialize(), originalEvent: e });
             this.onItemAction();
         }
     }
@@ -217,7 +218,8 @@ export class PanelBarItemComponent {
             id: this.id,
             imageUrl: this.imageUrl,
             selected: this.selected,
-            title: this.title
+            title: this.title,
+            children: this.items
         };
     }
     /**

package/esm2020/panelbar/panelbar.component.mjs

@@ -12,6 +12,7 @@ import { PanelBarItemComponent } from './panelbar-item.component';
 import { PanelBarService } from "./panelbar.service";
 import { PanelBarItemTemplateDirective } from "./panelbar-item-template.directive";
 import { parsePanelBarItems } from "../common/util";
+import { Subscription } from 'rxjs';
 import { isFocusable } from './../common/dom-queries';
 import { PanelBarSelectEvent, PanelBarExpandEvent, PanelBarCollapseEvent, PanelBarStateChangeEvent } from './events';
 import * as i0 from "@angular/core";
@@ -75,6 +76,10 @@ export class PanelBarComponent {
          * This event is preventable. If you cancel it, the item will remain expanded.
          */
         this.collapse = new EventEmitter();
+        /**
+         * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+         */
+        this.itemClick = new EventEmitter();
         this.hostClasses = true;
         this.tabIndex = 0;
         this.role = 'tree';
@@ -86,6 +91,7 @@ export class PanelBarComponent {
         this.isViewInit = true;
         this.focused = false;
         this._keepItemContent = false;
+        this.subs = new Subscription();
         this.updateChildrenHeight = () => {
             let childrenHeight = 0;
             const panelbarHeight = this.elementRef.nativeElement.offsetHeight;
@@ -104,7 +110,8 @@ export class PanelBarComponent {
         this.keyBindings = this.computedKeys;
         this.elementRef = elementRef;
         this.eventService = eventService;
-        this.eventService.children$.subscribe(event => this.onItemAction(event));
+        this.subs.add(this.eventService.children$.subscribe(event => this.onItemAction(event)));
+        this.subs.add(this.eventService.itemClick.subscribe(ev => this.itemClick.emit(ev)));
     }
     /**
      * When set to `true`, the PanelBar renders the content of all items and they are persisted in the DOM
@@ -158,13 +165,10 @@ export class PanelBarComponent {
         };
     }
     ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     ngOnInit() {
-        this.localizationChangeSubscription = this.localization
-            .changes.subscribe(() => this.keyBindings = this.computedKeys);
+        this.subs.add(this.localization.changes.subscribe(() => this.keyBindings = this.computedKeys));
         this.eventService.animate = this.animate;
         this.eventService.expandMode = this.expandMode;
     }
@@ -489,7 +493,7 @@ export class PanelBarComponent {
     }
 }
 PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.PanelBarService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
+PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
         PanelBarService,
         LocalizationService,
         {
@@ -578,6 +582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], collapse: [{
                 type: Output
+            }], itemClick: [{
+                type: Output
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-panelbar']

package/esm2020/panelbar/panelbar.service.mjs

@@ -17,6 +17,7 @@ export class PanelBarService {
         this.parentSource = new Subject();
         this.keepContentSource = new BehaviorSubject(false);
         this.childSource = new Subject();
+        this.itemClick = new Subject();
         this.parent$ = this.parentSource.asObservable();
         this.children$ = this.childSource.asObservable();
         this.keepContent$ = this.keepContentSource.asObservable();

package/fesm2015/progress-kendo-angular-layout.mjs

@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1706287392,
-    version: '14.4.0-develop.19',
+    publishDate: 1706519724,
+    version: '14.4.0-develop.20',
     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'
 };
 
@@ -146,7 +146,7 @@ const SHAPE_TO_ROUNDED = {
  */
 const parsePanelBarItems = (data) => {
     return data.map((item) => {
-        if (!item.id) {
+        if (!isPresent(item.id)) {
             item.id = `default-${nextId$1++}`;
         }
         if (item.children) {
@@ -261,6 +261,7 @@ class PanelBarService {
         this.parentSource = new Subject();
         this.keepContentSource = new BehaviorSubject(false);
         this.childSource = new Subject();
+        this.itemClick = new Subject();
         this.parent$ = this.parentSource.asObservable();
         this.children$ = this.childSource.asObservable();
         this.keepContent$ = this.keepContentSource.asObservable();
@@ -440,6 +441,7 @@ class PanelBarItemComponent {
      */
     onItemClick(e) {
         if (!isFocusable(e.target)) {
+            this.eventService.itemClick.next({ item: this.serialize(), originalEvent: e });
             this.onItemAction();
         }
     }
@@ -487,7 +489,8 @@ class PanelBarItemComponent {
             id: this.id,
             imageUrl: this.imageUrl,
             selected: this.selected,
-            title: this.title
+            title: this.title,
+            children: this.items
         };
     }
     /**
@@ -981,6 +984,12 @@ class PanelBarSelectEvent extends PreventableEvent {
 class PanelBarStateChangeEvent {
 }
 
+/**
+ * Arguments for the `itemClick` event of the PanelBar.
+ */
+class PanelBarItemClickEvent {
+}
+
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
  */
@@ -1036,6 +1045,10 @@ class PanelBarComponent {
          * This event is preventable. If you cancel it, the item will remain expanded.
          */
         this.collapse = new EventEmitter();
+        /**
+         * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+         */
+        this.itemClick = new EventEmitter();
         this.hostClasses = true;
         this.tabIndex = 0;
         this.role = 'tree';
@@ -1047,6 +1060,7 @@ class PanelBarComponent {
         this.isViewInit = true;
         this.focused = false;
         this._keepItemContent = false;
+        this.subs = new Subscription();
         this.updateChildrenHeight = () => {
             let childrenHeight = 0;
             const panelbarHeight = this.elementRef.nativeElement.offsetHeight;
@@ -1065,7 +1079,8 @@ class PanelBarComponent {
         this.keyBindings = this.computedKeys;
         this.elementRef = elementRef;
         this.eventService = eventService;
-        this.eventService.children$.subscribe(event => this.onItemAction(event));
+        this.subs.add(this.eventService.children$.subscribe(event => this.onItemAction(event)));
+        this.subs.add(this.eventService.itemClick.subscribe(ev => this.itemClick.emit(ev)));
     }
     /**
      * When set to `true`, the PanelBar renders the content of all items and they are persisted in the DOM
@@ -1119,13 +1134,10 @@ class PanelBarComponent {
         };
     }
     ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     ngOnInit() {
-        this.localizationChangeSubscription = this.localization
-            .changes.subscribe(() => this.keyBindings = this.computedKeys);
+        this.subs.add(this.localization.changes.subscribe(() => this.keyBindings = this.computedKeys));
         this.eventService.animate = this.animate;
         this.eventService.expandMode = this.expandMode;
     }
@@ -1450,7 +1462,7 @@ class PanelBarComponent {
     }
 }
 PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
+PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
         PanelBarService,
         LocalizationService,
         {
@@ -1539,6 +1551,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], collapse: [{
                 type: Output
+            }], itemClick: [{
+                type: Output
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-panelbar']
@@ -10479,5 +10493,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
+export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemClickEvent, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
 

package/fesm2020/progress-kendo-angular-layout.mjs

@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1706287392,
-    version: '14.4.0-develop.19',
+    publishDate: 1706519724,
+    version: '14.4.0-develop.20',
     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'
 };
 
@@ -75,6 +75,7 @@ class PanelBarService {
         this.parentSource = new Subject();
         this.keepContentSource = new BehaviorSubject(false);
         this.childSource = new Subject();
+        this.itemClick = new Subject();
         this.parent$ = this.parentSource.asObservable();
         this.children$ = this.childSource.asObservable();
         this.keepContent$ = this.keepContentSource.asObservable();
@@ -180,7 +181,7 @@ const SHAPE_TO_ROUNDED = {
  */
 const parsePanelBarItems = (data) => {
     return data.map((item) => {
-        if (!item.id) {
+        if (!isPresent(item.id)) {
             item.id = `default-${nextId$1++}`;
         }
         if (item.children) {
@@ -438,6 +439,7 @@ class PanelBarItemComponent {
      */
     onItemClick(e) {
         if (!isFocusable(e.target)) {
+            this.eventService.itemClick.next({ item: this.serialize(), originalEvent: e });
             this.onItemAction();
         }
     }
@@ -485,7 +487,8 @@ class PanelBarItemComponent {
             id: this.id,
             imageUrl: this.imageUrl,
             selected: this.selected,
-            title: this.title
+            title: this.title,
+            children: this.items
         };
     }
     /**
@@ -975,6 +978,12 @@ class PanelBarSelectEvent extends PreventableEvent {
 class PanelBarStateChangeEvent {
 }
 
+/**
+ * Arguments for the `itemClick` event of the PanelBar.
+ */
+class PanelBarItemClickEvent {
+}
+
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
  */
@@ -1030,6 +1039,10 @@ class PanelBarComponent {
          * This event is preventable. If you cancel it, the item will remain expanded.
          */
         this.collapse = new EventEmitter();
+        /**
+         * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+         */
+        this.itemClick = new EventEmitter();
         this.hostClasses = true;
         this.tabIndex = 0;
         this.role = 'tree';
@@ -1041,6 +1054,7 @@ class PanelBarComponent {
         this.isViewInit = true;
         this.focused = false;
         this._keepItemContent = false;
+        this.subs = new Subscription();
         this.updateChildrenHeight = () => {
             let childrenHeight = 0;
             const panelbarHeight = this.elementRef.nativeElement.offsetHeight;
@@ -1059,7 +1073,8 @@ class PanelBarComponent {
         this.keyBindings = this.computedKeys;
         this.elementRef = elementRef;
         this.eventService = eventService;
-        this.eventService.children$.subscribe(event => this.onItemAction(event));
+        this.subs.add(this.eventService.children$.subscribe(event => this.onItemAction(event)));
+        this.subs.add(this.eventService.itemClick.subscribe(ev => this.itemClick.emit(ev)));
     }
     /**
      * When set to `true`, the PanelBar renders the content of all items and they are persisted in the DOM
@@ -1113,13 +1128,10 @@ class PanelBarComponent {
         };
     }
     ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
+        this.subs.unsubscribe();
     }
     ngOnInit() {
-        this.localizationChangeSubscription = this.localization
-            .changes.subscribe(() => this.keyBindings = this.computedKeys);
+        this.subs.add(this.localization.changes.subscribe(() => this.keyBindings = this.computedKeys));
         this.eventService.animate = this.animate;
         this.eventService.expandMode = this.expandMode;
     }
@@ -1444,7 +1456,7 @@ class PanelBarComponent {
     }
 }
 PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
+PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse", itemClick: "itemClick" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
         PanelBarService,
         LocalizationService,
         {
@@ -1533,6 +1545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], collapse: [{
                 type: Output
+            }], itemClick: [{
+                type: Output
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-panelbar']
@@ -10450,5 +10464,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
+export { AvatarComponent, AvatarCustomMessagesComponent, AvatarModule, CardAction, CardActionsComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardMediaDirective, CardModule, CardSeparatorDirective, CardSubtitleDirective, CardTitleDirective, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerFooterTemplateDirective, DrawerHeaderTemplateDirective, DrawerItemTemplateDirective, DrawerModule, DrawerSelectEvent, DrawerTemplateDirective, ExpansionPanelActionEvent, ExpansionPanelComponent, ExpansionPanelModule, ExpansionPanelTitleDirective, GridLayoutComponent, GridLayoutItemComponent, GridLayoutModule, LayoutModule, LocalizedAvatarMessagesDirective, LocalizedStepperMessagesDirective, LocalizedTabStripMessagesDirective, PanelBarCollapseEvent, PanelBarComponent, PanelBarContentDirective, PanelBarExpandEvent, PanelBarExpandMode, PanelBarItemClickEvent, PanelBarItemComponent, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarModule, PanelBarSelectEvent, PanelBarStateChangeEvent, SelectEvent, SplitterComponent, SplitterModule, SplitterPaneComponent, StackLayoutComponent, StackLayoutModule, StepperActivateEvent, StepperComponent, StepperCustomMessagesComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperModule, StepperStepTemplateDirective, TabCloseEvent, TabComponent, TabContentDirective, TabStripComponent, TabStripCustomMessagesComponent, TabStripModule, TabStripTabComponent, TabTemplateDirective, TabTitleDirective, TileLayoutComponent, TileLayoutItemBodyComponent, TileLayoutItemComponent, TileLayoutItemHeaderComponent, TileLayoutModule, TileLayoutReorderEvent, TileLayoutResizeEvent, TileLayoutResizeHandleDirective };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "14.4.0-develop.19",
+  "version": "14.4.0-develop.20",
   "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,16 +39,16 @@
     "@angular/core": "13 - 17",
     "@angular/platform-browser": "13 - 17",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "14.4.0-develop.19",
-    "@progress/kendo-angular-l10n": "14.4.0-develop.19",
-    "@progress/kendo-angular-progressbar": "14.4.0-develop.19",
-    "@progress/kendo-angular-icons": "14.4.0-develop.19",
-    "@progress/kendo-angular-buttons": "14.4.0-develop.19",
+    "@progress/kendo-angular-common": "14.4.0-develop.20",
+    "@progress/kendo-angular-l10n": "14.4.0-develop.20",
+    "@progress/kendo-angular-progressbar": "14.4.0-develop.20",
+    "@progress/kendo-angular-icons": "14.4.0-develop.20",
+    "@progress/kendo-angular-buttons": "14.4.0-develop.20",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "14.4.0-develop.19",
+    "@progress/kendo-angular-schematics": "14.4.0-develop.20",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/panelbar/events/item-click-event.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PanelBarItemModel } from '../panelbar-item-model';
+/**
+ * Arguments for the `itemClick` event of the PanelBar.
+ */
+export declare class PanelBarItemClickEvent {
+    /**
+     * The clicked item.
+     */
+    item: PanelBarItemModel;
+    /**
+     * The DOM event that triggered the `itemClick` event.
+     */
+    originalEvent: any;
+}

package/panelbar/events.d.ts

@@ -6,3 +6,4 @@ export { PanelBarCollapseEvent } from './events/collapse-event';
 export { PanelBarExpandEvent } from './events/expand-event';
 export { PanelBarSelectEvent } from './events/select-event';
 export { PanelBarStateChangeEvent } from './events/state-change-event';
+export { PanelBarItemClickEvent } from './events/item-click-event';

package/panelbar/panelbar.component.d.ts

@@ -9,7 +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, PanelBarStateChangeEvent } from './events';
+import { PanelBarSelectEvent, PanelBarExpandEvent, PanelBarCollapseEvent, PanelBarStateChangeEvent, PanelBarItemClickEvent } from './events';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
@@ -77,6 +77,10 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
      * This event is preventable. If you cancel it, the item will remain expanded.
      */
     collapse: EventEmitter<PanelBarCollapseEvent>;
+    /**
+     * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+     */
+    itemClick: EventEmitter<PanelBarItemClickEvent>;
     hostClasses: boolean;
     tabIndex: number;
     role: string;
@@ -92,7 +96,6 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
      * @hidden
      */
     showLicenseWatermark: boolean;
-    private localizationChangeSubscription;
     private allItems;
     private childrenItems;
     private isViewInit;
@@ -102,6 +105,7 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
     private elementRef;
     private eventService;
     private keyBindings;
+    private subs;
     constructor(elementRef: ElementRef, eventService: PanelBarService, localization: LocalizationService);
     /**
      * @hidden
@@ -153,5 +157,5 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
     private visibleItems;
     private flatVisibleItems;
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PanelBarComponent, "kendo-panelbar", ["kendoPanelbar"], { "expandMode": "expandMode"; "selectable": "selectable"; "animate": "animate"; "height": "height"; "keepItemContent": "keepItemContent"; "items": "items"; }, { "stateChange": "stateChange"; "select": "select"; "expand": "expand"; "collapse": "collapse"; }, ["template", "contentItems", "contentChildItems"], ["kendo-panelbar-item"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelBarComponent, "kendo-panelbar", ["kendoPanelbar"], { "expandMode": "expandMode"; "selectable": "selectable"; "animate": "animate"; "height": "height"; "keepItemContent": "keepItemContent"; "items": "items"; }, { "stateChange": "stateChange"; "select": "select"; "expand": "expand"; "collapse": "collapse"; "itemClick": "itemClick"; }, ["template", "contentItems", "contentChildItems"], ["kendo-panelbar-item"]>;
 }

package/panelbar/panelbar.service.d.ts

@@ -2,9 +2,10 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { PanelBarItemComponent } from "./panelbar-item.component";
 import { PanelBarExpandMode } from './panelbar-expand-mode';
+import { PanelBarItemClickEvent } from './events';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -16,6 +17,7 @@ export declare class PanelBarService {
     pbId: number;
     animate: boolean;
     expandMode: PanelBarExpandMode;
+    itemClick: Subject<PanelBarItemClickEvent>;
     private childSource;
     private keepContentSource;
     private parentSource;