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

package/fesm2015/kendo-angular-layout.js

@@ -26,7 +26,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1666769095,
+    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'
 };
@@ -1519,6 +1519,10 @@ 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.
          */
@@ -1664,7 +1668,7 @@ 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -1682,6 +1686,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], size: [{
                 type: Input
+            }], separatorLabel: [{
+                type: Input
             }], min: [{
                 type: Input
             }], max: [{
@@ -1718,6 +1724,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class.k-scrollable']
             }] } });
 
+/**
+ * @hidden
+ */
+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
+ */
+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
+ */
+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;
+};
+
 const SIZING_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/layout/splitter/panes/#toc-size';
 /**
  * @hidden
@@ -1726,6 +1762,7 @@ class SplitterService {
     constructor(zone) {
         this.zone = zone;
         this.layoutChange = new EventEmitter();
+        this.resizeStep = 10;
         this.containerSize = () => { };
     }
     tryToggle(paneIndex) {
@@ -1743,6 +1780,22 @@ 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);
@@ -1882,11 +1935,12 @@ const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
  * @hidden
  */
 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';
@@ -1897,12 +1951,12 @@ 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,
@@ -1918,52 +1972,13 @@ 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;
@@ -1974,10 +1989,15 @@ 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) {
@@ -1985,26 +2005,26 @@ 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';
@@ -2017,7 +2037,7 @@ 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';
@@ -2029,16 +2049,41 @@ 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$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: SplitterService }, { token: i1.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$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: SplitterService }, { token: i1.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>
@@ -2063,7 +2108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }]; }, propDecorators: { orientation: [{
+                }] }, { type: i0.ElementRef }, { type: SplitterService }, { type: i1.LocalizationService }, { type: i0.Renderer2 }]; }, propDecorators: { orientation: [{
                 type: Input
             }, {
                 type: HostBinding,
@@ -2088,18 +2133,6 @@ 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']]
             }] } });
 
 /**
@@ -2159,6 +2192,16 @@ 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;
     }
@@ -2175,9 +2218,17 @@ 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() {
@@ -2224,7 +2275,7 @@ class SplitterComponent {
     }
 }
 SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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.ɵ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,
         {
@@ -2284,6 +2335,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: [{
@@ -4428,6 +4481,7 @@ 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);
                     }
@@ -8518,7 +8572,7 @@ const declarations$a = [
     ...exportedModules$a
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Avatar component.
  */
 class AvatarModule {
@@ -8551,7 +8605,7 @@ const exportedModules$9 = [
 ];
 const declarations$9 = [...exportedModules$9];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Card component.
  */
 class CardModule {
@@ -8600,7 +8654,7 @@ const declarations$8 = [
     ...exportedModules$8
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Drawer component.
  */
 class DrawerModule {
@@ -8636,7 +8690,7 @@ const declarations$7 = [
     ...exportedModules$7
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ExpansionPanel component.
  */
 class ExpansionPanelModule {
@@ -8666,7 +8720,7 @@ const declarations$6 = [
     ...exportedModules$6
 ];
 /**
- * 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:
@@ -8707,7 +8761,7 @@ const declarations$5 = [
     ...exportedModules$5
 ];
 /**
- * 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:
@@ -8754,7 +8808,7 @@ const declarations$4 = [
     ...exportedModules$4
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Stepper component.
  */
 class StepperModule {
@@ -8793,7 +8847,7 @@ const declarations$3 = [
     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:
@@ -8839,7 +8893,7 @@ const declarations$2 = [
     ...exportedModules$2
 ];
 /**
- * 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:
@@ -9109,7 +9163,7 @@ const declarations$1 = [
     ...exportedModules$1
 ];
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the StackLayout component.
  */
 class StackLayoutModule {
@@ -9304,7 +9358,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.
  */
 class GridLayoutModule {
@@ -9324,7 +9378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }] });
 
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Layout components.
  *
  * @example

package/gridlayout.module.d.ts

@@ -7,7 +7,7 @@ import * as i1 from "./layouts/grid-layout.component";
 import * as i2 from "./layouts/gridlayout-item.component";
 import * as i3 from "@angular/common";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the GridLayout component.
  */
 export declare class GridLayoutModule {

package/layout.module.d.ts

@@ -15,7 +15,7 @@ import * as i9 from "./tilelayout.module";
 import * as i10 from "./stacklayout.module";
 import * as i11 from "./gridlayout.module";
 /**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Layout components.
  *
  * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "7.1.5",
+  "version": "7.1.6-dev.202211081310",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/panelbar.module.d.ts

@@ -10,7 +10,7 @@ import * as i4 from "./panelbar/panelbar-item-template.directive";
 import * as i5 from "./panelbar/panelbar-item-title.directive";
 import * as i6 from "@angular/common";
 /**
- * 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/splitter/splitter-bar.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Orientation } from '../common/orientation';
 import { DraggableDirective } from '@progress/kendo-angular-common';
@@ -14,8 +14,9 @@ import * as i0 from "@angular/core";
 export declare class SplitterBarComponent implements OnInit, OnDestroy {
     draggable: DraggableDirective;
     element: ElementRef<HTMLElement>;
-    private splitter;
+    private splitterService;
     private localization;
+    private renderer;
     orientation: Orientation;
     get direction(): string;
     index: number;
@@ -25,12 +26,8 @@ export declare class SplitterBarComponent implements OnInit, OnDestroy {
     get tabIndex(): number;
     get hostClasses(): string;
     get order(): number;
-    collapseAny(): void;
-    onFocusIn(): void;
-    onFocusOut(): void;
-    onKeyDown(event: any): void;
     private get expandLast();
-    constructor(draggable: DraggableDirective, element: ElementRef<HTMLElement>, splitter: SplitterService, localization: LocalizationService);
+    constructor(draggable: DraggableDirective, element: ElementRef<HTMLElement>, splitterService: SplitterService, localization: LocalizationService, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
     togglePrevious(): void;
@@ -39,7 +36,9 @@ export declare class SplitterBarComponent implements OnInit, OnDestroy {
     collapseClass(order: string): string;
     previousArrowClass(): string;
     nextArrowClass(): string;
+    private togglePane;
+    private onKeyDown;
     private tryToggleNearest;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterBarComponent, [{ host: true; }, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterBarComponent, [{ host: true; }, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SplitterBarComponent, "kendo-splitter-bar", never, { "orientation": "orientation"; "index": "index"; }, {}, never, never>;
 }

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

@@ -23,6 +23,10 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
      */
     set size(newSize: string);
     get size(): string;
+    /**
+     * The value of the aria-label attribute of the auxiliary separator.
+     */
+    separatorLabel: string;
     /**
      * Sets the minimum possible size of the pane.
      */
@@ -103,5 +107,5 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
     detectChanges(): void;
     private setOrderStyles;
     static ɵfac: i0.ɵɵFactoryDeclaration<SplitterPaneComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SplitterPaneComponent, "kendo-splitter-pane", ["kendoSplitterPane"], { "order": "order"; "size": "size"; "min": "min"; "max": "max"; "resizable": "resizable"; "collapsible": "collapsible"; "scrollable": "scrollable"; "collapsed": "collapsed"; "orientation": "orientation"; "containsSplitter": "containsSplitter"; "overlayContent": "overlayContent"; }, { "sizeChange": "sizeChange"; "collapsedChange": "collapsedChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SplitterPaneComponent, "kendo-splitter-pane", ["kendoSplitterPane"], { "order": "order"; "size": "size"; "separatorLabel": "separatorLabel"; "min": "min"; "max": "max"; "resizable": "resizable"; "collapsible": "collapsible"; "scrollable": "scrollable"; "collapsed": "collapsed"; "orientation": "orientation"; "containsSplitter": "containsSplitter"; "overlayContent": "overlayContent"; }, { "sizeChange": "sizeChange"; "collapsedChange": "collapsedChange"; }, never, ["*"]>;
 }

package/splitter/splitter.component.d.ts

@@ -56,6 +56,12 @@ export declare class SplitterComponent implements AfterContentInit {
      * Panes in a vertical Splitter are placed vertically.
      */
     orientation: Orientation;
+    /**
+     * The distance in pixels that the separator is moved with during keyboard navigation.
+     * @default 10
+     */
+    set resizeStep(value: number);
+    get resizeStep(): number;
     /**
      * Fires after a Splitter pane is resized or collapsed.
      * Useful for triggering layout calculations on components
@@ -81,5 +87,5 @@ export declare class SplitterComponent implements AfterContentInit {
     private configure;
     private get direction();
     static ɵfac: i0.ɵɵFactoryDeclaration<SplitterComponent, [null, null, null, null, { optional: true; host: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SplitterComponent, "kendo-splitter", ["kendoSplitter"], { "orientation": "orientation"; }, { "layoutChange": "layoutChange"; }, ["panes"], ["kendo-splitter-pane"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SplitterComponent, "kendo-splitter", ["kendoSplitter"], { "orientation": "orientation"; "resizeStep": "resizeStep"; }, { "layoutChange": "layoutChange"; }, ["panes"], ["kendo-splitter-pane"]>;
 }

package/splitter/splitter.service.d.ts

@@ -38,8 +38,11 @@ export declare class SplitterService {
     private zone;
     panes: Array<SplitterPaneComponent>;
     layoutChange: EventEmitter<any>;
+    resizeStep: number;
     constructor(zone: NgZone);
     tryToggle(paneIndex: number): boolean;
+    togglePane(keyCode: number, index: number): void;
+    resizePane(keyCode: number, index: number): void;
     toggleContentOverlay(index: number, show: boolean): void;
     dragState(splitbarIndex: number): SplitterDragState;
     setSize(state: SplitterDragState, delta: number): void;

package/splitter/util.d.ts

@@ -0,0 +1,17 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SplitterPaneComponent } from "./splitter-pane.component";
+/**
+ * @hidden
+ */
+export declare const shouldTogglePrev: (keyCode: number, prev: SplitterPaneComponent, next: SplitterPaneComponent) => boolean;
+/**
+ * @hidden
+ */
+export declare const shouldToggleNext: (keyCode: number, prev: SplitterPaneComponent, next: SplitterPaneComponent) => boolean;
+/**
+ * @hidden
+ */
+export declare const shouldToggleOrResize: (keyCode: number, orientation: string) => boolean;

package/splitter.module.d.ts

@@ -9,7 +9,7 @@ import * as i3 from "./splitter/splitter-pane.component";
 import * as i4 from "@angular/common";
 import * as i5 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 Splitter component.
  *
  * The module registers: