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

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],

package/{esm2020 → esm2022}/splitter/splitter-bar.component.mjs

@@ -5,7 +5,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ChangeDetectorRef, Component, ElementRef, Host, HostBinding, Input, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { DraggableDirective, Keys } from '@progress/kendo-angular-common';
+import { DraggableDirective, Keys, isObjectPresent, parseAttributes, removeHTMLAttributes, setHTMLAttributes } from '@progress/kendo-angular-common';
 import { SplitterService } from './splitter.service';
 import { Subscription, of } from 'rxjs';
 import { delay, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
@@ -34,19 +34,15 @@ const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
  * @hidden
  */
 export class SplitterBarComponent {
-    constructor(draggable, localization, splitterService, element, renderer, cdr) {
-        this.draggable = draggable;
-        this.localization = localization;
-        this.splitterService = splitterService;
-        this.element = element;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.ariaRole = 'separator';
-        this.focused = false;
-        this.orientation = 'horizontal';
-        this.index = 0;
-        this.subscriptions = new Subscription();
-    }
+    draggable;
+    localization;
+    splitterService;
+    element;
+    renderer;
+    cdr;
+    ariaRole = 'separator';
+    ariaLabel = 'Splitter pane';
+    focused = false;
     get hostOrientation() {
         return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
     }
@@ -72,6 +68,41 @@ export class SplitterBarComponent {
     get order() {
         return 2 * this.index + 1;
     }
+    orientation = 'horizontal';
+    index = 0;
+    set htmlAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.element.nativeElement);
+        }
+        this._htmlAttributes = attributes;
+        this.parsedAttributes = this.htmlAttributes ?
+            parseAttributes(this.htmlAttributes, this.defaultAttributes) :
+            this.htmlAttributes;
+        this.setHtmlAttributes();
+    }
+    get htmlAttributes() {
+        return this._htmlAttributes;
+    }
+    subscriptions = new Subscription();
+    _htmlAttributes;
+    parsedAttributes = {};
+    get defaultAttributes() {
+        return {
+            'aria-orientation': this.hostOrientation,
+            role: this.ariaRole
+        };
+    }
+    get mutableAttributes() {
+        return { 'tabindex': this.tabIndex };
+    }
+    constructor(draggable, localization, splitterService, element, renderer, cdr) {
+        this.draggable = draggable;
+        this.localization = localization;
+        this.splitterService = splitterService;
+        this.element = element;
+        this.renderer = renderer;
+        this.cdr = cdr;
+    }
     ngOnInit() {
         let state;
         const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitterService.isDraggable(this.index)), tap(() => state = this.splitterService.dragState(this.index)), tap(() => this.splitterService.toggleContentOverlay(this.index, true)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(({ pageX, pageY, originalX, originalY }) => {
@@ -114,13 +145,13 @@ export class SplitterBarComponent {
         const relatedPaneIndex = iconName === 'prev' ? this.index + 1 : this.index;
         const pane = this.splitterService.pane(paneIndex);
         const relatedPane = this.splitterService.pane(relatedPaneIndex);
-        const isCollapsible = pane.collapsible;
-        return isCollapsible && !relatedPane.isHidden;
+        const isCollapsible = pane?.collapsible;
+        return isCollapsible && !relatedPane?.isHidden;
     }
     previousArrowClass() {
         const pane = this.splitterService.pane(this.index);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
@@ -132,8 +163,8 @@ export class SplitterBarComponent {
     }
     previousSVGArrowClass() {
         const pane = this.splitterService.pane(this.index);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
@@ -151,8 +182,8 @@ export class SplitterBarComponent {
     }
     nextArrowClass() {
         const pane = this.splitterService.pane(this.index + 1);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         return classFromObject({
@@ -164,8 +195,8 @@ export class SplitterBarComponent {
     }
     nextSVGArrowClass() {
         const pane = this.splitterService.pane(this.index + 1);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
+        const isCollapsible = pane?.collapsible;
+        const isCollapsed = pane?.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
         const isRTL = this.direction === 'rtl';
         if (isCollapsible && isHorizontal && ((!isCollapsed && !isRTL) || (isCollapsed && isRTL))) {
@@ -218,9 +249,12 @@ export class SplitterBarComponent {
             this.splitterService.tryToggle(next);
         }
     }
-}
-SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+    setHtmlAttributes() {
+        const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
+        setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
         <div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
             <kendo-icon-wrapper
                 size="xsmall"
@@ -237,7 +271,8 @@ SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             ></kendo-icon-wrapper>
         </div>
     `, isInline: true, dependencies: [{ 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SplitterBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-splitter-bar',
@@ -266,6 +301,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }] }, { type: i2.LocalizationService }, { type: i3.SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaRole: [{
                 type: HostBinding,
                 args: ['attr.role']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], focused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
@@ -288,4 +326,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], index: [{
                 type: Input
+            }], htmlAttributes: [{
+                type: Input
             }] } });