@progress/kendo-angular-layout 7.1.5-dev.202210241150 → 7.1.6-dev.202211081310

package/card.module.d.ts

@@ -14,7 +14,7 @@ import * as i8 from "./card/directives/card-separator.directive";
 import * as i9 from "./card/directives/card-media.directive";
 import * as i10 from "@angular/common";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Card component.
  */
 export declare class CardModule {

package/drawer/models/drawer-animation.interface.d.ts

@@ -13,7 +13,7 @@ export interface DrawerAnimation {
      */
     duration: number;
     /**
-     * Specifies the type of the Drawer animation.
+     * Specifies the type of the Drawer animation. Currently, only the `slide` animation type is supported.
      */
     type?: string;
 }

package/drawer/models/drawer-item.interface.d.ts

@@ -8,12 +8,12 @@
 export interface DrawerItem {
     /**
      * The CSS classes that will be rendered on the item element of the Drawer.
-     * Supports the type of values that are supported by [ngClass]({{ site.data.urls.angular['ngclassapi'] }}).
+     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
      */
     cssClass?: any;
     /**
      * The CSS styles that will be rendered on the item element of the Drawer.
-     * Supports the type of values that are supported by [ngStyle]({{ site.data.urls.angular['ngstyleapi'] }}).
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
      */
     cssStyle?: any;
     /**

package/drawer.module.d.ts

@@ -14,7 +14,7 @@ import * as i8 from "./drawer/template-directives/footer-template.directive";
 import * as i9 from "./drawer/template-directives/item-template.directive";
 import * as i10 from "@angular/common";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Drawer component.
  */
 export declare class DrawerModule {

package/esm2015/avatar.module.js

@@ -13,7 +13,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Avatar component.
  */
 export class AvatarModule {

package/esm2015/card.module.js

@@ -30,7 +30,7 @@ const exportedModules = [
 ];
 const declarations = [...exportedModules];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Card component.
  */
 export class CardModule {

package/esm2015/drawer/list.component.js

@@ -52,6 +52,7 @@ export class DrawerListComponent {
                 }
                 else if (isArrowUpOrDown) {
                     if (e.target.classList.contains('k-drawer-item')) {
+                        e.preventDefault();
                         const keyName = e.keyCode === Keys.ArrowUp ? 'arrowUp' : 'arrowDown';
                         this.drawerService.changeFocusedItem(this.items, keyName, this.renderer);
                     }

package/esm2015/drawer.module.js

@@ -29,7 +29,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Drawer component.
  */
 export class DrawerModule {

package/esm2015/expansionpanel.module.js

@@ -16,7 +16,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ExpansionPanel component.
  */
 export class ExpansionPanelModule {

package/esm2015/gridlayout.module.js

@@ -15,7 +15,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the GridLayout component.
  */
 export class GridLayoutModule {

package/esm2015/layout.module.js

@@ -16,7 +16,7 @@ import { StackLayoutModule } from './stacklayout.module';
 import { GridLayoutModule } from './gridlayout.module';
 import * as i0 from "@angular/core";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Layout components.
  *
  * @example

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666612185,
+    publishDate: 1667912971,
     version: '',
     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/esm2015/panelbar.module.js

@@ -21,7 +21,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the PanelBar component.
  *
  * The module registers:

package/esm2015/splitter/splitter-bar.component.js

@@ -2,10 +2,11 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, Host, HostBinding, HostListener, Input } from '@angular/core';
+import { Component, Host, HostBinding, Input } from '@angular/core';
 import { Keys } from '@progress/kendo-angular-common';
 import { Subscription, of } from 'rxjs';
 import { delay, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
+import { shouldToggleOrResize } from './util';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-common";
 import * as i2 from "./splitter.service";
@@ -28,11 +29,12 @@ const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
  * @hidden
  */
 export class SplitterBarComponent {
-    constructor(draggable, element, splitter, localization) {
+    constructor(draggable, element, splitterService, localization, renderer) {
         this.draggable = draggable;
         this.element = element;
-        this.splitter = splitter;
+        this.splitterService = splitterService;
         this.localization = localization;
+        this.renderer = renderer;
         this.orientation = 'horizontal';
         this.index = 0;
         this.ariaRole = 'separator';
@@ -43,12 +45,12 @@ export class SplitterBarComponent {
         return this.localization.rtl ? 'rtl' : 'ltr';
     }
     get tabIndex() {
-        return this.splitter.isStatic(this.index) ? -1 : 0;
+        return this.splitterService.isStatic(this.index) ? -1 : 0;
     }
     get hostClasses() {
         const isHorizontal = this.orientation === 'horizontal';
-        const isDraggable = this.splitter.isDraggable(this.index);
-        const isStatic = this.splitter.isStatic(this.index);
+        const isDraggable = this.splitterService.isDraggable(this.index);
+        const isStatic = this.splitterService.isStatic(this.index);
         return classFromObject({
             'k-focus': this.focused,
             'k-splitbar': true,
@@ -64,52 +66,13 @@ export class SplitterBarComponent {
     get order() {
         return 2 * this.index + 1;
     }
-    collapseAny() {
-        if (this.expandLast) {
-            this.toggleNext();
-        }
-        else {
-            this.tryToggleNearest();
-        }
-    }
-    onFocusIn() {
-        this.focused = true;
-    }
-    onFocusOut() {
-        this.focused = false;
-    }
-    onKeyDown(event) {
-        const keyCode = event && event.keyCode;
-        const isHorizontal = this.orientation === 'horizontal';
-        const resize = delta => {
-            event.preventDefault();
-            const state = this.splitter.dragState(this.index);
-            this.splitter.setSize(state, delta);
-        };
-        if (keyCode === Keys.Enter) {
-            event.preventDefault();
-            this.collapseAny();
-        }
-        else if (isHorizontal && keyCode === Keys.ArrowLeft) {
-            resize(-10);
-        }
-        else if (isHorizontal && keyCode === Keys.ArrowRight) {
-            resize(10);
-        }
-        else if (!isHorizontal && keyCode === Keys.ArrowUp) {
-            resize(-10);
-        }
-        else if (!isHorizontal && keyCode === Keys.ArrowDown) {
-            resize(10);
-        }
-    }
     get expandLast() {
-        const panes = this.splitter.panes;
+        const panes = this.splitterService.panes;
         return panes.length === 2 && panes[1].collapsed;
     }
     ngOnInit() {
         let state;
-        const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitter.isDraggable(this.index)), tap(() => state = this.splitter.dragState(this.index)), tap(() => this.splitter.toggleContentOverlay(this.index, true)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(({ pageX, pageY, originalX, originalY }) => {
+        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 }) => {
             let delta;
             if (this.orientation === 'vertical') {
                 delta = pageY - originalY;
@@ -120,10 +83,15 @@ export class SplitterBarComponent {
             else {
                 delta = pageX - originalX;
             }
-            this.splitter.setSize(state, delta);
+            this.splitterService.setSize(state, delta);
         });
         this.subscriptions.add(listener);
-        this.subscriptions.add(this.draggable.kendoRelease.subscribe(() => this.splitter.toggleContentOverlay(this.index, false)));
+        this.subscriptions.add(this.draggable.kendoRelease.subscribe(() => this.splitterService.toggleContentOverlay(this.index, false)));
+        const element = this.element.nativeElement;
+        this.subscriptions.add(this.renderer.listen(element, 'keydown', event => this.onKeyDown(event)));
+        this.subscriptions.add(this.renderer.listen(element, 'focusin', () => this.focused = true));
+        this.subscriptions.add(this.renderer.listen(element, 'focusout', () => this.focused = false));
+        this.subscriptions.add(this.renderer.listen(element, 'dblclick', () => this.togglePane()));
     }
     ngOnDestroy() {
         if (this.subscriptions) {
@@ -131,26 +99,26 @@ export class SplitterBarComponent {
         }
     }
     togglePrevious() {
-        this.splitter.tryToggle(this.index);
+        this.splitterService.tryToggle(this.index);
     }
     toggleNext() {
-        this.splitter.tryToggle(this.index + 1);
+        this.splitterService.tryToggle(this.index + 1);
     }
     shouldShowIcon(iconName) {
         const paneIndex = iconName === 'prev' ? this.index : this.index + 1;
         const relatedPaneIndex = iconName === 'prev' ? this.index + 1 : this.index;
-        const pane = this.splitter.pane(paneIndex);
-        const relatedPane = this.splitter.pane(relatedPaneIndex);
+        const pane = this.splitterService.pane(paneIndex);
+        const relatedPane = this.splitterService.pane(relatedPaneIndex);
         const isCollapsible = pane.collapsible;
         return isCollapsible && !relatedPane.isHidden;
     }
     collapseClass(order) {
-        const pane = this.splitter.pane(this.index);
+        const pane = this.splitterService.pane(this.index);
         const isCollapsible = pane.collapsible;
         return isCollapsible ? `k-collapse-${order}` : '';
     }
     previousArrowClass() {
-        const pane = this.splitter.pane(this.index);
+        const pane = this.splitterService.pane(this.index);
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
@@ -163,7 +131,7 @@ export class SplitterBarComponent {
         });
     }
     nextArrowClass() {
-        const pane = this.splitter.pane(this.index + 1);
+        const pane = this.splitterService.pane(this.index + 1);
         const isCollapsible = pane.collapsible;
         const isCollapsed = pane.collapsed;
         const isHorizontal = this.orientation === 'horizontal';
@@ -175,16 +143,41 @@ export class SplitterBarComponent {
             'k-i-caret-alt-up': isCollapsible && !isHorizontal && isCollapsed
         });
     }
+    togglePane() {
+        if (this.expandLast) {
+            this.toggleNext();
+        }
+        else {
+            this.tryToggleNearest();
+        }
+    }
+    onKeyDown(event) {
+        const keyCode = event.keyCode;
+        const shouldToggle = event.ctrlKey || event.metaKey;
+        if (keyCode === Keys.Enter) {
+            event.preventDefault();
+            this.togglePane();
+        }
+        else if (shouldToggleOrResize(keyCode, this.orientation)) {
+            event.preventDefault();
+            if (shouldToggle) {
+                this.splitterService.togglePane(keyCode, this.index);
+            }
+            else {
+                this.splitterService.resizePane(keyCode, this.index);
+            }
+        }
+    }
     tryToggleNearest() {
         const prev = this.index;
         const next = this.index + 1;
-        if (!this.splitter.tryToggle(prev)) {
-            this.splitter.tryToggle(next);
+        if (!this.splitterService.tryToggle(prev)) {
+            this.splitterService.tryToggle(next);
         }
     }
 }
-SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.SplitterService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { listeners: { "dblclick": "collapseAny()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown": "onKeyDown($event)" }, properties: { "attr.aria-orientation": "this.orientation", "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
+SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.SplitterService }, { token: i3.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.aria-orientation": "this.orientation", "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "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]="collapseClass('prev')" (click)="togglePrevious()">
             <span [class]="previousArrowClass()"></span>
         </div>
@@ -209,7 +202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: i2.SplitterService }, { type: i3.LocalizationService }]; }, propDecorators: { orientation: [{
+                }] }, { type: i0.ElementRef }, { type: i2.SplitterService }, { type: i3.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { orientation: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -234,16 +227,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['style.order']
-            }], collapseAny: [{
-                type: HostListener,
-                args: ['dblclick']
-            }], onFocusIn: [{
-                type: HostListener,
-                args: ['focusin']
-            }], onFocusOut: [{
-                type: HostListener,
-                args: ['focusout']
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });

package/esm2015/splitter/splitter-pane.component.js

@@ -13,6 +13,10 @@ export class SplitterPaneComponent {
         this.element = element;
         this.renderer = renderer;
         this.cdr = cdr;
+        /**
+         * The value of the aria-label attribute of the auxiliary separator.
+         */
+        this.separatorLabel = 'Splitter pane';
         /**
          * Specifies if the user is allowed to resize the pane and provide space for other panes.
          */
@@ -158,7 +162,7 @@ export class SplitterPaneComponent {
     }
 }
 SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitterPaneComponent, 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: `
         <ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
         <div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
     `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -176,6 +180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], separatorLabel: [{
+                type: Input
             }], min: [{
                 type: Input
             }], max: [{

package/esm2015/splitter/splitter.component.js

@@ -74,6 +74,16 @@ export class SplitterComponent {
         this.layoutChange = this.splitterService.layoutChange;
         this.configure = this.configure.bind(this);
     }
+    /**
+     * The distance in pixels that the separator is moved with during keyboard navigation.
+     * @default 10
+     */
+    set resizeStep(value) {
+        this.splitterService.resizeStep = value;
+    }
+    get resizeStep() {
+        return this.splitterService.resizeStep;
+    }
     get hostClasses() {
         return true;
     }
@@ -90,9 +100,17 @@ export class SplitterComponent {
         if (!isPresent(splitbars) || !isPresent(this.panes)) {
             return;
         }
-        const components = [...this.panes.toArray(), ...splitbars.toArray()]
+        const panesArray = this.panes.toArray();
+        const splitBarsArray = splitbars.toArray();
+        const components = [...panesArray, ...splitBarsArray]
             .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);
+            }
+        });
         elements.forEach(element => this.renderer.appendChild(this.element.nativeElement, element));
     }
     ngAfterContentInit() {
@@ -139,7 +157,7 @@ export class SplitterComponent {
     }
 }
 SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.0.0", version: "12.2.16", type: SplitterComponent, selector: "kendo-splitter", inputs: { orientation: "orientation" }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitterComponent, selector: "kendo-splitter", inputs: { orientation: "orientation", 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: [
         SplitterService,
         LocalizationService,
         {
@@ -199,6 +217,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [SplitterPaneComponent]
                 }] }]; }, propDecorators: { orientation: [{
                 type: Input
+            }], resizeStep: [{
+                type: Input
             }], layoutChange: [{
                 type: Output
             }], hostClasses: [{

package/esm2015/splitter/splitter.service.js

@@ -3,6 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { isDevMode, EventEmitter, 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';
 /**
@@ -12,6 +14,7 @@ export class SplitterService {
     constructor(zone) {
         this.zone = zone;
         this.layoutChange = new EventEmitter();
+        this.resizeStep = 10;
         this.containerSize = () => { };
     }
     tryToggle(paneIndex) {
@@ -29,6 +32,22 @@ export class SplitterService {
         notCollapsed[notCollapsed.length - 1].forceExpand = allHaveFixedSize ? true : false;
         return pane.collapsible;
     }
+    togglePane(keyCode, index) {
+        const prev = this.pane(index);
+        const next = this.pane(index + 1);
+        if (shouldTogglePrev(keyCode, prev, next)) {
+            this.tryToggle(index);
+        }
+        else if (shouldToggleNext(keyCode, prev, next)) {
+            this.tryToggle(index + 1);
+        }
+    }
+    resizePane(keyCode, index) {
+        const state = this.dragState(index);
+        const direction = keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowUp;
+        const step = direction ? (-this.resizeStep) : this.resizeStep;
+        this.setSize(state, step);
+    }
     toggleContentOverlay(index, show) {
         this.pane(index).toggleOverlay(show);
         this.pane(index + 1).toggleOverlay(show);

package/esm2015/splitter/util.js

@@ -0,0 +1,34 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Keys } from "@progress/kendo-angular-common";
+/**
+ * @hidden
+ */
+export const shouldTogglePrev = (keyCode, prev, next) => {
+    const leftArrow = keyCode === Keys.ArrowLeft;
+    const upArrow = keyCode === Keys.ArrowUp;
+    const collapsePrev = !prev.collapsed && !next.collapsed && (leftArrow || upArrow);
+    const expandPrev = prev.collapsed && !(leftArrow || upArrow);
+    return collapsePrev || expandPrev;
+};
+/**
+ * @hidden
+ */
+export const shouldToggleNext = (keyCode, prev, next) => {
+    const leftArrow = keyCode === Keys.ArrowLeft;
+    const upArrow = keyCode === Keys.ArrowUp;
+    const collapseNext = !next.collapsed && !prev.collapsed && !(leftArrow || upArrow);
+    const expandNext = next.collapsed && (leftArrow || upArrow);
+    return collapseNext || expandNext;
+};
+/**
+ * @hidden
+ */
+export const shouldToggleOrResize = (keyCode, orientation) => {
+    const isHorizontal = orientation === 'horizontal';
+    const isHorizontalChange = isHorizontal && (keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight);
+    const isVerticalChange = !isHorizontal && (keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown);
+    return isHorizontalChange || isVerticalChange;
+};

package/esm2015/splitter.module.js

@@ -18,7 +18,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Splitter component.
  *
  * The module registers:

package/esm2015/stacklayout.module.js

@@ -13,7 +13,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the StackLayout component.
  */
 export class StackLayoutModule {

package/esm2015/stepper.module.js

@@ -31,7 +31,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Stepper component.
  */
 export class StepperModule {

package/esm2015/tabstrip.module.js

@@ -28,7 +28,7 @@ const declarations = [
     TabStripScrollableButtonComponent
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TabStrip component.
  *
  * The module registers:

package/esm2015/tilelayout.module.js

@@ -21,7 +21,7 @@ const declarations = [
     ...exportedModules
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TileLayout component.
  *
  * The module registers:

package/expansionpanel.module.d.ts

@@ -8,7 +8,7 @@ import * as i2 from "./expansionpanel/expansionpanel-title.directive";
 import * as i3 from "@angular/common";
 import * as i4 from "@progress/kendo-angular-common";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ExpansionPanel component.
  */
 export declare class ExpansionPanelModule {