@progress/kendo-angular-layout 17.0.0-develop.10 → 17.0.0-develop.12

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: 1729175986,
-    version: '17.0.0-develop.10',
+    publishDate: 1729256670,
+    version: '17.0.0-develop.12',
     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';
     }