@progress/kendo-angular-layout 17.0.0-develop.11 → 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: 1729238832,
-    version: '17.0.0-develop.11',
+    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-pane.component.mjs

@@ -80,14 +80,13 @@ 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() {
@@ -112,12 +111,11 @@ export class SplitterPaneComponent {
      * @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() {
@@ -136,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');
         }
     }
     /**
@@ -151,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
      */
@@ -171,9 +174,8 @@ 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 }, { token: i1.SplitterService }], target: i0.ɵɵFactoryTarget.Component });

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';
@@ -17,6 +17,7 @@ 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.
@@ -119,6 +121,20 @@ export class SplitterComponent {
     }
     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()) {
@@ -129,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() {
@@ -160,8 +180,11 @@ 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.ɵ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,
@@ -225,7 +248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     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

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) {
@@ -144,16 +171,6 @@ export class SplitterService {
             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';
     }

package/fesm2015/progress-kendo-angular-layout.mjs

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729238832,
-    version: '17.0.0-develop.11',
+    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'
 };
 
@@ -1628,7 +1628,7 @@ const shouldToggleOrResize = (keyCode, orientation) => {
     return isHorizontalChange || isVerticalChange;
 };
 
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
+const MAX_PANE_HEIGHT = 33554400;
 /**
  * @hidden
  */
@@ -1701,10 +1701,10 @@ 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) + "%";
@@ -1716,9 +1716,36 @@ 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) {
@@ -1766,16 +1793,6 @@ class SplitterService {
             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';
     }
@@ -1874,14 +1891,13 @@ 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() {
@@ -1906,12 +1922,11 @@ class SplitterPaneComponent {
      * @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() {
@@ -1930,14 +1945,13 @@ 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');
         }
     }
     /**
@@ -1945,12 +1959,18 @@ 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
      */
@@ -1965,9 +1985,8 @@ 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 }, { token: SplitterService }], target: i0.ɵɵFactoryTarget.Component });
@@ -2340,6 +2359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+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 %}).
  *
@@ -2376,11 +2396,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 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.
@@ -2442,6 +2463,20 @@ class SplitterComponent {
     }
     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()) {
@@ -2452,6 +2487,10 @@ class SplitterComponent {
         if (this.enclosingPane) {
             this.enclosingPane.containsSplitter = false;
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+            this._styleObserver = null;
+        }
         this.unsubscribeChanges();
     }
     reconfigure() {
@@ -2483,8 +2522,11 @@ 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: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.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,
@@ -2549,7 +2591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
                 }]
         }], ctorParameters: function () {
-        return [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: SplitterPaneComponent, decorators: [{
+        return [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: SplitterPaneComponent, decorators: [{
                         type: Optional
                     }, {
                         type: Host

package/fesm2020/progress-kendo-angular-layout.mjs

@@ -28,8 +28,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729238832,
-    version: '17.0.0-develop.11',
+    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'
 };
 
@@ -1622,7 +1622,7 @@ const shouldToggleOrResize = (keyCode, orientation) => {
     return isHorizontalChange || isVerticalChange;
 };
 
-const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
+const MAX_PANE_HEIGHT = 33554400;
 /**
  * @hidden
  */
@@ -1695,10 +1695,10 @@ 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) + "%";
@@ -1710,9 +1710,36 @@ 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) {
@@ -1760,16 +1787,6 @@ class SplitterService {
             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';
     }
@@ -1868,14 +1885,13 @@ 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() {
@@ -1900,12 +1916,11 @@ class SplitterPaneComponent {
      * @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() {
@@ -1924,14 +1939,13 @@ 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');
         }
     }
     /**
@@ -1939,12 +1953,18 @@ 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
      */
@@ -1959,9 +1979,8 @@ 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 }, { token: SplitterService }], target: i0.ɵɵFactoryTarget.Component });
@@ -2332,6 +2351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+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 %}).
  *
