@progress/kendo-angular-layout 17.0.0-develop.2 → 17.0.0-develop.20

package/README.md

@@ -2,42 +2,57 @@
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
-## Kendo UI for Angular Layout Package (AppBar, Avatar, Card, Drawer, Menu, PanelBar, Splitter, Stepper, and TabStrip Components)
+## Kendo UI for Angular Layout Package (Avatar, Card, Drawer, ExpansionPanel, GridLayout, PanelBar, Splitter, StackLayout, Stepper, TabStrip, TileLayout and Timeline Components)
 
-> **Important**
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)&mdash;a commercial library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout).
+> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui)&mdash;a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
 > * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
 >
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout) and speed up your development process!
+> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
 
-Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+The [Kendo UI for Angular Layout package](https://www.telerik.com/kendo-angular-ui/components/layout/) is a collection of popular components for laying out a professional quality app. The components include a variety of layout types and styles that have extensive configuration options allowing flexibility.
 
-The Layout Package is a collection of popular comppnents for laying out a professional quality app. It includes the following components:
-* [Avatar](https://www.telerik.com/kendo-angular-ui/avatar?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [Card](https://www.telerik.com/kendo-angular-ui/card?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [Drawer](https://www.telerik.com/kendo-angular-ui/drawer?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [ExpansionPanel](https://www.telerik.com/kendo-angular-ui/expansionpanel?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [PanelBar](https://www.telerik.com/kendo-angular-ui/panelbar?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [Splitter](https://www.telerik.com/kendo-angular-ui/splitter?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [Stepper](https://www.telerik.com/kendo-angular-ui/stepper?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [TabStrip](https://www.telerik.com/kendo-angular-ui/tabstrip?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [TileLayout](https://www.telerik.com/kendo-angular-ui/tilelayout?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
+## What's Included in the Angular Layout Package
 
-## Resources
+* [Avatar](https://www.telerik.com/kendo-angular-ui/components/layout/avatar)&mdash;Displays a graphical representation of a profile or online avatar, including people or entities with initials, custom icons, and images.
+* [Card](https://www.telerik.com/kendo-angular-ui/components/layout/card)&mdash;Combines text, visual content and actions about a single subject. It provides clarity, categorization, and an attractive way of presentation.
+* [Drawer](https://www.telerik.com/kendo-angular-ui/components/layout/drawer)&mdash;Offers a side navigation element that can be toggled to be displayed or hidden, or permanently displayed. It enables the user to change the content of a specific section of the page.
+* [ExpansionPanel](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel)&mdash;Organizes any content into a details-summary view consisting of a title bar and expandable/collapsible content.
+* [GridLayout](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout)&mdash;Based on the CSS Grid Layout system, which allows setting the specific row, column and size of each item. It allows you to arrange your content in columns and rows, forming a grid structure.
+* [PanelBar](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar)&mdash;Showcases hierarchical or multi-level content in a component, whose individual items can be expanded or collapsed.
+* [Splitter](https://www.telerik.com/kendo-angular-ui/components/layout/splitter)&mdash;Splits a page into sections, which can be expanded, collapsed or resized, and allows users to control the page layout.
+* [StackLayout](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout)&mdash;Allows you to easily arrange vertically or horizontally multiple elements in a stack according to the alignment and spacing you like. 
+* [Stepper](https://www.telerik.com/kendo-angular-ui/components/layout/stepper)&mdash;Visualizes the progress of a process by dividing it into chronological steps.
+* [TabStrip](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip)&mdash;Displays a collection of tabs, each with their own associated content, which enable the user to switch between different views inside a single component.
+* [TileLayout](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout)&mdash;Displays a collection of tiles and aligns them into columns and rows, allowing end users to rearrange and resize any of the tiles.
+* [Timeline](https://www.telerik.com/kendo-angular-ui/components/layout/timeline)&mdash;Displays a collection of events and their data in a chronological succession for each year.
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular Layout components deliver are:
+
+* [Appearance](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance)&mdash;The appearance of all Layout components can be customized using theme variables and configuration options. Kendo UI for Angular offers a variety of popular themes, including Bootstrap and Material. These themes can be easily tailored to your needs using the [Progress ThemeBuilder](https://www.telerik.com/themebuilder), an online utility application.
+* [Globalization](https://www.telerik.com/kendo-angular-ui/components/inputs/globalization)&mdash;The Kendo UI for Angular Layout package supports globalization to ensure that each Layout component can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Layout controls support rendering in a right-to-left (RTL) direction.
+* [Accessibility](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/accessibility)&mdash;Most Layout components are accessible for screen readers and support WAI-ARIA attributes.
+* [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/keyboard-navigation)&mdash;Apart from the Avatar, Card, and TileLayout, the Layout components support a number of keyboard shortcuts which allow users to accomplish various commands.
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [Blogs](http://www.telerik.com/blogs/kendo-ui)
-* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
+## Support Options
 
-## Questions and Feedback
+For any issues you might encounter while working with the Kendo UI for Angular Layout, you have the following support channels available:
+
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-tickets).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
+
+## Resources
 
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular Layout](https://www.telerik.com/kendo-angular-ui/components/layout/installation/getting-started)
+* [Layout Overview page](https://www.telerik.com/kendo-angular-ui/components/layout) and [Layout API reference](https://www.telerik.com/kendo-angular-ui/components/layout/api)
+* [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap)
+* [Kendo UI for Angular Blog](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
+* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
+* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1728914349,
-    version: '17.0.0-develop.2',
+    publishDate: 1729854978,
+    version: '17.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/esm2020/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';
@@ -42,10 +42,12 @@ export class SplitterBarComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.ariaRole = 'separator';
+        this.ariaLabel = 'Splitter pane';
         this.focused = false;
         this.orientation = 'horizontal';
         this.index = 0;
         this.subscriptions = new Subscription();
+        this.parsedAttributes = {};
     }
     get hostOrientation() {
         return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
@@ -72,6 +74,28 @@ export class SplitterBarComponent {
     get order() {
         return 2 * this.index + 1;
     }
+    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;
+    }
+    get defaultAttributes() {
+        return {
+            'aria-orientation': this.hostOrientation,
+            role: this.ariaRole
+        };
+    }
+    get mutableAttributes() {
+        return { 'tabindex': this.tabIndex };
+    }
     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 }) => {
@@ -218,9 +242,13 @@ export class SplitterBarComponent {
             this.splitterService.tryToggle(next);
         }
     }
+    setHtmlAttributes() {
+        const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
+        setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
+    }
 }
 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: `
+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", 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"
@@ -266,6 +294,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 +319,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], index: [{
                 type: Input
+            }], htmlAttributes: [{
+                type: Input
             }] } });

package/esm2020/splitter/splitter-pane.component.mjs

@@ -4,19 +4,18 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Renderer2, Input, Output } from '@angular/core';
 import { NgIf } from '@angular/common';
+import { SplitterService } from './splitter.service';
 import * as i0 from "@angular/core";
+import * as i1 from "./splitter.service";
 /**
  * Represents the pane component of the Splitter.
  */
 export class SplitterPaneComponent {
-    constructor(element, renderer, cdr) {
+    constructor(element, renderer, cdr, splitterService) {
         this.element = element;
         this.renderer = renderer;
         this.cdr = cdr;
-        /**
-         * The value of the aria-label attribute of the auxiliary separator.
-         */
-        this.separatorLabel = 'Splitter pane';
+        this.splitterService = splitterService;
         /**
          * Specifies if the user is allowed to resize the pane and provide space for other panes.
          */
@@ -81,29 +80,42 @@ export class SplitterPaneComponent {
      */
     set size(newSize) {
         this._size = newSize;
-        const element = this.element.nativeElement;
-        this.renderer.setStyle(element, '-ms-flex-preferred-size', newSize);
-        this.renderer.setStyle(element, 'flex-basis', newSize);
+        this.renderer.setStyle(this.nativeElement, '-ms-flex-preferred-size', newSize);
+        this.renderer.setStyle(this.nativeElement, 'flex-basis', newSize);
         if (this.staticPaneClass) {
-            this.renderer.addClass(element, 'k-pane-static');
+            this.renderer.addClass(this.nativeElement, 'k-pane-static');
         }
         else {
-            this.renderer.removeClass(element, 'k-pane-static');
+            this.renderer.removeClass(this.nativeElement, 'k-pane-static');
         }
     }
     get size() {
         return this._size;
     }
+    /**
+     * Sets the HTML attributes of the splitter bar.
+     * The property accepts string key-value based pairs.
+     * Attributes which are essential for certain functionalities cannot be changed.
+     */
+    set splitterBarAttributes(attributes) {
+        this._splitterBarAttributes = attributes;
+        const splitterBar = this.splitterService.getPaneSplitterBar(this);
+        if (splitterBar) {
+            splitterBar.htmlAttributes = attributes;
+        }
+    }
+    get splitterBarAttributes() {
+        return this._splitterBarAttributes;
+    }
     /**
      * @hidden
      */
     set containsSplitter(value) {
-        const element = this.element.nativeElement;
         if (value) {
-            this.renderer.addClass(element, 'k-pane-flex');
+            this.renderer.addClass(this.nativeElement, 'k-pane-flex');
         }
         else {
-            this.renderer.removeClass(element, 'k-pane-flex');
+            this.renderer.removeClass(this.nativeElement, 'k-pane-flex');
         }
     }
     get isHidden() {
@@ -122,14 +134,13 @@ export class SplitterPaneComponent {
         return this.size && this.size.length > 0;
     }
     ngAfterViewChecked() {
-        const element = this.element.nativeElement;
         if (this.isHidden) {
-            this.renderer.addClass(element, 'k-hidden');
-            this.renderer.addClass(element, 'hidden');
+            this.renderer.addClass(this.nativeElement, 'k-hidden');
+            this.renderer.addClass(this.nativeElement, 'hidden');
         }
         else {
-            this.renderer.removeClass(element, 'k-hidden');
-            this.renderer.removeClass(element, 'hidden');
+            this.renderer.removeClass(this.nativeElement, 'k-hidden');
+            this.renderer.removeClass(this.nativeElement, 'hidden');
         }
     }
     /**
@@ -137,12 +148,18 @@ export class SplitterPaneComponent {
      */
     get computedSize() {
         if (this.orientation === 'vertical') {
-            return this.element.nativeElement.offsetHeight;
+            return this.nativeElement.offsetHeight;
         }
         else {
-            return this.element.nativeElement.offsetWidth;
+            return this.nativeElement.offsetWidth;
         }
     }
+    /**
+     * @hidden
+     */
+    get nativeElement() {
+        return this.element.nativeElement;
+    }
     /**
      * @hidden
      */
@@ -157,13 +174,12 @@ export class SplitterPaneComponent {
         this.cdr.detectChanges();
     }
     setOrderStyles() {
-        const element = this.element.nativeElement;
-        this.renderer.setStyle(element, '-ms-flex-order', this.order);
-        this.renderer.setStyle(element, 'order', this.order);
+        this.renderer.setStyle(this.nativeElement, '-ms-flex-order', this.order);
+        this.renderer.setStyle(this.nativeElement, 'order', this.order);
     }
 }
-SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", separatorLabel: "separatorLabel", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
+SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.SplitterService }], target: i0.ɵɵFactoryTarget.Component });
+SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
         <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
         <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -179,11 +195,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [NgIf]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { order: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.SplitterService }]; }, propDecorators: { order: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], separatorLabel: [{
+            }], splitterBarAttributes: [{
+                type: Input
+            }], splitterBarClass: [{
                 type: Input
             }], min: [{
                 type: Input

package/esm2020/splitter/splitter.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList, ViewChildren, Renderer2 } from '@angular/core';
+import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList, ViewChildren, Renderer2, NgZone, isDevMode } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
@@ -12,11 +12,12 @@ import { SplitterBarComponent } from './splitter-bar.component';
 import { SplitterService } from './splitter.service';
 import { isPresent } from '../common/util';
 import { DraggableDirective } from '@progress/kendo-angular-common';
-import { NgFor, NgIf, NgStyle } from '@angular/common';
+import { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "./splitter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./splitter-pane.component";
+const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
 /**
  * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
  *
@@ -53,11 +54,12 @@ import * as i3 from "./splitter-pane.component";
  * ```
  */
 export class SplitterComponent {
-    constructor(element, splitterService, localization, renderer, enclosingPane) {
+    constructor(element, splitterService, localization, renderer, ngZone, enclosingPane) {
         this.element = element;
         this.splitterService = splitterService;
         this.localization = localization;
         this.renderer = renderer;
+        this.ngZone = ngZone;
         this.enclosingPane = enclosingPane;
         /**
          * Specifies the orientation of the panes within the Splitter.
@@ -97,6 +99,7 @@ export class SplitterComponent {
         return this.direction;
     }
     set splitbars(splitbars) {
+        this.splitterService.splitterBars = splitbars ? splitbars.toArray() : [];
         if (!isPresent(splitbars) || !isPresent(this.panes)) {
             return;
         }
@@ -109,15 +112,29 @@ export class SplitterComponent {
             .sort((a, b) => a.order - b.order);
         const elements = components.map(component => component.element.nativeElement);
         panesArray.forEach((pane, i) => {
-            if (splitBarsArray[i] && pane.separatorLabel) {
-                const splitbar = splitBarsArray[i].element.nativeElement;
-                this.renderer.setAttribute(splitbar, 'aria-label', pane.separatorLabel);
+            const splitbar = splitBarsArray[i];
+            if (splitbar && pane.splitterBarAttributes) {
+                splitbar.htmlAttributes = pane.splitterBarAttributes;
             }
         });
         elements.forEach(element => this.renderer.appendChild(this.element.nativeElement, element));
     }
     ngAfterContentInit() {
         this.reconfigure();
+        this.setFixedHeight();
+        const allHaveFixedSize = this.panes.length && Array.from(this.panes).every(p => p.fixedSize);
+        if (allHaveFixedSize && isDevMode()) {
+            throw new Error(`
+                The Splitter should have at least one pane without a set size.
+                See ${SIZING_DOC_LINK} for more information.
+            `);
+        }
+        this._styleObserver = new MutationObserver(() => {
+            this.ngZone.runOutsideAngular(() => {
+                this.setFixedHeight();
+            });
+        });
+        this._styleObserver.observe(this.element.nativeElement, { attributeFilter: ['style'] });
     }
     ngOnChanges(changes) {
         if (changes.orientation && !changes.orientation.isFirstChange()) {
@@ -128,6 +145,10 @@ export class SplitterComponent {
         if (this.enclosingPane) {
             this.enclosingPane.containsSplitter = false;
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+            this._styleObserver = null;
+        }
         this.unsubscribeChanges();
     }
     reconfigure() {
@@ -159,9 +180,12 @@ export class SplitterComponent {
     get direction() {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
+    setFixedHeight() {
+        this.splitterService.fixedHeight = getComputedStyle(this.element.nativeElement).getPropertyValue('height') !== 'auto';
+    }
 }
-SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: i1.SplitterService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
+SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: i1.SplitterService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
         SplitterService,
         LocalizationService,
         {
@@ -180,13 +204,14 @@ SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
           *ngIf="!last"
           [index]="index"
           [orientation]="orientation"
+          [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
           }">
         </kendo-splitter-bar>
       </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, decorators: [{
             type: Component,
             args: [{
@@ -212,6 +237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
           *ngIf="!last"
           [index]="index"
           [orientation]="orientation"
+          [ngClass]="pane.splitterBarClass || splitterBarClass"
           [ngStyle]="{
             width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
             height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
@@ -220,9 +246,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       </ng-container>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle]
+                    imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.SplitterPaneComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i3.SplitterPaneComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -235,6 +261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], resizeStep: [{
                 type: Input
+            }], splitterBarClass: [{
+                type: Input
             }], layoutChange: [{
                 type: Output
             }], hostClasses: [{

package/esm2020/splitter/splitter.service.mjs

@@ -2,11 +2,11 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { isDevMode, EventEmitter, NgZone, Injectable } from '@angular/core';
+import { EventEmitter, NgZone, Injectable } from '@angular/core';
 import { Keys } from '@progress/kendo-angular-common';
 import { shouldTogglePrev, shouldToggleNext } from './util';
 import * as i0 from "@angular/core";
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
+const MAX_PANE_HEIGHT = 33554400;
 /**
  * @hidden
  */
@@ -79,10 +79,10 @@ export class SplitterService {
     }
     setSize(state, delta) {
         const clamp = (min, max, v) => Math.min(max, Math.max(min, v));
-        const resize = (paneState, change) => {
+        const resize = (paneState, change, modifyMax = false) => {
             const pane = this.pane(paneState.index);
             const splitterSize = this.containerSize();
-            const newSize = clamp(paneState.min, paneState.max, paneState.initialSize + change);
+            const newSize = clamp(paneState.min, modifyMax ? MAX_PANE_HEIGHT : paneState.max, paneState.initialSize + change);
             let size = "";
             if (this.isPercent(pane.size)) {
                 size = (100 * newSize / splitterSize) + "%";
@@ -94,9 +94,36 @@ export class SplitterService {
             pane.isResized = true;
             this.emit(pane.sizeChange, size);
         };
-        // resizing both panes
-        resize(state.prev, delta);
-        resize(state.next, -delta);
+        const prevPane = this.pane(state.prev.index);
+        const nextPane = this.pane(state.next.index);
+        const canResizeBothPanes = this.panes.length > 2;
+        const modifyPrevMax = prevPane.orientation === 'vertical' && !this.fixedHeight && !prevPane.max;
+        const modifyNextMax = prevPane.orientation === 'vertical' && !this.fixedHeight && !nextPane.max;
+        if (prevPane.fixedSize && nextPane.fixedSize || canResizeBothPanes) {
+            const bothVertical = prevPane.orientation === 'vertical' && nextPane.orientation === 'vertical';
+            if (bothVertical) {
+                if (modifyNextMax) {
+                    resize(state.prev, delta, modifyPrevMax);
+                }
+                else if (modifyPrevMax) {
+                    resize(state.next, -delta, modifyNextMax);
+                }
+                else {
+                    resize(state.prev, delta, modifyNextMax);
+                    resize(state.next, -delta, modifyPrevMax);
+                }
+            }
+            else {
+                resize(state.prev, delta);
+                resize(state.next, -delta);
+            }
+        }
+        else if (nextPane.fixedSize || nextPane.collapsible) {
+            resize(state.next, -delta, modifyNextMax);
+        }
+        else {
+            resize(state.prev, delta, modifyPrevMax);
+        }
         this.emit(this.layoutChange, {});
     }
     isDraggable(splitBarIndex) {
@@ -122,22 +149,28 @@ export class SplitterService {
         }
         return this.panes[index];
     }
+    paneByIndex(pane) {
+        if (!this.panes) {
+            return -1;
+        }
+        return this.panes.findIndex(splitterPane => splitterPane === pane);
+    }
+    getPaneSplitterBar(pane) {
+        if (!this.splitterBars) {
+            return;
+        }
+        const paneIndex = this.paneByIndex(pane);
+        if (paneIndex < 0 || paneIndex >= this.splitterBars.length) {
+            return null;
+        }
+        return this.splitterBars[paneIndex];
+    }
     configure({ panes, orientation, containerSize, direction }) {
         this.panes = panes;
         this.panes.forEach((pane, index) => {
             pane.order = index * 2;
             pane.orientation = orientation;
         });
-        if (isDevMode()) {
-            const allPanesWithSize = panes.length && !panes.some(pane => !pane.fixedSize);
-            const hasResizedPane = panes.length && panes.some(pane => pane.isResized);
-            if (allPanesWithSize && !hasResizedPane) {
-                throw new Error(`
-                    The Splitter should have at least one pane without a set size.
-                    See ${SIZING_DOC_LINK} for more information.
-                `);
-            }
-        }
         this.containerSize = containerSize;
         this.rtl = direction === 'rtl';
     }