@progress/kendo-angular-layout 16.4.0-develop.2 → 16.4.0-develop.3

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: 1719935822,
-    version: '16.4.0-develop.2',
+    publishDate: 1719994250,
+    version: '16.4.0-develop.3',
     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.component.mjs

@@ -5,11 +5,12 @@
 import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList, ViewChildren, Renderer2 } 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';
 import { packageMetadata } from '../package-metadata';
+import { isPresent } from '../common/util';
 import { SplitterPaneComponent } from './splitter-pane.component';
 import { SplitterBarComponent } from './splitter-bar.component';
 import { SplitterService } from './splitter.service';
-import { isPresent } from '../common/util';
 import * as i0 from "@angular/core";
 import * as i1 from "./splitter.service";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -100,6 +101,9 @@ export class SplitterComponent {
         if (!isPresent(splitbars) || !isPresent(this.panes)) {
             return;
         }
+        if (!isDocumentAvailable()) {
+            return;
+        }
         const panesArray = this.panes.toArray();
         const splitBarsArray = splitbars.toArray();
         const components = [...panesArray, ...splitBarsArray]
@@ -149,7 +153,8 @@ export class SplitterComponent {
                 else {
                     return this.element.nativeElement.clientWidth;
                 }
-            }
+            },
+            direction: this.direction
         });
     }
     get direction() {

package/esm2020/splitter/splitter.service.mjs

@@ -29,7 +29,9 @@ export class SplitterService {
         }
         const notCollapsed = this.panes.filter(p => !p.collapsed);
         const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
-        notCollapsed[notCollapsed.length - 1].forceExpand = allHaveFixedSize ? true : false;
+        notCollapsed.filter(p => p.fixedSize).forEach(pane => {
+            pane.forceExpand = allHaveFixedSize ? true : false;
+        });
         return pane.collapsible;
     }
     togglePane(keyCode, index) {
@@ -44,8 +46,11 @@ export class SplitterService {
     }
     resizePane(keyCode, index) {
         const state = this.dragState(index);
-        const direction = keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowUp;
-        const step = direction ? (-this.resizeStep) : this.resizeStep;
+        const direction = keyCode === Keys.ArrowLeft || keyCode === (this.rtl ? Keys.ArrowDown : Keys.ArrowUp);
+        let step = direction ? (-this.resizeStep) : this.resizeStep;
+        if (this.rtl) {
+            step = -step;
+        }
         this.setSize(state, step);
     }
     toggleContentOverlay(index, show) {
@@ -89,22 +94,9 @@ export class SplitterService {
             pane.isResized = true;
             this.emit(pane.sizeChange, size);
         };
-        const prev = this.pane(state.prev.index);
-        const next = this.pane(state.next.index);
-        // determine which pane to resize
-        if (prev.fixedSize && next.fixedSize) {
-            // resizing both panes
-            resize(state.prev, delta);
-            resize(state.next, -delta);
-        }
-        else if (next.collapsible || next.fixedSize) {
-            // resizing next
-            resize(state.next, -delta);
-        }
-        else {
-            // resizing prev
-            resize(state.prev, delta);
-        }
+        // resizing both panes
+        resize(state.prev, delta);
+        resize(state.next, -delta);
         this.emit(this.layoutChange, {});
     }
     isDraggable(splitBarIndex) {
@@ -130,7 +122,7 @@ export class SplitterService {
         }
         return this.panes[index];
     }
-    configure({ panes, orientation, containerSize }) {
+    configure({ panes, orientation, containerSize, direction }) {
         this.panes = panes;
         this.panes.forEach((pane, index) => {
             pane.order = index * 2;
@@ -147,6 +139,7 @@ export class SplitterService {
             }
         }
         this.containerSize = containerSize;
+        this.rtl = direction === 'rtl';
     }
     isPercent(size) {
         return /%$/.test(size);

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

@@ -7,7 +7,7 @@ import { Directive, Optional, Injectable, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i5 from '@progress/kendo-angular-common';
-import { Keys, shouldShowValidationUI, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged, WatermarkModule, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, shouldShowValidationUI, isDocumentAvailable, PreventableEvent as PreventableEvent$1, guid, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged, WatermarkModule, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$1 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -33,8 +33,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1719935822,
-    version: '16.4.0-develop.2',
+    publishDate: 1719994250,
+    version: '16.4.0-develop.3',
     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'
 };
 
@@ -1863,7 +1863,9 @@ class SplitterService {
         }
         const notCollapsed = this.panes.filter(p => !p.collapsed);
         const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
-        notCollapsed[notCollapsed.length - 1].forceExpand = allHaveFixedSize ? true : false;
+        notCollapsed.filter(p => p.fixedSize).forEach(pane => {
+            pane.forceExpand = allHaveFixedSize ? true : false;
+        });
         return pane.collapsible;
     }
     togglePane(keyCode, index) {
@@ -1878,8 +1880,11 @@ class SplitterService {
     }
     resizePane(keyCode, index) {
         const state = this.dragState(index);
-        const direction = keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowUp;
-        const step = direction ? (-this.resizeStep) : this.resizeStep;
+        const direction = keyCode === Keys.ArrowLeft || keyCode === (this.rtl ? Keys.ArrowDown : Keys.ArrowUp);
+        let step = direction ? (-this.resizeStep) : this.resizeStep;
+        if (this.rtl) {
+            step = -step;
+        }
         this.setSize(state, step);
     }
     toggleContentOverlay(index, show) {
@@ -1923,22 +1928,9 @@ class SplitterService {
             pane.isResized = true;
             this.emit(pane.sizeChange, size);
         };
-        const prev = this.pane(state.prev.index);
-        const next = this.pane(state.next.index);
-        // determine which pane to resize
-        if (prev.fixedSize && next.fixedSize) {
-            // resizing both panes
-            resize(state.prev, delta);
-            resize(state.next, -delta);
-        }
-        else if (next.collapsible || next.fixedSize) {
-            // resizing next
-            resize(state.next, -delta);
-        }
-        else {
-            // resizing prev
-            resize(state.prev, delta);
-        }
+        // resizing both panes
+        resize(state.prev, delta);
+        resize(state.next, -delta);
         this.emit(this.layoutChange, {});
     }
     isDraggable(splitBarIndex) {
@@ -1964,7 +1956,7 @@ class SplitterService {
         }
         return this.panes[index];
     }
-    configure({ panes, orientation, containerSize }) {
+    configure({ panes, orientation, containerSize, direction }) {
         this.panes = panes;
         this.panes.forEach((pane, index) => {
             pane.order = index * 2;
@@ -1981,6 +1973,7 @@ class SplitterService {
             }
         }
         this.containerSize = containerSize;
+        this.rtl = direction === 'rtl';
     }
     isPercent(size) {
         return /%$/.test(size);
@@ -2359,6 +2352,9 @@ class SplitterComponent {
         if (!isPresent(splitbars) || !isPresent(this.panes)) {
             return;
         }
+        if (!isDocumentAvailable()) {
+            return;
+        }
         const panesArray = this.panes.toArray();
         const splitBarsArray = splitbars.toArray();
         const components = [...panesArray, ...splitBarsArray]
@@ -2408,7 +2404,8 @@ class SplitterComponent {
                 else {
                     return this.element.nativeElement.clientWidth;
                 }
-            }
+            },
+            direction: this.direction
         });
     }
     get direction() {

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

@@ -7,7 +7,7 @@ import { Injectable, Directive, Optional, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i5 from '@progress/kendo-angular-common';
-import { Keys, shouldShowValidationUI, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged, WatermarkModule, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, shouldShowValidationUI, isDocumentAvailable, PreventableEvent as PreventableEvent$1, guid, hasObservers, isPresent as isPresent$1, focusableSelector, isChanged, WatermarkModule, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$1 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -33,8 +33,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1719935822,
-    version: '16.4.0-develop.2',
+    publishDate: 1719994250,
+    version: '16.4.0-develop.3',
     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'
 };
 
@@ -1857,7 +1857,9 @@ class SplitterService {
         }
         const notCollapsed = this.panes.filter(p => !p.collapsed);
         const allHaveFixedSize = notCollapsed.every(p => p.fixedSize);
-        notCollapsed[notCollapsed.length - 1].forceExpand = allHaveFixedSize ? true : false;
+        notCollapsed.filter(p => p.fixedSize).forEach(pane => {
+            pane.forceExpand = allHaveFixedSize ? true : false;
+        });
         return pane.collapsible;
     }
     togglePane(keyCode, index) {
@@ -1872,8 +1874,11 @@ class SplitterService {
     }
     resizePane(keyCode, index) {
         const state = this.dragState(index);
-        const direction = keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowUp;
-        const step = direction ? (-this.resizeStep) : this.resizeStep;
+        const direction = keyCode === Keys.ArrowLeft || keyCode === (this.rtl ? Keys.ArrowDown : Keys.ArrowUp);
+        let step = direction ? (-this.resizeStep) : this.resizeStep;
+        if (this.rtl) {
+            step = -step;
+        }
         this.setSize(state, step);
     }
     toggleContentOverlay(index, show) {
@@ -1917,22 +1922,9 @@ class SplitterService {
             pane.isResized = true;
             this.emit(pane.sizeChange, size);
         };
-        const prev = this.pane(state.prev.index);
-        const next = this.pane(state.next.index);
-        // determine which pane to resize
-        if (prev.fixedSize && next.fixedSize) {
-            // resizing both panes
-            resize(state.prev, delta);
-            resize(state.next, -delta);
-        }
-        else if (next.collapsible || next.fixedSize) {
-            // resizing next
-            resize(state.next, -delta);
-        }
-        else {
-            // resizing prev
-            resize(state.prev, delta);
-        }
+        // resizing both panes
+        resize(state.prev, delta);
+        resize(state.next, -delta);
         this.emit(this.layoutChange, {});
     }
     isDraggable(splitBarIndex) {
@@ -1958,7 +1950,7 @@ class SplitterService {
         }
         return this.panes[index];
     }
-    configure({ panes, orientation, containerSize }) {
+    configure({ panes, orientation, containerSize, direction }) {
         this.panes = panes;
         this.panes.forEach((pane, index) => {
             pane.order = index * 2;
@@ -1975,6 +1967,7 @@ class SplitterService {
             }
         }
         this.containerSize = containerSize;
+        this.rtl = direction === 'rtl';
     }
     isPercent(size) {
         return /%$/.test(size);
@@ -2351,6 +2344,9 @@ class SplitterComponent {
         if (!isPresent(splitbars) || !isPresent(this.panes)) {
             return;
         }
+        if (!isDocumentAvailable()) {
+            return;
+        }
         const panesArray = this.panes.toArray();
         const splitBarsArray = splitbars.toArray();
         const components = [...panesArray, ...splitBarsArray]
@@ -2400,7 +2396,8 @@ class SplitterComponent {
                 else {
                     return this.element.nativeElement.clientWidth;
                 }
-            }
+            },
+            direction: this.direction
         });
     }
     get direction() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "16.4.0-develop.2",
+  "version": "16.4.0-develop.3",
   "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": "16.4.0-develop.2",
-    "@progress/kendo-angular-l10n": "16.4.0-develop.2",
-    "@progress/kendo-angular-progressbar": "16.4.0-develop.2",
-    "@progress/kendo-angular-icons": "16.4.0-develop.2",
-    "@progress/kendo-angular-buttons": "16.4.0-develop.2",
-    "@progress/kendo-angular-intl": "16.4.0-develop.2",
+    "@progress/kendo-angular-common": "16.4.0-develop.3",
+    "@progress/kendo-angular-l10n": "16.4.0-develop.3",
+    "@progress/kendo-angular-progressbar": "16.4.0-develop.3",
+    "@progress/kendo-angular-icons": "16.4.0-develop.3",
+    "@progress/kendo-angular-buttons": "16.4.0-develop.3",
+    "@progress/kendo-angular-intl": "16.4.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "16.4.0-develop.2",
+    "@progress/kendo-angular-schematics": "16.4.0-develop.3",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/splitter/splitter.service.d.ts

@@ -5,6 +5,7 @@
 import { EventEmitter, NgZone } from '@angular/core';
 import { Orientation } from '../common/orientation';
 import { SplitterPaneComponent } from './splitter-pane.component';
+import { Direction } from '../common/direction';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -13,6 +14,7 @@ export declare type SplitterParameters = {
     containerSize: () => number;
     panes: Array<SplitterPaneComponent>;
     orientation: Orientation;
+    direction: Direction;
 };
 /**
  * @hidden
@@ -49,8 +51,9 @@ export declare class SplitterService {
     isDraggable(splitBarIndex: number): boolean;
     isStatic(splitBarIndex: number): boolean;
     pane(index: number): SplitterPaneComponent;
-    configure({ panes, orientation, containerSize }: SplitterParameters): void;
+    configure({ panes, orientation, containerSize, direction }: SplitterParameters): void;
     private containerSize;
+    private rtl;
     private isPercent;
     private toPixels;
     private emit;