@@ -2368,11 +2388,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 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.
@@ -2434,6 +2455,20 @@ class SplitterComponent {
     }
     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()) {
@@ -2444,6 +2479,10 @@ class SplitterComponent {
         if (this.enclosingPane) {
             this.enclosingPane.containsSplitter = false;
         }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+            this._styleObserver = null;
+        }
         this.unsubscribeChanges();
     }
     reconfigure() {
@@ -2475,8 +2514,11 @@ 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: SplitterService }, { token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: SplitterService }, { token: i1.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,
@@ -2540,7 +2582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: SplitterPaneComponent, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: SplitterPaneComponent, decorators: [{
                     type: Optional
                 }, {
                     type: Host

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "17.0.0-develop.11",
+  "version": "17.0.0-develop.12",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,17 +39,17 @@
     "@angular/core": "15 - 18",
     "@angular/platform-browser": "15 - 18",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "17.0.0-develop.11",
-    "@progress/kendo-angular-l10n": "17.0.0-develop.11",
-    "@progress/kendo-angular-progressbar": "17.0.0-develop.11",
-    "@progress/kendo-angular-icons": "17.0.0-develop.11",
-    "@progress/kendo-angular-buttons": "17.0.0-develop.11",
-    "@progress/kendo-angular-intl": "17.0.0-develop.11",
+    "@progress/kendo-angular-common": "17.0.0-develop.12",
+    "@progress/kendo-angular-l10n": "17.0.0-develop.12",
+    "@progress/kendo-angular-progressbar": "17.0.0-develop.12",
+    "@progress/kendo-angular-icons": "17.0.0-develop.12",
+    "@progress/kendo-angular-buttons": "17.0.0-develop.12",
+    "@progress/kendo-angular-intl": "17.0.0-develop.12",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.0.0-develop.11",
+    "@progress/kendo-angular-schematics": "17.0.0-develop.12",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/splitter/splitter-pane.component.d.ts

@@ -115,6 +115,10 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
      * @hidden
      */
     get computedSize(): number;
+    /**
+     * @hidden
+     */
+    get nativeElement(): HTMLElement;
     /**
      * @hidden
      */

package/splitter/splitter.component.d.ts

@@ -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 { ElementRef, EventEmitter, AfterContentInit, QueryList, Renderer2 } from '@angular/core';
+import { ElementRef, EventEmitter, AfterContentInit, QueryList, Renderer2, NgZone } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Orientation } from '../common/orientation';
 import { SplitterPaneComponent } from './splitter-pane.component';
@@ -49,6 +49,7 @@ export declare class SplitterComponent implements AfterContentInit {
     protected splitterService: SplitterService;
     private localization;
     private renderer;
+    private ngZone;
     private enclosingPane?;
     /**
      * Specifies the orientation of the panes within the Splitter.
@@ -87,7 +88,8 @@ export declare class SplitterComponent implements AfterContentInit {
      */
     panes: QueryList<SplitterPaneComponent>;
     private paneChangesSubscription;
-    constructor(element: ElementRef<HTMLElement>, splitterService: SplitterService, localization: LocalizationService, renderer: Renderer2, enclosingPane?: SplitterPaneComponent);
+    private _styleObserver;
+    constructor(element: ElementRef<HTMLElement>, splitterService: SplitterService, localization: LocalizationService, renderer: Renderer2, ngZone: NgZone, enclosingPane?: SplitterPaneComponent);
     ngAfterContentInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
@@ -95,6 +97,7 @@ export declare class SplitterComponent implements AfterContentInit {
     private unsubscribeChanges;
     private configure;
     private get direction();
-    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterComponent, [null, null, null, null, { optional: true; host: true; }]>;
+    private setFixedHeight;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterComponent, [null, null, null, null, null, { optional: true; host: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SplitterComponent, "kendo-splitter", ["kendoSplitter"], { "orientation": "orientation"; "splitbarWidth": "splitbarWidth"; "resizeStep": "resizeStep"; "splitterBarClass": "splitterBarClass"; }, { "layoutChange": "layoutChange"; }, ["panes"], ["kendo-splitter-pane"], true, never>;
 }

package/splitter/splitter.service.d.ts

@@ -43,6 +43,7 @@ export declare class SplitterService {
     splitterBars: Array<SplitterBarComponent>;
     layoutChange: EventEmitter<any>;
     resizeStep: number;
+    fixedHeight: boolean;
     constructor(zone: NgZone);
     tryToggle(paneIndex: number): boolean;
     togglePane(keyCode: number, index: number): void;