@progress/kendo-angular-layout 17.0.0-develop.4 → 17.0.0-develop.40

package/{esm2020 → esm2022}/panelbar/panelbar-item-template.directive.mjs

@@ -8,13 +8,14 @@ import * as i0 from "@angular/core";
  * Represents the template directive of the PanelBar which helps to customize the item content.
  */
 export class PanelBarItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PanelBarItemTemplateDirective, isStandalone: true, selector: "[kendoPanelBarItemTemplate]", ngImport: i0 });
 }
-PanelBarItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PanelBarItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarItemTemplateDirective, isStandalone: true, selector: "[kendoPanelBarItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPanelBarItemTemplate]',

package/{esm2020 → esm2022}/panelbar/panelbar-item-title.directive.mjs

@@ -31,13 +31,14 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class PanelBarItemTitleDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarItemTitleDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PanelBarItemTitleDirective, isStandalone: true, selector: "[kendoPanelBarItemTitle]", ngImport: i0 });
 }
-PanelBarItemTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTitleDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-PanelBarItemTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarItemTitleDirective, isStandalone: true, selector: "[kendoPanelBarItemTitle]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarItemTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoPanelBarItemTitle]',

package/{esm2020 → esm2022}/panelbar/panelbar-item.component.mjs

@@ -24,55 +24,28 @@ let nextId = 0;
  * Represents the items of the PanelBar.
  */
 export class PanelBarItemComponent {
-    constructor(parent, eventService, element, renderer) {
-        this.parent = parent;
-        this.eventService = eventService;
-        this.element = element;
-        this.renderer = renderer;
-        /**
-         * Allows the component to set the `"id"` property to each item.
-         * Used to set the `id` attributes of the nested elements and to enable the WAI-ARIA support.
-         */
-        this.id = `default-${nextId++}`;
-        /**
-         * Defines the icon that will be rendered next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
-         */
-        this.icon = '';
-        /**
-         * Defines  the icon that will be rendered next to the title by using a custom CSS class
-         * ([see example]({% slug items_panelbar %}#toc-title-icons)).
-         */
-        this.iconClass = '';
-        /**
-         * Defines the location of the image that will be displayed next to the title
-         * ([see example]({% slug items_panelbar %}#toc-title-images)).
-         */
-        this.imageUrl = '';
-        /**
-         * When set to `true`, disables a PanelBar item ([see example]({% slug items_panelbar %}#toc-disabled-state)).
-         */
-        this.disabled = false;
-        /**
-         * Sets the selected state of a PanelBar item ([see example]({% slug items_panelbar %}#toc-selected-state)).
-         */
-        this.selected = false;
-        this.keepContent = false;
-        this.hasChildItems = false;
-        this.hasItems = false;
-        this.hasContent = false;
-        this.state = "inactive";
-        this.role = "treeitem";
-        this.titleAttribute = null; // eslint-disable-line
-        this.kItemClass = true;
-        this.focused = false;
-        this.wrapperFocused = false;
-        this.subscriptions = new Subscription(() => { });
-        this._expanded = false;
-        this.subscriptions.add(eventService.parent$.subscribe(focused => this.onWrapperFocusChange(focused)));
-        this.subscriptions.add(eventService.keepContent$.subscribe(keepContent => this.keepContent = keepContent));
-        this.wrapperFocused = parent ? parent.focused : false;
-        this.level = this.parent ? this.parent.level + 1 : 0;
-    }
+    parent;
+    eventService;
+    element;
+    renderer;
+    /**
+     * Sets the title of the PanelBar item ([see example]({% slug items_panelbar %}#toc-titles)).
+     */
+    title;
+    /**
+     * Allows the component to set the `"id"` property to each item.
+     * Used to set the `id` attributes of the nested elements and to enable the WAI-ARIA support.
+     */
+    id = `default-${nextId++}`;
+    /**
+     * Defines the icon that will be rendered next to the title ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     */
+    icon = '';
+    /**
+     * Defines  the icon that will be rendered next to the title by using a custom CSS class
+     * ([see example]({% slug items_panelbar %}#toc-title-icons)).
+     */
+    iconClass = '';
     /**
      * Defines an SVGIcon to be rendered.
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
@@ -86,6 +59,15 @@ export class PanelBarItemComponent {
     get svgIcon() {
         return this._svgIcon;
     }
+    /**
+     * Defines the location of the image that will be displayed next to the title
+     * ([see example]({% slug items_panelbar %}#toc-title-images)).
+     */
+    imageUrl = '';
+    /**
+     * When set to `true`, disables a PanelBar item ([see example]({% slug items_panelbar %}#toc-disabled-state)).
+     */
+    disabled = false;
     /**
      * When set to `true`, expands the PanelBar item ([see example]({% slug items_panelbar %}#toc-expanded-state)).
      */
@@ -100,9 +82,41 @@ export class PanelBarItemComponent {
     get expanded() {
         return this._expanded;
     }
+    /**
+     * Sets the selected state of a PanelBar item ([see example]({% slug items_panelbar %}#toc-selected-state)).
+     */
+    selected = false;
+    /**
+     * Sets the content of the PanelBar item.
+     * By design, it is used when the
+     * [items]({% slug api_layout_panelbarcomponent %}#toc-items)
+     * property of the PanelBar is set.
+     */
+    content;
+    /**
+     * @hidden
+     */
+    items;
+    /**
+     * @hidden
+     */
+    template;
+    header;
+    contentWrapper;
+    contentHeight;
+    contentOverflow;
+    keepContent = false;
+    childrenItems;
+    hasChildItems = false;
+    hasItems = false;
+    hasContent = false;
+    state = "inactive";
     get animate() {
         return this.eventService.animate;
     }
+    role = "treeitem";
+    titleAttribute = null; // eslint-disable-line
+    kItemClass = true;
     get kStateExpandedClass() {
         return !this.disabled && this.expanded && (this.hasChildItems || this.hasContent);
     }
@@ -127,6 +141,27 @@ export class PanelBarItemComponent {
     get titleTemplate() {
         return this.titleTemplates.length > 0 ? this.titleTemplates.toArray()[0].templateRef : undefined;
     }
+    viewChildItems;
+    contentItems;
+    //ContentChild does not support descendants property, so we use ContentChildren for contentTemplate instead
+    contentTemplate;
+    titleTemplates;
+    focused = false;
+    wrapperFocused = false;
+    subscriptions = new Subscription(() => { });
+    _expanded = false;
+    level;
+    _svgIcon;
+    constructor(parent, eventService, element, renderer) {
+        this.parent = parent;
+        this.eventService = eventService;
+        this.element = element;
+        this.renderer = renderer;
+        this.subscriptions.add(eventService.parent$.subscribe(focused => this.onWrapperFocusChange(focused)));
+        this.subscriptions.add(eventService.keepContent$.subscribe(keepContent => this.keepContent = keepContent));
+        this.wrapperFocused = parent ? parent.focused : false;
+        this.level = this.parent ? this.parent.level + 1 : 0;
+    }
     /**
      * @hidden
      */
@@ -273,9 +308,8 @@ export class PanelBarItemComponent {
     onWrapperFocusChange(focused) {
         this.wrapperFocused = focused;
     }
-}
-PanelBarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: i1.PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarItemComponent, isStandalone: true, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarItemComponent, deps: [{ token: PanelBarItemComponent, host: true, optional: true, skipSelf: true }, { token: i1.PanelBarService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PanelBarItemComponent, isStandalone: true, selector: "kendo-panelbar-item", inputs: { title: "title", id: "id", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl", disabled: "disabled", expanded: "expanded", selected: "selected", content: "content", items: "items", template: "template" }, host: { properties: { "attr.role": "this.role", "attr.title": "this.titleAttribute", "class.k-panelbar-item": "this.kItemClass", "class.k-expanded": "this.kStateExpandedClass", "id": "this.itemId", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-selected": "this.ariaSelected", "attr.aria-disabled": "this.ariaDisabled", "class.k-panelbar-header": "this.headerClass" } }, queries: [{ propertyName: "contentItems", predicate: PanelBarItemComponent }, { propertyName: "contentTemplate", predicate: PanelBarContentDirective }, { propertyName: "titleTemplates", predicate: PanelBarItemTitleDirective }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbarItem"], ngImport: i0, template: `
             <span
                 #header
                 [class.k-link]="true"
@@ -316,7 +350,7 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 }"></ng-template>
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
-                    [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
+                    [name]="expanded ? 'chevron-up' : 'chevron-down'"
                     [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >
@@ -398,19 +432,20 @@ PanelBarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                     <ng-template [ngIf]="!template">{{content}}</ng-template>
                 </div>
             </div>`, isInline: true, dependencies: [{ kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
-        trigger('toggle', [
-            state('inactive', style({ display: 'none' })),
-            transition('* => active', [
-                style({ overflow: 'hidden', display: 'block', height: 0 }),
-                animate(200, style({ height: AUTO_STYLE }))
-            ]),
-            transition('active => *', [
-                style({ overflow: 'hidden', height: AUTO_STYLE }),
-                animate(200, style({ height: 0, display: 'none' }))
+            trigger('toggle', [
+                state('inactive', style({ display: 'none' })),
+                transition('* => active', [
+                    style({ overflow: 'hidden', display: 'block', height: 0 }),
+                    animate(200, style({ height: AUTO_STYLE }))
+                ]),
+                transition('active => *', [
+                    style({ overflow: 'hidden', height: AUTO_STYLE }),
+                    animate(200, style({ height: 0, display: 'none' }))
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarItemComponent, decorators: [{
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarItemComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -469,7 +504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }"></ng-template>
                 <kendo-icon-wrapper
                     *ngIf="hasChildItems || hasContent"
-                    [name]="expanded ? 'arrow-chevron-up' : 'chevron-down'"
+                    [name]="expanded ? 'chevron-up' : 'chevron-down'"
                     [svgIcon]="expanderSVGIcon"
                     [innerCssClass]="dirInnerCssClasses"
                 >

package/{esm2020 → esm2022}/panelbar/panelbar.component.mjs

@@ -24,93 +24,31 @@ import * as i2 from "@progress/kendo-angular-l10n";
  */
 // TODO: add styles as input prop
 export class PanelBarComponent {
-    constructor(elementRef, eventService, localization) {
-        this.localization = localization;
-        /**
-         * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example]({% slug expandmodes_panelbar %})).
-         *
-         * The available modes are:
-         * - `"single"`—Expands only one item at a time. Expanding an item collapses the item that was previously expanded.
-         * - `"multiple"`—The default mode of the PanelBar.
-         * Expands more than one item at a time. Items can also be toggled.
-         * - `"full"`—Expands only one item at a time.
-         * The expanded area occupies the entire height of the PanelBar. Requires you to set the `height` property.
-         */
-        this.expandMode = PanelBarExpandMode.Default;
-        /**
-         * Allows the PanelBar to modify the selected state of the items.
-         */
-        this.selectable = true;
-        /**
-         * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
-         */
-        this.animate = true;
-        /**
-         * 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';
-        /**
-         * Fires each time the user interacts with a PanelBar item
-         * ([see example]({% slug routing_panelbar %}#toc-getting-the-selected-item)).
-         * The event data contains a collection of 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();
-        /**
-         * 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';
-        this.activeDescendant = '';
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this.isViewInit = true;
-        this.focused = false;
-        this._keepItemContent = false;
-        this.subs = new Subscription();
-        this.updateChildrenHeight = () => {
-            let childrenHeight = 0;
-            const panelbarHeight = this.elementRef.nativeElement.offsetHeight;
-            const contentOverflow = this.expandMode === PanelBarExpandMode.Full ? 'auto' : 'visible';
-            this.childrenItems.forEach(item => {
-                childrenHeight += item.headerHeight();
-            });
-            this.childrenItems.forEach(item => {
-                item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + 'px' : 'auto';
-                item.contentOverflow = contentOverflow;
-            });
-        };
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        /* eslint-disable-line*/
-        this.keyBindings = this.computedKeys;
-        this.elementRef = elementRef;
-        this.eventService = eventService;
-        this.subs.add(this.eventService.children$.subscribe(event => this.onItemAction(event)));
-        this.subs.add(this.eventService.itemClick.subscribe(ev => this.itemClick.emit(ev)));
-    }
+    localization;
+    /**
+     * Sets the expand mode of the PanelBar through the `PanelBarExpandMode` enum ([see example]({% slug expandmodes_panelbar %})).
+     *
+     * The available modes are:
+     * - `"single"`—Expands only one item at a time. Expanding an item collapses the item that was previously expanded.
+     * - `"multiple"`—The default mode of the PanelBar.
+     * Expands more than one item at a time. Items can also be toggled.
+     * - `"full"`—Expands only one item at a time.
+     * The expanded area occupies the entire height of the PanelBar. Requires you to set the `height` property.
+     */
+    expandMode = PanelBarExpandMode.Default;
+    /**
+     * Allows the PanelBar to modify the selected state of the items.
+     */
+    selectable = true;
+    /**
+     * Sets the animate state of the PanelBar ([see example]({% slug animations_panelbar %})).
+     */
+    animate = true;
+    /**
+     * Sets the height of the component when the `"full"` expand mode is used.
+     * This option is ignored in the `"multiple"` and `"single"` expand modes.
+     */
+    height = '400px';
     /**
      * When set to `true`, the PanelBar renders the content of all items and they are persisted in the DOM
      * ([see example]({% slug templates_panelbar %}#toc-collections)).
@@ -135,6 +73,38 @@ export class PanelBarComponent {
     get items() {
         return this._items;
     }
+    /**
+     * Fires each time the user interacts with a PanelBar item
+     * ([see example]({% slug routing_panelbar %}#toc-getting-the-selected-item)).
+     * The event data contains a collection of all items that are modified.
+     */
+    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.
+     */
+    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.
+     */
+    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.
+     */
+    collapse = new EventEmitter();
+    /**
+     * Fires when the user clicks an item ([see example]({% slug events_panelbar %})).
+     */
+    itemClick = new EventEmitter();
+    hostClasses = true;
+    tabIndex = 0;
+    role = 'tree';
+    activeDescendant = '';
     get hostHeight() {
         return this.expandMode === PanelBarExpandMode.Full ? this.height : 'auto';
     }
@@ -144,6 +114,35 @@ export class PanelBarComponent {
     get dir() {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
+    template;
+    contentItems;
+    contentChildItems;
+    viewChildItems;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    allItems;
+    childrenItems;
+    isViewInit = true;
+    focused = false;
+    _items;
+    _keepItemContent = false;
+    elementRef;
+    eventService;
+    keyBindings;
+    subs = new Subscription();
+    constructor(elementRef, eventService, localization) {
+        this.localization = localization;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        /* eslint-disable-line*/
+        this.keyBindings = this.computedKeys;
+        this.elementRef = elementRef;
+        this.eventService = eventService;
+        this.subs.add(this.eventService.children$.subscribe(event => this.onItemAction(event)));
+        this.subs.add(this.eventService.itemClick.subscribe(ev => this.itemClick.emit(ev)));
+    }
     /**
      * @hidden
      */
@@ -287,6 +286,18 @@ export class PanelBarComponent {
             }
         }
     }
+    updateChildrenHeight = () => {
+        let childrenHeight = 0;
+        const panelbarHeight = this.elementRef.nativeElement.offsetHeight;
+        const contentOverflow = this.expandMode === PanelBarExpandMode.Full ? 'auto' : 'visible';
+        this.childrenItems.forEach(item => {
+            childrenHeight += item.headerHeight();
+        });
+        this.childrenItems.forEach(item => {
+            item.contentHeight = PanelBarExpandMode.Full === this.expandMode ? (panelbarHeight - childrenHeight) + 'px' : 'auto';
+            item.contentOverflow = contentOverflow;
+        });
+    };
     onItemAction(item) {
         if (!item) {
             return;
@@ -489,16 +500,15 @@ export class PanelBarComponent {
         });
         return flattedItems;
     }
-}
-PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.PanelBarService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarComponent, isStandalone: true, 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", "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,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.panelbar'
-        }
-    ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.PanelBarService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PanelBarComponent, isStandalone: true, 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", "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,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.panelbar'
+            }
+        ], queries: [{ propertyName: "template", first: true, predicate: PanelBarItemTemplateDirective, descendants: true }, { propertyName: "contentItems", predicate: PanelBarItemComponent, descendants: true }, { propertyName: "contentChildItems", predicate: PanelBarItemComponent }], viewQueries: [{ propertyName: "viewChildItems", predicate: PanelBarItemComponent, descendants: true }], exportAs: ["kendoPanelbar"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content *ngIf="contentChildItems && !items" select="kendo-panelbar-item"></ng-content>
         <ng-template [ngIf]="items?.length">
             <ng-container *ngFor="let item of items">
@@ -522,7 +532,8 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoPanelbar',

package/{esm2020 → esm2022}/panelbar/panelbar.service.mjs

@@ -13,16 +13,16 @@ let nextPanelbarId = 0;
  * @hidden
  */
 export class PanelBarService {
-    constructor() {
-        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();
-        this.pbId = nextPanelbarId++;
-    }
+    children$;
+    keepContent$;
+    parent$;
+    pbId;
+    animate;
+    expandMode;
+    itemClick;
+    childSource;
+    keepContentSource;
+    parentSource;
     onKeepContent(keepContent) {
         this.keepContentSource.next(keepContent);
     }
@@ -35,9 +35,19 @@ export class PanelBarService {
     onBlur() {
         this.parentSource.next(false);
     }
+    constructor() {
+        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();
+        this.pbId = nextPanelbarId++;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarService });
 }
-PanelBarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PanelBarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });

package/{esm2020 → esm2022}/panelbar.module.mjs

@@ -23,11 +23,11 @@ import * as i5 from "./panelbar/panelbar-item-title.directive";
  * - `PanelBarItemTitleDirective—The `PanelBarItemTitle` directive.
  */
 export class PanelBarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective], exports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent] });
 }
-PanelBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PanelBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective], exports: [i1.PanelBarComponent, i2.PanelBarItemComponent, i3.PanelBarContentDirective, i4.PanelBarItemTemplateDirective, i5.PanelBarItemTitleDirective] });
-PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, imports: [i1.PanelBarComponent, i2.PanelBarItemComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_PANELBAR],