@progress/kendo-angular-layout 6.4.1 → 6.5.0-dev.202202091626

package/dist/fesm5/index.js

@@ -5,11 +5,11 @@
 import { __decorate, __metadata, __param, __extends, __assign } from 'tslib';
 import { Injectable, Directive, TemplateRef, Optional, isDevMode, Input, ViewChild, ElementRef, HostBinding, ViewChildren, QueryList, ContentChildren, Component, SkipSelf, Host, Renderer2, Output, EventEmitter, ContentChild, HostListener, ChangeDetectorRef, NgZone, Inject, forwardRef, ViewEncapsulation, NgModule } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
-import { Keys, PreventableEvent, isDocumentAvailable, hasObservers, EventsModule, DraggableDirective, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, DraggableDirective, PreventableEvent, isDocumentAvailable, hasObservers, EventsModule, DraggableModule, ResizeSensorModule, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { trigger, state, style, transition, animate, AUTO_STYLE, AnimationBuilder } from '@angular/animations';
 import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
-import { take, tap, filter, switchMap, delay, takeUntil, map } from 'rxjs/operators';
+import { tap, filter, switchMap, delay, takeUntil, map, take } from 'rxjs/operators';
 import Draggable from '@telerik/kendo-draggable';
 import { CommonModule } from '@angular/common';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
@@ -21,7 +21,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1643117691,
+    publishDate: 1644423873,
     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'
 };
