@progress/kendo-angular-layout 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/layouts/grid-layout.component.mjs

@@ -15,25 +15,44 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
  */
 export class GridLayoutComponent {
-    constructor(renderer, element, localization) {
-        this.renderer = renderer;
-        this.element = element;
-        this.localization = localization;
-        this.hostClass = true;
-        /**
-         * Specifies the gaps between the elements. The default value is `0`
-         * ([see example](slug:layout_gridlayout#toc-gap)).
-         */
-        this.gap = 0;
-        this._align = {
-            horizontal: 'stretch',
-            vertical: 'stretch'
-        };
-        validatePackage(packageMetadata);
-    }
+    renderer;
+    element;
+    localization;
+    hostClass = true;
     get dir() {
         return this.direction;
     }
+    /**
+     * Specifies the number of rows and their height
+     * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
+     *
+     * Accepts an array, which serves two purposes:
+     *
+     * The number of elements in the array defines the number of rows.
+     * Each array element defines the size of the corresponding row. The possible array values are:
+     * * `number` - Defines the size in pixels.
+     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
+     * * [GridLayoutRowSize]({% slug api_layout_gridlayoutrowsize %}) - Configuration object, which accepts a `height` key.
+     */
+    rows;
+    /**
+     * Specifies the number of columns and their widths
+     * ([More details](slug:layout_gridlayout#toc-rows-and-columns)).
+     *
+     * Accepts an array, which serves two purposes:
+     *
+     * The number of elements in the array defines the number of columns.
+     * Each array element defines the size of the corresponding column. The possible array values are:
+     * * `number` - Defines the size in pixels.
+     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
+     * * [GridLayoutColSize]({% slug api_layout_gridlayoutcolsize %}) - Configuration object, which accepts a `width` key.
+     */
+    cols;
+    /**
+     * Specifies the gaps between the elements. The default value is `0`
+     * ([see example](slug:layout_gridlayout#toc-gap)).
+     */
+    gap = 0;
     /**
      * Specifies the horizontal and vertical alignment of the inner GridLayout elements
      * ([see example]({% slug layout_gridlayout %}#toc-alignment)).
@@ -45,6 +64,18 @@ export class GridLayoutComponent {
     get align() {
         return this._align;
     }
+    _align = {
+        horizontal: 'stretch',
+        vertical: 'stretch'
+    };
+    justifyClass;
+    alignClass;
+    constructor(renderer, element, localization) {
+        this.renderer = renderer;
+        this.element = element;
+        this.localization = localization;
+        validatePackage(packageMetadata);
+    }
     ngAfterViewInit() {
         this.handleAlignClasses();
         this.handleGridTemplateStyling('rows');
@@ -96,18 +127,18 @@ export class GridLayoutComponent {
     get direction() {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
-}
-GridLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-GridLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridLayoutComponent, isStandalone: true, selector: "kendo-gridlayout", inputs: { rows: "rows", cols: "cols", gap: "gap", align: "align" }, host: { properties: { "class.k-grid-layout": "this.hostClass", "attr.dir": "this.dir" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.gridlayout'
-        }
-    ], exportAs: ["kendoGridLayout"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridLayoutComponent, isStandalone: true, selector: "kendo-gridlayout", inputs: { rows: "rows", cols: "cols", gap: "gap", align: "align" }, host: { properties: { "class.k-grid-layout": "this.hostClass", "attr.dir": "this.dir" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.gridlayout'
+            }
+        ], exportAs: ["kendoGridLayout"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoGridLayout',

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

@@ -5,6 +5,28 @@
 import { Component, Input, Renderer2, ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export class GridLayoutItemComponent {
+    renderer;
+    element;
+    /**
+     * Sets the row of the item in the GridLayout
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    row;
+    /**
+     * Sets the column of the item in the GridLayout
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    col;
+    /**
+     * Determines how many rows will the item span. The default size is one row
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    rowSpan;
+    /**
+     * Determines how many columns will the item span. The default size is one column
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    colSpan;
     constructor(renderer, element) {
         this.renderer = renderer;
         this.element = element;
@@ -23,12 +45,12 @@ export class GridLayoutItemComponent {
         const gridAreaStyle = `${row} / ${col} / ${rowSpan} / ${colSpan}`;
         this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
     }
-}
-GridLayoutItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-GridLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridLayoutItemComponent, isStandalone: true, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutItemComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridLayoutItemComponent, isStandalone: true, selector: "kendo-gridlayout-item", inputs: { row: "row", col: "col", rowSpan: "rowSpan", colSpan: "colSpan" }, usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridLayoutItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gridlayout-item',

package/{esm2020 → esm2022}/layouts/stack-layout.component.mjs

@@ -15,31 +15,10 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
  */
 export class StackLayoutComponent {
-    constructor(renderer, element, localization) {
-        this.renderer = renderer;
-        this.element = element;
-        this.localization = localization;
-        this.hostClass = true;
-        /**
-         * Specifies the gap between the inner StackLayout elements. The default value is `0`
-         * ([see example](slug:layout_stacklayout#toc-gap)).
-         */
-        this.gap = 0;
-        /**
-         * Specifies the orientation of the StackLayout
-         * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
-         *
-         * The possible values are:
-         * (Default) `horizontal`
-         * `vertical`
-         */
-        this.orientation = 'horizontal';
-        this._align = {
-            horizontal: 'stretch',
-            vertical: 'stretch'
-        };
-        validatePackage(packageMetadata);
-    }
+    renderer;
+    element;
+    localization;
+    hostClass = true;
     get horizontalClass() {
         return this.orientation === 'horizontal';
     }
@@ -60,6 +39,32 @@ export class StackLayoutComponent {
     get align() {
         return this._align;
     }
+    /**
+     * Specifies the gap between the inner StackLayout elements. The default value is `0`
+     * ([see example](slug:layout_stacklayout#toc-gap)).
+     */
+    gap = 0;
+    /**
+     * Specifies the orientation of the StackLayout
+     * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+     *
+     * The possible values are:
+     * (Default) `horizontal`
+     * `vertical`
+     */
+    orientation = 'horizontal';
+    _align = {
+        horizontal: 'stretch',
+        vertical: 'stretch'
+    };
+    justifyClass;
+    alignClass;
+    constructor(renderer, element, localization) {
+        this.renderer = renderer;
+        this.element = element;
+        this.localization = localization;
+        validatePackage(packageMetadata);
+    }
     ngAfterViewInit() {
         this.handleAlignClasses();
         this.setGap();
@@ -98,18 +103,18 @@ export class StackLayoutComponent {
     get direction() {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
-}
-StackLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-StackLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StackLayoutComponent, isStandalone: true, selector: "kendo-stacklayout", inputs: { align: "align", gap: "gap", orientation: "orientation" }, host: { properties: { "class.k-stack-layout": "this.hostClass", "class.k-hstack": "this.horizontalClass", "class.k-vstack": "this.verticalClass", "attr.dir": "this.dir" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.stacklayout'
-        }
-    ], exportAs: ["kendoStackLayout"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StackLayoutComponent, isStandalone: true, selector: "kendo-stacklayout", inputs: { align: "align", gap: "gap", orientation: "orientation" }, host: { properties: { "class.k-stack-layout": "this.hostClass", "class.k-hstack": "this.horizontalClass", "class.k-vstack": "this.verticalClass", "attr.dir": "this.dir" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.stacklayout'
+            }
+        ], exportAs: ["kendoStackLayout"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackLayoutComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StackLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoStackLayout',

package/{esm2020 → esm2022}/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729174389,
-    version: '17.0.0-develop.9',
+    publishDate: 1731413967,
+    version: '17.0.0',
     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 → esm2022}/panelbar/events/collapse-event.mjs

@@ -7,4 +7,8 @@ import { PreventableEvent } from '../../common/preventable-event';
  * Arguments for the `collapse` event of the PanelBar.
  */
 export class PanelBarCollapseEvent extends PreventableEvent {
+    /**
+     * The item that will be collapsed.
+     */
+    item;
 }

package/{esm2020 → esm2022}/panelbar/events/expand-event.mjs

@@ -7,4 +7,8 @@ import { PreventableEvent } from '../../common/preventable-event';
  * Arguments for the `expand` event of the PanelBar.
  */
 export class PanelBarExpandEvent extends PreventableEvent {
+    /**
+     * The item that will be expanded.
+     */
+    item;
 }

package/{esm2020 → esm2022}/panelbar/events/item-click-event.mjs

@@ -6,4 +6,12 @@
  * Arguments for the `itemClick` event of the PanelBar.
  */
 export class PanelBarItemClickEvent {
+    /**
+     * The clicked item.
+     */
+    item;
+    /**
+     * The DOM event that triggered the `itemClick` event.
+     */
+    originalEvent;
 }

package/{esm2020 → esm2022}/panelbar/events/select-event.mjs

@@ -7,4 +7,8 @@ import { PreventableEvent } from '../../common/preventable-event';
  * Arguments for the `select` event of the PanelBar.
  */
 export class PanelBarSelectEvent extends PreventableEvent {
+    /**
+     * The item that will be selected.
+     */
+    item;
 }

package/{esm2020 → esm2022}/panelbar/events/state-change-event.mjs

@@ -6,4 +6,8 @@
  * Arguments for the `stateChange` event of the PanelBar.
  */
 export class PanelBarStateChangeEvent {
+    /**
+     * A collection of all modified items.
+     */
+    items;
 }

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

@@ -9,13 +9,14 @@ import * as i0 from "@angular/core";
  * The content can be expanded or collapsed through the item.
  */
 export class PanelBarContentDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PanelBarContentDirective, isStandalone: true, selector: "[kendoPanelBarContent]", ngImport: i0 });
 }
-PanelBarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-PanelBarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: PanelBarContentDirective, isStandalone: true, selector: "[kendoPanelBarContent]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PanelBarContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PanelBarContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "[kendoPanelBarContent]",

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"
                 >