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

package/dist/fesm2015/index.js

@@ -5,11 +5,11 @@
 import { __decorate, __metadata, __param } from 'tslib';
 import { Injectable, Directive, TemplateRef, Optional, isDevMode, Input, ViewChild, ElementRef, HostBinding, ViewChildren, QueryList, ContentChildren, Component, SkipSelf, Host, Renderer2, EventEmitter, Output, 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 @@ const 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'
 };
@@ -219,6 +219,10 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
  * @hidden
  */
 const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || null;
+/**
+ * @hidden
+ */
+const isNumber = (value) => typeof value === 'number' && isFinite(value);
 
 const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
 const toClassList = (classNames) => String(classNames).trim().split(' ');
@@ -1657,6 +1661,244 @@ SplitterService = __decorate([
     __metadata("design:paramtypes", [NgZone])
 ], SplitterService);
 
+const stopPropagation = ({ originalEvent: event }) => {
+    event.stopPropagation();
+    event.preventDefault();
+};
+const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
+const classFromObject = classes => Object.keys(classes).filter(c => classes[c]).join(' ');
+const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
+    .pipe(takeUntil(draggable.kendoRelease), map(({ pageX, pageY }) => ({
+    originalX: mouseDown.pageX,
+    originalY: mouseDown.pageY,
+    pageX,
+    pageY
+})));
+/**
+ * @hidden
+ */
+let SplitterBarComponent = class SplitterBarComponent {
+    constructor(draggable, element, splitter, localization) {
+        this.draggable = draggable;
+        this.element = element;
+        this.splitter = splitter;
+        this.localization = localization;
+        this.orientation = 'horizontal';
+        this.index = 0;
+        this.ariaRole = 'separator';
+        this.focused = false;
+        this.subscriptions = new Subscription();
+    }
+    get direction() {
+        return this.localization.rtl ? 'rtl' : 'ltr';
+    }
+    get tabIndex() {
+        return this.splitter.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);
+        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
+        });
+    }
+    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$$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);
+        }
+    }
+    get expandLast() {
+        const panes = this.splitter.panes;
+        return panes.length === 2 && panes[1].collapsed;
+    }
+    ngOnInit() {
+        let state$$1;
+        const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitter.isDraggable(this.index)), tap(() => state$$1 = 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 }) => {
+            let 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(() => this.splitter.toggleContentOverlay(this.index, false)));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    togglePrevious() {
+        this.splitter.tryToggle(this.index);
+    }
+    toggleNext() {
+        this.splitter.tryToggle(this.index + 1);
+    }
+    previousArrowClass() {
+        const pane = this.splitter.pane(this.index);
+        const nextPane = this.splitter.pane(this.index + 1);
+        const isCollapsible = pane.collapsible;
+        const isCollapsed = pane.collapsed;
+        const 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
+        });
+    }
+    nextArrowClass() {
+        const pane = this.splitter.pane(this.index + 1);
+        const prevPane = this.splitter.pane(this.index);
+        const isCollapsible = pane.collapsible;
+        const isCollapsed = pane.collapsed;
+        const 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
+        });
+    }
+    tryToggleNearest() {
+        const prev = this.index;
+        const 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: `
+      <div [class]="previousArrowClass()" (click)="togglePrevious()"></div>
+      <div class="k-resize-handle"></div>
+      <div [class]="nextArrowClass()" (click)="toggleNext()"></div>
+    `
+    }),
+    __param(0, Host()),
+    __metadata("design:paramtypes", [DraggableDirective,
+        ElementRef,
+        SplitterService,
+        LocalizationService])
+], SplitterBarComponent);
+
 /**
  * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
  *
@@ -1693,10 +1935,11 @@ SplitterService = __decorate([
  * ```
  */
 let SplitterComponent = class SplitterComponent {
-    constructor(element, splitterService, localization, enclosingPane) {
+    constructor(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.
@@ -1726,6 +1969,15 @@ let SplitterComponent = class SplitterComponent {
     get dir() {
         return this.direction;
     }
+    set splitbars(splitbars) {
+        if (!isPresent(splitbars) || !isPresent(this.panes)) {
+            return;
+        }
+        const components = [...this.panes.toArray(), ...splitbars.toArray()]
+            .sort((a, b) => a.order - b.order);
+        const elements = components.map(component => component.element.nativeElement);
+        elements.forEach(element => this.renderer.appendChild(this.element.nativeElement, element));
+    }
     ngAfterContentInit() {
         this.reconfigure();
     }
@@ -1803,6 +2055,11 @@ __decorate([
     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)
@@ -1835,10 +2092,11 @@ SplitterComponent = __decorate([
       </ng-container>
     `
     }),
-    __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);
 
@@ -5500,6 +5758,7 @@ let ExpansionPanelComponent = class ExpansionPanelComponent {
         }
     }
     ngOnInit() {
+        this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
         this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => { this.direction = rtl ? 'rtl' : 'ltr'; });
     }
     ngAfterViewInit() {
@@ -7326,242 +7585,6 @@ PanelBarModule = __decorate([
     })
 ], PanelBarModule);
 
-const stopPropagation = ({ originalEvent: event }) => {
-    event.stopPropagation();
-    event.preventDefault();
-};
-const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
-const classFromObject = classes => Object.keys(classes).filter(c => classes[c]).join(' ');
-const createMoveStream = (draggable) => mouseDown => draggable.kendoDrag
-    .pipe(takeUntil(draggable.kendoRelease), map(({ pageX, pageY }) => ({
-    originalX: mouseDown.pageX,
-    originalY: mouseDown.pageY,
-    pageX,
-    pageY
-})));
-/**
- * @hidden
- */
-let SplitterBarComponent = class SplitterBarComponent {
-    constructor(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();
-    }
-    get direction() {
-        return this.localization.rtl ? 'rtl' : 'ltr';
-    }
-    get tabIndex() {
-        return this.splitter.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);
-        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
-        });
-    }
-    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$$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);
-        }
-    }
-    get expandLast() {
-        const panes = this.splitter.panes;
-        return panes.length === 2 && panes[1].collapsed;
-    }
-    ngOnInit() {
-        let state$$1;
-        const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitter.isDraggable(this.index)), tap(() => state$$1 = 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 }) => {
-            let 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(() => this.splitter.toggleContentOverlay(this.index, false)));
-    }
-    ngOnDestroy() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    }
-    togglePrevious() {
-        this.splitter.tryToggle(this.index);
-    }
-    toggleNext() {
-        this.splitter.tryToggle(this.index + 1);
-    }
-    previousArrowClass() {
-        const pane = this.splitter.pane(this.index);
-        const nextPane = this.splitter.pane(this.index + 1);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
-        const 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
-        });
-    }
-    nextArrowClass() {
-        const pane = this.splitter.pane(this.index + 1);
-        const prevPane = this.splitter.pane(this.index);
-        const isCollapsible = pane.collapsible;
-        const isCollapsed = pane.collapsed;
-        const 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
-        });
-    }
-    tryToggleNearest() {
-        const prev = this.index;
-        const 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: `
-      <div [class]="previousArrowClass()" (click)="togglePrevious()"></div>
-      <div class="k-resize-handle"></div>
-      <div [class]="nextArrowClass()" (click)="toggleNext()"></div>
-    `
-    }),
-    __param(0, Host()),
-    __metadata("design:paramtypes", [DraggableDirective,
-        SplitterService,
-        LocalizationService])
-], SplitterBarComponent);
-
 const exportedModules$5 = [
     SplitterComponent,
     SplitterPaneComponent
@@ -8250,6 +8273,445 @@ TileLayoutModule = __decorate([
     })
 ], TileLayoutModule);
 
+/**
+ * @hidden
+ */
+const VERTICAL_SUFFIX = {
+    top: 'start',
+    middle: 'center',
+    bottom: 'end',
+    stretch: 'stretch'
+};
+/**
+ * @hidden
+ */
+const JUSTIFY_PREFIX = `k-justify-content`;
+/**
+ * @hidden
+ */
+const GRID_JUSTIFY_PREFIX = `k-justify-items`;
+/**
+ * @hidden
+ */
+const ALIGN_PREFIX = `k-align-items`;
+/**
+ * @hidden
+ */
+const normalizeGap = (gap) => {
+    if (typeof gap === 'number' || typeof gap === 'string') {
+        return { cols: gap, rows: gap };
+    }
+    else {
+        let parsedGap = {};
+        parsedGap.rows = gap.rows ? gap.rows : 0;
+        parsedGap.cols = gap.cols ? gap.cols : 0;
+        return parsedGap;
+    }
+};
+/**
+ * @hidden
+ */
+const generateGapStyle = (gap) => {
+    if (gap.rows === gap.cols) {
+        return typeof gap.rows === 'number' ? `${gap.rows}px` : gap.rows;
+    }
+    else {
+        let rowStyle = `${typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows}`;
+        let colStyle = `${typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols}`;
+        return `${rowStyle} ${colStyle}`;
+    }
+};
+/**
+ * @hidden
+ */
+const generateGridStyle = (items, itemType) => {
+    let styling = [];
+    items.forEach((item) => {
+        if (typeof item === 'number') {
+            styling.push(`${item}px`);
+        }
+        else if (typeof item === 'string') {
+            styling.push(item);
+        }
+        else {
+            if (itemType === 'rows') {
+                const rowHeight = item.height;
+                if (rowHeight) {
+                    styling.push(typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight);
+                }
+                else {
+                    styling.push('0px');
+                }
+            }
+            else {
+                const 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 %}).
+ */
+let StackLayoutComponent = class StackLayoutComponent {
+    constructor(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);
+    }
+    get horizontalClass() {
+        return this.orientation === 'horizontal';
+    }
+    get verticalClass() {
+        return this.orientation === 'vertical';
+    }
+    get dir() {
+        return this.direction;
+    }
+    /**
+     * Specifies the horizontal and vertical alignment of the inner StackLayout elements
+     * ([see example]({% slug layout_stacklayout %}#toc-alignment)).
+     */
+    set align(align) {
+        this._align = Object.assign({}, this._align, align);
+        this.handleAlignClasses();
+    }
+    get align() {
+        return this._align;
+    }
+    ngAfterViewInit() {
+        this.handleAlignClasses();
+        this.setGap();
+    }
+    ngOnChanges(changes) {
+        if (isChanged('gap', changes)) {
+            this.setGap();
+        }
+        if (isChanged('orientation', changes)) {
+            this.handleAlignClasses();
+        }
+    }
+    handleAlignClasses() {
+        const 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);
+    }
+    setGap() {
+        const parsedGap = isNumber(this.gap) ? `${this.gap}px` : this.gap;
+        this.renderer.setStyle(this.element.nativeElement, 'gap', parsedGap);
+    }
+    get direction() {
+        return this.localization.rtl ? 'rtl' : 'ltr';
+    }
+};
+__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: `
+        <ng-content></ng-content>
+    `
+    }),
+    __metadata("design:paramtypes", [Renderer2,
+        ElementRef,
+        LocalizationService])
+], StackLayoutComponent);
+
+const exportedModules$9 = [
+    StackLayoutComponent
+];
+const declarations$9 = [
+    ...exportedModules$9
+];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the StackLayout component.
+ */
+let StackLayoutModule = class StackLayoutModule {
+};
+StackLayoutModule = __decorate([
+    NgModule({
+        declarations: [declarations$9],
+        exports: [exportedModules$9],
+        imports: [CommonModule]
+    })
+], StackLayoutModule);
+
+/**
+ * Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
+ */
+let GridLayoutComponent = class GridLayoutComponent {
+    constructor(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);
+    }
+    get dir() {
+        return this.direction;
+    }
+    /**
+     * Specifies the horizontal and vertical alignment of the inner GridLayout elements
+     * ([see example]({% slug layout_gridlayout %}#toc-alignment)).
+     */
+    set align(align) {
+        this._align = Object.assign({}, this._align, align);
+        this.handleAlignClasses();
+    }
+    get align() {
+        return this._align;
+    }
+    ngAfterViewInit() {
+        this.handleAlignClasses();
+        this.handleGridTemplateStyling('rows');
+        this.handleGridTemplateStyling('cols');
+        this.setGap();
+    }
+    ngOnChanges(changes) {
+        if (isChanged('gap', changes)) {
+            this.setGap();
+        }
+        if (isChanged('rows', changes)) {
+            this.handleGridTemplateStyling('rows');
+        }
+        if (isChanged('cols', changes)) {
+            this.handleGridTemplateStyling('cols');
+        }
+    }
+    handleAlignClasses() {
+        const 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);
+    }
+    setGap() {
+        let parsedGap = normalizeGap(this.gap);
+        let gapStyle = generateGapStyle(parsedGap);
+        this.renderer.setStyle(this.element.nativeElement, 'gap', gapStyle);
+    }
+    handleGridTemplateStyling(type) {
+        if (!isPresent(this[type])) {
+            return;
+        }
+        const gridTemplateStyle = type === 'rows' ? 'grid-template-rows' : 'grid-template-columns';
+        const gridStyle = generateGridStyle(this[type], type);
+        this.renderer.setStyle(this.element.nativeElement, gridTemplateStyle, gridStyle.join(' '));
+    }
+    get direction() {
+        return this.localization.rtl ? 'rtl' : 'ltr';
+    }
+};
+__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: `
+        <ng-content></ng-content>
+    `
+    }),
+    __metadata("design:paramtypes", [Renderer2,
+        ElementRef,
+        LocalizationService])
+], GridLayoutComponent);
+
+let GridLayoutItemComponent = class GridLayoutItemComponent {
+    constructor(renderer, element) {
+        this.renderer = renderer;
+        this.element = element;
+    }
+    ngOnInit() {
+        this.setItemStyle();
+    }
+    ngOnChanges() {
+        this.setItemStyle();
+    }
+    setItemStyle() {
+        const row = this.row || 'auto';
+        const col = this.col || 'auto';
+        const rowSpan = this.rowSpan ? `span ${this.rowSpan}` : 'auto';
+        const colSpan = this.colSpan ? `span ${this.colSpan}` : 'auto';
+        const 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: `
+        <ng-content></ng-content>
+    `
+    }),
+    __metadata("design:paramtypes", [Renderer2,
+        ElementRef])
+], GridLayoutItemComponent);
+
+const exportedModules$a = [
+    GridLayoutComponent,
+    GridLayoutItemComponent
+];
+const declarations$a = [
+    ...exportedModules$a
+];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the GridLayout component.
+ */
+let GridLayoutModule = class GridLayoutModule {
+};
+GridLayoutModule = __decorate([
+    NgModule({
+        declarations: [declarations$a],
+        exports: [exportedModules$a],
+        imports: [CommonModule]
+    })
+], GridLayoutModule);
+
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Layout components.
@@ -8294,7 +8756,9 @@ LayoutModule = __decorate([
             SplitterModule,
             StepperModule,
             TabStripModule,
-            TileLayoutModule
+            TileLayoutModule,
+            StackLayoutModule,
+            GridLayoutModule
         ]
     })
 ], LayoutModule);
@@ -8303,4 +8767,4 @@ LayoutModule = __decorate([
  * 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 };