@@ -226,6 +226,10 @@ var getStylingClasses = function (componentType, stylingOption, previousValue, n
  * @hidden
  */
 var mapShapeToRounded = function (shape) { return SHAPE_TO_ROUNDED[shape] || null; };
+/**
+ * @hidden
+ */
+var isNumber = function (value) { return typeof value === 'number' && isFinite(value); };
 
 var focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
 var toClassList = function (classNames) { return String(classNames).trim().split(' '); };
@@ -1683,144 +1687,424 @@ var SplitterService = /** @class */ (function () {
     return SplitterService;
 }());
 
+var stopPropagation = function (_a) {
+    var event = _a.originalEvent;
+    event.stopPropagation();
+    event.preventDefault();
+};
+var preventOnDblClick = function (release) { return function (mouseDown) {
+    return of(mouseDown).pipe(delay(150), takeUntil(release));
+}; };
+var classFromObject = function (classes) { return Object.keys(classes).filter(function (c) { return classes[c]; }).join(' '); };
+var createMoveStream = function (draggable) { return function (mouseDown) {
+    return draggable.kendoDrag
+        .pipe(takeUntil(draggable.kendoRelease), map(function (_a) {
+        var pageX = _a.pageX, pageY = _a.pageY;
+        return ({
+            originalX: mouseDown.pageX,
+            originalY: mouseDown.pageY,
+            pageX: pageX,
+            pageY: pageY
+        });
+    }));
+}; };
 /**
- * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
- *
- * ```ts-preview
- *
- *  @Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-splitter style="height: 280px;">
- *
- *          <kendo-splitter-pane [collapsible]="true" size="30%">
- *            <h3>Inner splitter / left pane</h3>
- *            <p>Resizable and collapsible.</p>
- *          </kendo-splitter-pane>
- *
- *          <kendo-splitter-pane>
- *            <h3>Inner splitter / center pane</h3>
- *            <p>Resizable only.</p>
- *          </kendo-splitter-pane>
- *
- *          <kendo-splitter-pane [collapsible]="true" size="30%">
- *            <h3>Inner splitter / right pane</h3>
- *            <p>Resizable and collapsible.</p>
- *          </kendo-splitter-pane>
- *
- *        </kendo-splitter>
- *      `,
- *    styles: [ `
- *        h3 { font-size: 1.2em; }
- *        h3, p { margin: 10px; padding: 0; }
- *    ` ]
- *  })
- *  class AppComponent {}
- * ```
+ * @hidden
  */
-var SplitterComponent = /** @class */ (function () {
-    function SplitterComponent(element, splitterService, localization, enclosingPane) {
+var SplitterBarComponent = /** @class */ (function () {
+    function SplitterBarComponent(draggable, element, splitter, localization) {
+        this.draggable = draggable;
         this.element = element;
-        this.splitterService = splitterService;
+        this.splitter = splitter;
         this.localization = localization;
-        this.enclosingPane = enclosingPane;
-        /**
-         * Specifies the orientation of the panes within the Splitter.
-         * Panes in a horizontal Splitter are placed horizontally.
-         * Panes in a vertical Splitter are placed vertically.
-         */
         this.orientation = 'horizontal';
-        this.ariaRole = 'splitter';
-        validatePackage(packageMetadata);
-        if (enclosingPane) {
-            enclosingPane.containsSplitter = true;
-        }
-        // the handler only runs in NgZone if there are bound handlers
-        // this line merges both streams
-        this.layoutChange = this.splitterService.layoutChange;
-        this.configure = this.configure.bind(this);
+        this.index = 0;
+        this.ariaRole = 'separator';
+        this.focused = false;
+        this.subscriptions = new Subscription();
     }
-    Object.defineProperty(SplitterComponent.prototype, "hostClasses", {
+    Object.defineProperty(SplitterBarComponent.prototype, "direction", {
         get: function () {
-            return true;
+            return this.localization.rtl ? 'rtl' : 'ltr';
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitterComponent.prototype, "horizontalHostClasses", {
+    Object.defineProperty(SplitterBarComponent.prototype, "tabIndex", {
         get: function () {
-            return this.orientation === 'horizontal';
+            return this.splitter.isStatic(this.index) ? -1 : 0;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitterComponent.prototype, "verticalHostClasses", {
+    Object.defineProperty(SplitterBarComponent.prototype, "hostClasses", {
         get: function () {
-            return this.orientation === 'vertical';
+            var isHorizontal = this.orientation === 'horizontal';
+            var isDraggable = this.splitter.isDraggable(this.index);
+            var isStatic = this.splitter.isStatic(this.index);
+            return classFromObject({
+                'k-state-focused': this.focused,
+                'k-splitbar': true,
+                'k-splitbar-horizontal': isHorizontal,
+                'k-splitbar-vertical': !isHorizontal,
+                'k-splitbar-draggable-horizontal': isHorizontal && isDraggable,
+                'k-splitbar-draggable-vertical': !isHorizontal && isDraggable,
+                'k-splitbar-static-horizontal': isHorizontal && isStatic,
+                'k-splitbar-static-vertical': !isHorizontal && isStatic,
+                'k-touch-action-none': isDraggable
+            });
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitterComponent.prototype, "dir", {
+    Object.defineProperty(SplitterBarComponent.prototype, "order", {
         get: function () {
-            return this.direction;
+            return 2 * this.index + 1;
         },
         enumerable: true,
         configurable: true
     });
-    SplitterComponent.prototype.ngAfterContentInit = function () {
-        this.reconfigure();
-    };
-    SplitterComponent.prototype.ngOnChanges = function (changes) {
-        if (changes.orientation && !changes.orientation.isFirstChange()) {
-            this.reconfigure();
+    SplitterBarComponent.prototype.collapseAny = function () {
+        if (this.expandLast) {
+            this.toggleNext();
         }
-    };
-    SplitterComponent.prototype.ngOnDestroy = function () {
-        if (this.enclosingPane) {
-            this.enclosingPane.containsSplitter = false;
+        else {
+            this.tryToggleNearest();
         }
-        this.unsubscribeChanges();
     };
-    SplitterComponent.prototype.reconfigure = function () {
-        this.unsubscribeChanges();
-        this.configure();
-        this.paneChangesSubscription = this.panes.changes.subscribe(this.configure);
+    SplitterBarComponent.prototype.onFocusIn = function () {
+        this.focused = true;
     };
-    SplitterComponent.prototype.unsubscribeChanges = function () {
-        if (this.paneChangesSubscription) {
-            this.paneChangesSubscription.unsubscribe();
-            this.paneChangesSubscription = null;
-        }
+    SplitterBarComponent.prototype.onFocusOut = function () {
+        this.focused = false;
     };
-    SplitterComponent.prototype.configure = function () {
+    SplitterBarComponent.prototype.onKeyDown = function (event) {
         var _this = this;
-        this.splitterService.configure({
-            panes: this.panes.toArray(),
-            orientation: this.orientation,
-            containerSize: function () {
-                if (_this.orientation === 'vertical') {
-                    return _this.element.nativeElement.clientHeight;
-                }
-                else {
-                    return _this.element.nativeElement.clientWidth;
-                }
-            }
-        });
+        var keyCode = event && event.keyCode;
+        var isHorizontal = this.orientation === 'horizontal';
+        var resize = function (delta) {
+            event.preventDefault();
+            var state$$1 = _this.splitter.dragState(_this.index);
+            _this.splitter.setSize(state$$1, 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);
+        }
     };
-    Object.defineProperty(SplitterComponent.prototype, "direction", {
+    Object.defineProperty(SplitterBarComponent.prototype, "expandLast", {
         get: function () {
-            return this.localization.rtl ? 'rtl' : 'ltr';
+            var panes = this.splitter.panes;
+            return panes.length === 2 && panes[1].collapsed;
         },
         enumerable: true,
         configurable: true
     });
+    SplitterBarComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        var state$$1;
+        var listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(function () { return _this.splitter.isDraggable(_this.index); }), tap(function () { return state$$1 = _this.splitter.dragState(_this.index); }), tap(function () { return _this.splitter.toggleContentOverlay(_this.index, true); }), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(function (_a) {
+            var pageX = _a.pageX, pageY = _a.pageY, originalX = _a.originalX, originalY = _a.originalY;
+            var delta;
+            if (_this.orientation === 'vertical') {
+                delta = pageY - originalY;
+            }
+            else if (_this.direction === 'rtl') {
+                delta = originalX - pageX;
+            }
+            else {
+                delta = pageX - originalX;
+            }
+            _this.splitter.setSize(state$$1, delta);
+        });
+        this.subscriptions.add(listener);
+        this.subscriptions.add(this.draggable.kendoRelease.subscribe(function () { return _this.splitter.toggleContentOverlay(_this.index, false); }));
+    };
+    SplitterBarComponent.prototype.ngOnDestroy = function () {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    };
+    SplitterBarComponent.prototype.togglePrevious = function () {
+        this.splitter.tryToggle(this.index);
+    };
+    SplitterBarComponent.prototype.toggleNext = function () {
+        this.splitter.tryToggle(this.index + 1);
+    };
+    SplitterBarComponent.prototype.previousArrowClass = function () {
+        var pane = this.splitter.pane(this.index);
+        var nextPane = this.splitter.pane(this.index + 1);
+        var isCollapsible = pane.collapsible;
+        var isCollapsed = pane.collapsed;
+        var isHorizontal = this.orientation === 'horizontal';
+        return classFromObject({
+            'k-icon': true,
+            'k-hidden': !isCollapsible || nextPane.isHidden,
+            'k-collapse-prev': isCollapsible,
+            'k-i-arrow-60-left': isCollapsible && isHorizontal && !isCollapsed,
+            'k-i-arrow-60-right': isCollapsible && isHorizontal && isCollapsed,
+            'k-i-arrow-60-up': isCollapsible && !isHorizontal && !isCollapsed,
+            'k-i-arrow-60-down': isCollapsible && !isHorizontal && isCollapsed
+        });
+    };
+    SplitterBarComponent.prototype.nextArrowClass = function () {
+        var pane = this.splitter.pane(this.index + 1);
+        var prevPane = this.splitter.pane(this.index);
+        var isCollapsible = pane.collapsible;
+        var isCollapsed = pane.collapsed;
+        var isHorizontal = this.orientation === 'horizontal';
+        return classFromObject({
+            'k-icon': true,
+            'k-hidden': !isCollapsible || prevPane.isHidden,
+            'k-collapse-next': isCollapsible,
+            'k-i-arrow-60-right': isCollapsible && isHorizontal && !isCollapsed,
+            'k-i-arrow-60-left': isCollapsible && isHorizontal && isCollapsed,
+            'k-i-arrow-60-down': isCollapsible && !isHorizontal && !isCollapsed,
+            'k-i-arrow-60-up': isCollapsible && !isHorizontal && isCollapsed
+        });
+    };
+    SplitterBarComponent.prototype.tryToggleNearest = function () {
+        var prev = this.index;
+        var next = this.index + 1;
+        if (!this.splitter.tryToggle(prev)) {
+            this.splitter.tryToggle(next);
+        }
+    };
     __decorate([
         Input(),
+        HostBinding('attr.aria-orientation'),
         __metadata("design:type", String)
-    ], SplitterComponent.prototype, "orientation", void 0);
+    ], SplitterBarComponent.prototype, "orientation", void 0);
     __decorate([
-        Output(),
+        Input(),
+        __metadata("design:type", Number)
+    ], SplitterBarComponent.prototype, "index", void 0);
+    __decorate([
+        HostBinding('attr.role'),
+        __metadata("design:type", String)
+    ], SplitterBarComponent.prototype, "ariaRole", void 0);
+    __decorate([
+        HostBinding('class.k-state-focused'),
+        __metadata("design:type", Boolean)
+    ], SplitterBarComponent.prototype, "focused", void 0);
+    __decorate([
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], SplitterBarComponent.prototype, "tabIndex", null);
+    __decorate([
+        HostBinding('class'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], SplitterBarComponent.prototype, "hostClasses", null);
+    __decorate([
+        HostBinding('style.-ms-flex-order'),
+        HostBinding('style.order'),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], SplitterBarComponent.prototype, "order", null);
+    __decorate([
+        HostListener('dblclick'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], SplitterBarComponent.prototype, "collapseAny", null);
+    __decorate([
+        HostListener('focusin'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], SplitterBarComponent.prototype, "onFocusIn", null);
+    __decorate([
+        HostListener('focusout'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], SplitterBarComponent.prototype, "onFocusOut", null);
+    __decorate([
+        HostListener('keydown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], SplitterBarComponent.prototype, "onKeyDown", null);
+    SplitterBarComponent = __decorate([
+        Component({
+            selector: 'kendo-splitter-bar',
+            template: "\n      <div [class]=\"previousArrowClass()\" (click)=\"togglePrevious()\"></div>\n      <div class=\"k-resize-handle\"></div>\n      <div [class]=\"nextArrowClass()\" (click)=\"toggleNext()\"></div>\n    "
+        }),
+        __param(0, Host()),
+        __metadata("design:paramtypes", [DraggableDirective,
+            ElementRef,
+            SplitterService,
+            LocalizationService])
+    ], SplitterBarComponent);
+    return SplitterBarComponent;
+}());
+
+/**
+ * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
+ *
+ * ```ts-preview
+ *
+ *  @Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-splitter style="height: 280px;">
+ *
+ *          <kendo-splitter-pane [collapsible]="true" size="30%">
+ *            <h3>Inner splitter / left pane</h3>
+ *            <p>Resizable and collapsible.</p>
+ *          </kendo-splitter-pane>
+ *
+ *          <kendo-splitter-pane>
+ *            <h3>Inner splitter / center pane</h3>
+ *            <p>Resizable only.</p>
+ *          </kendo-splitter-pane>
+ *
+ *          <kendo-splitter-pane [collapsible]="true" size="30%">
+ *            <h3>Inner splitter / right pane</h3>
+ *            <p>Resizable and collapsible.</p>
+ *          </kendo-splitter-pane>
+ *
+ *        </kendo-splitter>
+ *      `,
+ *    styles: [ `
+ *        h3 { font-size: 1.2em; }
+ *        h3, p { margin: 10px; padding: 0; }
+ *    ` ]
+ *  })
+ *  class AppComponent {}
+ * ```
+ */
+var SplitterComponent = /** @class */ (function () {
+    function SplitterComponent(element, splitterService, localization, renderer, enclosingPane) {
+        this.element = element;
+        this.splitterService = splitterService;
+        this.localization = localization;
+        this.renderer = renderer;
+        this.enclosingPane = enclosingPane;
+        /**
+         * Specifies the orientation of the panes within the Splitter.
+         * Panes in a horizontal Splitter are placed horizontally.
+         * Panes in a vertical Splitter are placed vertically.
+         */
+        this.orientation = 'horizontal';
+        this.ariaRole = 'splitter';
+        validatePackage(packageMetadata);
+        if (enclosingPane) {
+            enclosingPane.containsSplitter = true;
+        }
+        // the handler only runs in NgZone if there are bound handlers
+        // this line merges both streams
+        this.layoutChange = this.splitterService.layoutChange;
+        this.configure = this.configure.bind(this);
+    }
+    Object.defineProperty(SplitterComponent.prototype, "hostClasses", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitterComponent.prototype, "horizontalHostClasses", {
+        get: function () {
+            return this.orientation === 'horizontal';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitterComponent.prototype, "verticalHostClasses", {
+        get: function () {
+            return this.orientation === 'vertical';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitterComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitterComponent.prototype, "splitbars", {
+        set: function (splitbars) {
+            var _this = this;
+            if (!isPresent(splitbars) || !isPresent(this.panes)) {
+                return;
+            }
+            var components = this.panes.toArray().concat(splitbars.toArray()).sort(function (a, b) { return a.order - b.order; });
+            var elements = components.map(function (component) { return component.element.nativeElement; });
+            elements.forEach(function (element) { return _this.renderer.appendChild(_this.element.nativeElement, element); });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SplitterComponent.prototype.ngAfterContentInit = function () {
+        this.reconfigure();
+    };
+    SplitterComponent.prototype.ngOnChanges = function (changes) {
+        if (changes.orientation && !changes.orientation.isFirstChange()) {
+            this.reconfigure();
+        }
+    };
+    SplitterComponent.prototype.ngOnDestroy = function () {
+        if (this.enclosingPane) {
+            this.enclosingPane.containsSplitter = false;
+        }
+        this.unsubscribeChanges();
+    };
+    SplitterComponent.prototype.reconfigure = function () {
+        this.unsubscribeChanges();
+        this.configure();
+        this.paneChangesSubscription = this.panes.changes.subscribe(this.configure);
+    };
+    SplitterComponent.prototype.unsubscribeChanges = function () {
+        if (this.paneChangesSubscription) {
+            this.paneChangesSubscription.unsubscribe();
+            this.paneChangesSubscription = null;
+        }
+    };
+    SplitterComponent.prototype.configure = function () {
+        var _this = this;
+        this.splitterService.configure({
+            panes: this.panes.toArray(),
+            orientation: this.orientation,
+            containerSize: function () {
+                if (_this.orientation === 'vertical') {
+                    return _this.element.nativeElement.clientHeight;
+                }
+                else {
+                    return _this.element.nativeElement.clientWidth;
+                }
+            }
+        });
+    };
+    Object.defineProperty(SplitterComponent.prototype, "direction", {
+        get: function () {
+            return this.localization.rtl ? 'rtl' : 'ltr';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], SplitterComponent.prototype, "orientation", void 0);
+    __decorate([
+        Output(),
         __metadata("design:type", EventEmitter)
     ], SplitterComponent.prototype, "layoutChange", void 0);
     __decorate([
@@ -1849,6 +2133,11 @@ var SplitterComponent = /** @class */ (function () {
         HostBinding('attr.role'),
         __metadata("design:type", String)
     ], SplitterComponent.prototype, "ariaRole", void 0);
+    __decorate([
+        ViewChildren(SplitterBarComponent),
+        __metadata("design:type", QueryList),
+        __metadata("design:paramtypes", [QueryList])
+    ], SplitterComponent.prototype, "splitbars", null);
     __decorate([
         ContentChildren(SplitterPaneComponent),
         __metadata("design:type", QueryList)
@@ -1867,10 +2156,11 @@ var SplitterComponent = /** @class */ (function () {
             ],
             template: "\n      <ng-content select=\"kendo-splitter-pane\"></ng-content>\n      <ng-container *ngFor=\"\n        let pane of panes;\n        let index = index;\n        let last = last;\n      \">\n        <kendo-splitter-bar\n          kendoDraggable\n          *ngIf=\"!last\"\n          [index]=\"index\"\n          [orientation]=\"orientation\">\n        </kendo-splitter-bar>\n      </ng-container>\n    "
         }),
-        __param(3, Optional()), __param(3, Host()), __param(3, Inject(SplitterPaneComponent)),
+        __param(4, Optional()), __param(4, Host()), __param(4, Inject(SplitterPaneComponent)),
         __metadata("design:paramtypes", [ElementRef,
             SplitterService,
             LocalizationService,
+            Renderer2,
             SplitterPaneComponent])
     ], SplitterComponent);
     return SplitterComponent;
@@ -5756,6 +6046,7 @@ var ExpansionPanelComponent = /** @class */ (function () {
     };
     ExpansionPanelComponent.prototype.ngOnInit = function () {
         var _this = this;
+        this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
         this.subscriptions = this.localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -7633,284 +7924,20 @@ var PanelBarModule = /** @class */ (function () {
     return PanelBarModule;
 }());
 
-var stopPropagation = function (_a) {
-    var event = _a.originalEvent;
-    event.stopPropagation();
-    event.preventDefault();
-};
-var preventOnDblClick = function (release) { return function (mouseDown) {
-    return of(mouseDown).pipe(delay(150), takeUntil(release));
-}; };
-var classFromObject = function (classes) { return Object.keys(classes).filter(function (c) { return classes[c]; }).join(' '); };
-var createMoveStream = function (draggable) { return function (mouseDown) {
-    return draggable.kendoDrag
-        .pipe(takeUntil(draggable.kendoRelease), map(function (_a) {
-        var pageX = _a.pageX, pageY = _a.pageY;
-        return ({
-            originalX: mouseDown.pageX,
-            originalY: mouseDown.pageY,
-            pageX: pageX,
-            pageY: pageY
-        });
-    }));
-}; };
+var exportedModules$5 = [
+    SplitterComponent,
+    SplitterPaneComponent
+];
+var declarations$5 = [
+    SplitterBarComponent
+].concat(exportedModules$5);
 /**
- * @hidden
- */
-var SplitterBarComponent = /** @class */ (function () {
-    function SplitterBarComponent(draggable, splitter, localization) {
-        this.draggable = draggable;
-        this.splitter = splitter;
-        this.localization = localization;
-        this.orientation = 'horizontal';
-        this.index = 0;
-        this.ariaRole = 'separator';
-        this.focused = false;
-        this.subscriptions = new Subscription();
-    }
-    Object.defineProperty(SplitterBarComponent.prototype, "direction", {
-        get: function () {
-            return this.localization.rtl ? 'rtl' : 'ltr';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitterBarComponent.prototype, "tabIndex", {
-        get: function () {
-            return this.splitter.isStatic(this.index) ? -1 : 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitterBarComponent.prototype, "hostClasses", {
-        get: function () {
-            var isHorizontal = this.orientation === 'horizontal';
-            var isDraggable = this.splitter.isDraggable(this.index);
-            var isStatic = this.splitter.isStatic(this.index);
-            return classFromObject({
-                'k-state-focused': this.focused,
-                'k-splitbar': true,
-                'k-splitbar-horizontal': isHorizontal,
-                'k-splitbar-vertical': !isHorizontal,
-                'k-splitbar-draggable-horizontal': isHorizontal && isDraggable,
-                'k-splitbar-draggable-vertical': !isHorizontal && isDraggable,
-                'k-splitbar-static-horizontal': isHorizontal && isStatic,
-                'k-splitbar-static-vertical': !isHorizontal && isStatic,
-                'k-touch-action-none': isDraggable
-            });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitterBarComponent.prototype, "order", {
-        get: function () {
-            return 2 * this.index + 1;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SplitterBarComponent.prototype.collapseAny = function () {
-        if (this.expandLast) {
-            this.toggleNext();
-        }
-        else {
-            this.tryToggleNearest();
-        }
-    };
-    SplitterBarComponent.prototype.onFocusIn = function () {
-        this.focused = true;
-    };
-    SplitterBarComponent.prototype.onFocusOut = function () {
-        this.focused = false;
-    };
-    SplitterBarComponent.prototype.onKeyDown = function (event) {
-        var _this = this;
-        var keyCode = event && event.keyCode;
-        var isHorizontal = this.orientation === 'horizontal';
-        var resize = function (delta) {
-            event.preventDefault();
-            var state$$1 = _this.splitter.dragState(_this.index);
-            _this.splitter.setSize(state$$1, 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);
-        }
-    };
-    Object.defineProperty(SplitterBarComponent.prototype, "expandLast", {
-        get: function () {
-            var panes = this.splitter.panes;
-            return panes.length === 2 && panes[1].collapsed;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SplitterBarComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        var state$$1;
-        var listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(function () { return _this.splitter.isDraggable(_this.index); }), tap(function () { return state$$1 = _this.splitter.dragState(_this.index); }), tap(function () { return _this.splitter.toggleContentOverlay(_this.index, true); }), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(function (_a) {
-            var pageX = _a.pageX, pageY = _a.pageY, originalX = _a.originalX, originalY = _a.originalY;
-            var delta;
-            if (_this.orientation === 'vertical') {
-                delta = pageY - originalY;
-            }
-            else if (_this.direction === 'rtl') {
-                delta = originalX - pageX;
-            }
-            else {
-                delta = pageX - originalX;
-            }
-            _this.splitter.setSize(state$$1, delta);
-        });
-        this.subscriptions.add(listener);
-        this.subscriptions.add(this.draggable.kendoRelease.subscribe(function () { return _this.splitter.toggleContentOverlay(_this.index, false); }));
-    };
-    SplitterBarComponent.prototype.ngOnDestroy = function () {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    };
-    SplitterBarComponent.prototype.togglePrevious = function () {
-        this.splitter.tryToggle(this.index);
-    };
-    SplitterBarComponent.prototype.toggleNext = function () {
-        this.splitter.tryToggle(this.index + 1);
-    };
-    SplitterBarComponent.prototype.previousArrowClass = function () {
-        var pane = this.splitter.pane(this.index);
-        var nextPane = this.splitter.pane(this.index + 1);
-        var isCollapsible = pane.collapsible;
-        var isCollapsed = pane.collapsed;
-        var isHorizontal = this.orientation === 'horizontal';
-        return classFromObject({
-            'k-icon': true,
-            'k-hidden': !isCollapsible || nextPane.isHidden,
-            'k-collapse-prev': isCollapsible,
-            'k-i-arrow-60-left': isCollapsible && isHorizontal && !isCollapsed,
-            'k-i-arrow-60-right': isCollapsible && isHorizontal && isCollapsed,
-            'k-i-arrow-60-up': isCollapsible && !isHorizontal && !isCollapsed,
-            'k-i-arrow-60-down': isCollapsible && !isHorizontal && isCollapsed
-        });
-    };
-    SplitterBarComponent.prototype.nextArrowClass = function () {
-        var pane = this.splitter.pane(this.index + 1);
-        var prevPane = this.splitter.pane(this.index);
-        var isCollapsible = pane.collapsible;
-        var isCollapsed = pane.collapsed;
-        var isHorizontal = this.orientation === 'horizontal';
-        return classFromObject({
-            'k-icon': true,
-            'k-hidden': !isCollapsible || prevPane.isHidden,
-            'k-collapse-next': isCollapsible,
-            'k-i-arrow-60-right': isCollapsible && isHorizontal && !isCollapsed,
-            'k-i-arrow-60-left': isCollapsible && isHorizontal && isCollapsed,
-            'k-i-arrow-60-down': isCollapsible && !isHorizontal && !isCollapsed,
-            'k-i-arrow-60-up': isCollapsible && !isHorizontal && isCollapsed
-        });
-    };
-    SplitterBarComponent.prototype.tryToggleNearest = function () {
-        var prev = this.index;
-        var next = this.index + 1;
-        if (!this.splitter.tryToggle(prev)) {
-            this.splitter.tryToggle(next);
-        }
-    };
-    __decorate([
-        Input(),
-        HostBinding('attr.aria-orientation'),
-        __metadata("design:type", String)
-    ], SplitterBarComponent.prototype, "orientation", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], SplitterBarComponent.prototype, "index", void 0);
-    __decorate([
-        HostBinding('attr.role'),
-        __metadata("design:type", String)
-    ], SplitterBarComponent.prototype, "ariaRole", void 0);
-    __decorate([
-        HostBinding('class.k-state-focused'),
-        __metadata("design:type", Boolean)
-    ], SplitterBarComponent.prototype, "focused", void 0);
-    __decorate([
-        HostBinding('attr.tabindex'),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [])
-    ], SplitterBarComponent.prototype, "tabIndex", null);
-    __decorate([
-        HostBinding('class'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], SplitterBarComponent.prototype, "hostClasses", null);
-    __decorate([
-        HostBinding('style.-ms-flex-order'),
-        HostBinding('style.order'),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [])
-    ], SplitterBarComponent.prototype, "order", null);
-    __decorate([
-        HostListener('dblclick'),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], SplitterBarComponent.prototype, "collapseAny", null);
-    __decorate([
-        HostListener('focusin'),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], SplitterBarComponent.prototype, "onFocusIn", null);
-    __decorate([
-        HostListener('focusout'),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], SplitterBarComponent.prototype, "onFocusOut", null);
-    __decorate([
-        HostListener('keydown', ['$event']),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], SplitterBarComponent.prototype, "onKeyDown", null);
-    SplitterBarComponent = __decorate([
-        Component({
-            selector: 'kendo-splitter-bar',
-            template: "\n      <div [class]=\"previousArrowClass()\" (click)=\"togglePrevious()\"></div>\n      <div class=\"k-resize-handle\"></div>\n      <div [class]=\"nextArrowClass()\" (click)=\"toggleNext()\"></div>\n    "
-        }),
-        __param(0, Host()),
-        __metadata("design:paramtypes", [DraggableDirective,
-            SplitterService,
-            LocalizationService])
-    ], SplitterBarComponent);
-    return SplitterBarComponent;
-}());
-
-var exportedModules$5 = [
-    SplitterComponent,
-    SplitterPaneComponent
-];
-var declarations$5 = [
-    SplitterBarComponent
-].concat(exportedModules$5);
-/**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the Splitter component.
- *
- * The module registers:
- * - `SplitterComponent`&mdash;The `Splitter` component class.
- * - `SplitterPaneComponent`&mdash;The `SplitterPane` component class.
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the Splitter component.
+ *
+ * The module registers:
+ * - `SplitterComponent`&mdash;The `Splitter` component class.
+ * - `SplitterPaneComponent`&mdash;The `SplitterPane` component class.
  */
 var SplitterModule = /** @class */ (function () {
     function SplitterModule() {
@@ -8601,6 +8628,476 @@ var TileLayoutModule = /** @class */ (function () {
     return TileLayoutModule;
 }());
 
+/**
+ * @hidden
+ */
+var VERTICAL_SUFFIX = {
+    top: 'start',
+    middle: 'center',
+    bottom: 'end',
+    stretch: 'stretch'
+};
+/**
+ * @hidden
+ */
+var JUSTIFY_PREFIX = "k-justify-content";
+/**
+ * @hidden
+ */
+var GRID_JUSTIFY_PREFIX = "k-justify-items";
+/**
+ * @hidden
+ */
+var ALIGN_PREFIX = "k-align-items";
+/**
+ * @hidden
+ */
+var normalizeGap = function (gap) {
+    if (typeof gap === 'number' || typeof gap === 'string') {
+        return { cols: gap, rows: gap };
+    }
+    else {
+        var parsedGap = {};
+        parsedGap.rows = gap.rows ? gap.rows : 0;
+        parsedGap.cols = gap.cols ? gap.cols : 0;
+        return parsedGap;
+    }
+};
+/**
+ * @hidden
+ */
+var generateGapStyle = function (gap) {
+    if (gap.rows === gap.cols) {
+        return typeof gap.rows === 'number' ? gap.rows + "px" : gap.rows;
+    }
+    else {
+        var rowStyle = "" + (typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows);
+        var colStyle = "" + (typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols);
+        return rowStyle + " " + colStyle;
+    }
+};
+/**
+ * @hidden
+ */
+var generateGridStyle = function (items, itemType) {
+    var styling = [];
+    items.forEach(function (item) {
+        if (typeof item === 'number') {
+            styling.push(item + "px");
+        }
+        else if (typeof item === 'string') {
+            styling.push(item);
+        }
+        else {
+            if (itemType === 'rows') {
+                var rowHeight = item.height;
+                if (rowHeight) {
+                    styling.push(typeof rowHeight === 'number' ? rowHeight + "px" : rowHeight);
+                }
+                else {
+                    styling.push('0px');
+                }
+            }
+            else {
+                var colWidth = item.width;
+                if (colWidth) {
+                    styling.push(typeof colWidth === 'number' ? colWidth + "px" : colWidth);
+                }
+                else {
+                    styling.push('0px');
+                }
+            }
+        }
+    });
+    return styling;
+};
+
+/**
+ * Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
+ */
+var StackLayoutComponent = /** @class */ (function () {
+    function StackLayoutComponent(renderer, element, localization) {
+        this.renderer = renderer;
+        this.element = element;
+        this.localization = localization;
+        this.hostClass = true;
+        /**
+         * Specifies the gap between the inner StackLayout elements. The default value is `0`
+         * ([see example]({% slug layout_stacklayout %}#toc-gaps)).
+         */
+        this.gap = 0;
+        /**
+         * Specifies the orientation of the StackLayout
+         * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+         *
+         * The possible values are:
+         * (Default) `horizontal`
+         * `vertical`
+         */
+        this.orientation = 'horizontal';
+        this._align = {
+            horizontal: 'stretch',
+            vertical: 'stretch'
+        };
+        validatePackage(packageMetadata);
+    }
+    Object.defineProperty(StackLayoutComponent.prototype, "horizontalClass", {
+        get: function () {
+            return this.orientation === 'horizontal';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StackLayoutComponent.prototype, "verticalClass", {
+        get: function () {
+            return this.orientation === 'vertical';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StackLayoutComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(StackLayoutComponent.prototype, "align", {
+        get: function () {
+            return this._align;
+        },
+        /**
+         * Specifies the horizontal and vertical alignment of the inner StackLayout elements
+         * ([see example]({% slug layout_stacklayout %}#toc-alignment)).
+         */
+        set: function (align) {
+            this._align = Object.assign({}, this._align, align);
+            this.handleAlignClasses();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    StackLayoutComponent.prototype.ngAfterViewInit = function () {
+        this.handleAlignClasses();
+        this.setGap();
+    };
+    StackLayoutComponent.prototype.ngOnChanges = function (changes) {
+        if (isChanged('gap', changes)) {
+            this.setGap();
+        }
+        if (isChanged('orientation', changes)) {
+            this.handleAlignClasses();
+        }
+    };
+    StackLayoutComponent.prototype.handleAlignClasses = function () {
+        var elem = this.element.nativeElement;
+        if (isPresent(this.justifyClass)) {
+            this.renderer.removeClass(elem, this.justifyClass);
+        }
+        if (isPresent(this.alignClass)) {
+            this.renderer.removeClass(elem, this.alignClass);
+        }
+        if (this.orientation === 'horizontal') {
+            this.justifyClass = JUSTIFY_PREFIX + "-" + this.align.horizontal;
+            this.alignClass = ALIGN_PREFIX + "-" + VERTICAL_SUFFIX[this.align.vertical];
+        }
+        else {
+            this.justifyClass = JUSTIFY_PREFIX + "-" + VERTICAL_SUFFIX[this.align.vertical];
+            this.alignClass = ALIGN_PREFIX + "-" + this.align.horizontal;
+        }
+        this.renderer.addClass(elem, this.justifyClass);
+        this.renderer.addClass(elem, this.alignClass);
+    };
+    StackLayoutComponent.prototype.setGap = function () {
+        var parsedGap = isNumber(this.gap) ? this.gap + "px" : this.gap;
+        this.renderer.setStyle(this.element.nativeElement, 'gap', parsedGap);
+    };
+    Object.defineProperty(StackLayoutComponent.prototype, "direction", {
+        get: function () {
+            return this.localization.rtl ? 'rtl' : 'ltr';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    __decorate([
+        HostBinding('class.k-stack-layout'),
+        __metadata("design:type", Boolean)
+    ], StackLayoutComponent.prototype, "hostClass", void 0);
+    __decorate([
+        HostBinding('class.k-hstack'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], StackLayoutComponent.prototype, "horizontalClass", null);
+    __decorate([
+        HostBinding('class.k-vstack'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], StackLayoutComponent.prototype, "verticalClass", null);
+    __decorate([
+        HostBinding('attr.dir'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], StackLayoutComponent.prototype, "dir", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], StackLayoutComponent.prototype, "align", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], StackLayoutComponent.prototype, "gap", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], StackLayoutComponent.prototype, "orientation", void 0);
+    StackLayoutComponent = __decorate([
+        Component({
+            exportAs: 'kendoStackLayout',
+            selector: 'kendo-stacklayout',
+            providers: [
+                LocalizationService,
+                {
+                    provide: L10N_PREFIX,
+                    useValue: 'kendo.stacklayout'
+                }
+            ],
+            template: "\n        <ng-content></ng-content>\n    "
+        }),
+        __metadata("design:paramtypes", [Renderer2,
+            ElementRef,
+            LocalizationService])
+    ], StackLayoutComponent);
+    return StackLayoutComponent;
+}());
+
+var exportedModules$9 = [
+    StackLayoutComponent
+];
+var declarations$9 = exportedModules$9.slice();
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the StackLayout component.
+ */
+var StackLayoutModule = /** @class */ (function () {
+    function StackLayoutModule() {
+    }
+    StackLayoutModule = __decorate([
+        NgModule({
+            declarations: [declarations$9],
+            exports: [exportedModules$9],
+            imports: [CommonModule]
+        })
+    ], StackLayoutModule);
+    return StackLayoutModule;
+}());
+
+/**
+ * Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
+ */
+var GridLayoutComponent = /** @class */ (function () {
+    function GridLayoutComponent(renderer, element, localization) {
+        this.renderer = renderer;
+        this.element = element;
+        this.localization = localization;
+        this.hostClass = true;
+        /**
+         * Specifies the gaps between the elements. The default value is `0`
+         * ([see example]({% slug layout_gridlayout %}#toc-gaps)).
+         */
+        this.gap = 0;
+        this._align = {
+            horizontal: 'stretch',
+            vertical: 'stretch'
+        };
+        validatePackage(packageMetadata);
+    }
+    Object.defineProperty(GridLayoutComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(GridLayoutComponent.prototype, "align", {
+        get: function () {
+            return this._align;
+        },
+        /**
+         * Specifies the horizontal and vertical alignment of the inner GridLayout elements
+         * ([see example]({% slug layout_gridlayout %}#toc-alignment)).
+         */
+        set: function (align) {
+            this._align = Object.assign({}, this._align, align);
+            this.handleAlignClasses();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    GridLayoutComponent.prototype.ngAfterViewInit = function () {
+        this.handleAlignClasses();
+        this.handleGridTemplateStyling('rows');
+        this.handleGridTemplateStyling('cols');
+        this.setGap();
+    };
+    GridLayoutComponent.prototype.ngOnChanges = function (changes) {
+        if (isChanged('gap', changes)) {
+            this.setGap();
+        }
+        if (isChanged('rows', changes)) {
+            this.handleGridTemplateStyling('rows');
+        }
+        if (isChanged('cols', changes)) {
+            this.handleGridTemplateStyling('cols');
+        }
+    };
+    GridLayoutComponent.prototype.handleAlignClasses = function () {
+        var elem = this.element.nativeElement;
+        if (isPresent(this.justifyClass)) {
+            this.renderer.removeClass(elem, this.justifyClass);
+        }
+        if (isPresent(this.alignClass)) {
+            this.renderer.removeClass(elem, this.alignClass);
+        }
+        this.justifyClass = GRID_JUSTIFY_PREFIX + "-" + this.align.horizontal;
+        this.alignClass = ALIGN_PREFIX + "-" + VERTICAL_SUFFIX[this.align.vertical];
+        this.renderer.addClass(elem, this.justifyClass);
+        this.renderer.addClass(elem, this.alignClass);
+    };
+    GridLayoutComponent.prototype.setGap = function () {
+        var parsedGap = normalizeGap(this.gap);
+        var gapStyle = generateGapStyle(parsedGap);
+        this.renderer.setStyle(this.element.nativeElement, 'gap', gapStyle);
+    };
+    GridLayoutComponent.prototype.handleGridTemplateStyling = function (type) {
+        if (!isPresent(this[type])) {
+            return;
+        }
+        var gridTemplateStyle = type === 'rows' ? 'grid-template-rows' : 'grid-template-columns';
+        var gridStyle = generateGridStyle(this[type], type);
+        this.renderer.setStyle(this.element.nativeElement, gridTemplateStyle, gridStyle.join(' '));
+    };
+    Object.defineProperty(GridLayoutComponent.prototype, "direction", {
+        get: function () {
+            return this.localization.rtl ? 'rtl' : 'ltr';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    __decorate([
+        HostBinding('class.k-grid-layout'),
+        __metadata("design:type", Boolean)
+    ], GridLayoutComponent.prototype, "hostClass", void 0);
+    __decorate([
+        HostBinding('attr.dir'),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [])
+    ], GridLayoutComponent.prototype, "dir", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GridLayoutComponent.prototype, "rows", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], GridLayoutComponent.prototype, "cols", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], GridLayoutComponent.prototype, "gap", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], GridLayoutComponent.prototype, "align", null);
+    GridLayoutComponent = __decorate([
+        Component({
+            exportAs: 'kendoGridLayout',
+            selector: 'kendo-gridlayout',
+            providers: [
+                LocalizationService,
+                {
+                    provide: L10N_PREFIX,
+                    useValue: 'kendo.gridlayout'
+                }
+            ],
+            template: "\n        <ng-content></ng-content>\n    "
+        }),
+        __metadata("design:paramtypes", [Renderer2,
+            ElementRef,
+            LocalizationService])
+    ], GridLayoutComponent);
+    return GridLayoutComponent;
+}());
+
+var GridLayoutItemComponent = /** @class */ (function () {
+    function GridLayoutItemComponent(renderer, element) {
+        this.renderer = renderer;
+        this.element = element;
+    }
+    GridLayoutItemComponent.prototype.ngOnInit = function () {
+        this.setItemStyle();
+    };
+    GridLayoutItemComponent.prototype.ngOnChanges = function () {
+        this.setItemStyle();
+    };
+    GridLayoutItemComponent.prototype.setItemStyle = function () {
+        var row = this.row || 'auto';
+        var col = this.col || 'auto';
+        var rowSpan = this.rowSpan ? "span " + this.rowSpan : 'auto';
+        var colSpan = this.colSpan ? "span " + this.colSpan : 'auto';
+        var gridAreaStyle = row + " / " + col + " / " + rowSpan + " / " + colSpan;
+        this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], GridLayoutItemComponent.prototype, "row", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], GridLayoutItemComponent.prototype, "col", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], GridLayoutItemComponent.prototype, "rowSpan", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], GridLayoutItemComponent.prototype, "colSpan", void 0);
+    GridLayoutItemComponent = __decorate([
+        Component({
+            selector: 'kendo-gridlayout-item',
+            template: "\n        <ng-content></ng-content>\n    "
+        }),
+        __metadata("design:paramtypes", [Renderer2,
+            ElementRef])
+    ], GridLayoutItemComponent);
+    return GridLayoutItemComponent;
+}());
+
+var exportedModules$a = [
+    GridLayoutComponent,
+    GridLayoutItemComponent
+];
+var declarations$a = exportedModules$a.slice();
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the GridLayout component.
+ */
+var GridLayoutModule = /** @class */ (function () {
+    function GridLayoutModule() {
+    }
+    GridLayoutModule = __decorate([
+        NgModule({
+            declarations: [declarations$a],
+            exports: [exportedModules$a],
+            imports: [CommonModule]
+        })
+    ], GridLayoutModule);
+    return GridLayoutModule;
+}());
+
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Layout components.
@@ -8646,7 +9143,9 @@ var LayoutModule = /** @class */ (function () {
                 SplitterModule,
                 StepperModule,
                 TabStripModule,
-                TileLayoutModule
+                TileLayoutModule,
+                StackLayoutModule,
+                GridLayoutModule
             ]
         })
     ], LayoutModule);
@@ -8657,4 +9156,4 @@ var LayoutModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { PreventableEvent$1 as PreventableEvent, DrawerService, DrawerItemComponent, DrawerListComponent, DRAWER_ITEM_INDEX, PanelBarService, SplitterBarComponent, SplitterService, StepperListComponent, StepperMessages, STEPPER_STEP_INDEX, StepperStepComponent, StepperService, TabStripMessages, TabComponent, TabStripScrollableButtonComponent, ScrollService, TabStripService, TileLayoutDraggingService, PreventableEvent$2 as PreventableEvent$1, TileLayoutResizeHandleDirective, PanelBarComponent, PanelBarItemComponent, PanelBarContentDirective, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarExpandMode, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective, TabTitleDirective, LocalizedTabStripMessagesDirective, TabStripCustomMessagesComponent, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerSelectEvent, StepperComponent, StepperActivateEvent, StepperCustomMessagesComponent, LocalizedStepperMessagesDirective, AvatarComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CardActionsComponent, CardSeparatorDirective, CardTitleDirective, CardSubtitleDirective, CardMediaDirective, CardAction, ExpansionPanelComponent, ExpansionPanelTitleDirective, ExpansionPanelActionEvent, TileLayoutComponent, TileLayoutItemComponent, TileLayoutItemBodyComponent, TileLayoutItemHeaderComponent, TileLayoutReorderEvent, TileLayoutResizeEvent, AvatarModule, CardModule, DrawerModule, LayoutModule, PanelBarModule, SplitterModule, StepperModule, TabStripModule, ExpansionPanelModule, TileLayoutModule, TabCloseEvent, SelectEvent, DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective };
+export { PreventableEvent$1 as PreventableEvent, DrawerService, DrawerItemComponent, DrawerListComponent, DRAWER_ITEM_INDEX, PanelBarService, SplitterBarComponent, SplitterService, StepperListComponent, StepperMessages, STEPPER_STEP_INDEX, StepperStepComponent, StepperService, TabStripMessages, TabComponent, TabStripScrollableButtonComponent, ScrollService, TabStripService, TileLayoutDraggingService, PreventableEvent$2 as PreventableEvent$1, TileLayoutResizeHandleDirective, PanelBarComponent, PanelBarItemComponent, PanelBarContentDirective, PanelBarItemTemplateDirective, PanelBarItemTitleDirective, PanelBarExpandMode, SplitterComponent, SplitterPaneComponent, TabStripComponent, TabStripTabComponent, TabContentDirective, TabTitleDirective, LocalizedTabStripMessagesDirective, TabStripCustomMessagesComponent, DrawerComponent, DrawerContainerComponent, DrawerContentComponent, DrawerSelectEvent, StepperComponent, StepperActivateEvent, StepperCustomMessagesComponent, LocalizedStepperMessagesDirective, AvatarComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CardActionsComponent, CardSeparatorDirective, CardTitleDirective, CardSubtitleDirective, CardMediaDirective, CardAction, ExpansionPanelComponent, ExpansionPanelTitleDirective, ExpansionPanelActionEvent, TileLayoutComponent, TileLayoutItemComponent, TileLayoutItemBodyComponent, TileLayoutItemHeaderComponent, TileLayoutReorderEvent, TileLayoutResizeEvent, AvatarModule, CardModule, DrawerModule, LayoutModule, PanelBarModule, SplitterModule, StepperModule, TabStripModule, ExpansionPanelModule, TileLayoutModule, StackLayoutModule, GridLayoutModule, StackLayoutComponent, GridLayoutComponent, GridLayoutItemComponent, TabCloseEvent, SelectEvent, DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective };