@progress/kendo-angular-layout 6.4.2-dev.202201271101 → 6.5.0

package/dist/es2015/layout.module.js

@@ -13,6 +13,8 @@ import { SplitterModule } from './splitter.module';
 import { StepperModule } from './stepper.module';
 import { TabStripModule } from './tabstrip.module';
 import { TileLayoutModule } from './tilelayout.module';
+import { StackLayoutModule } from './stacklayout.module';
+import { GridLayoutModule } from './gridlayout.module';
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Layout components.
@@ -57,7 +59,9 @@ LayoutModule = tslib_1.__decorate([
             SplitterModule,
             StepperModule,
             TabStripModule,
-            TileLayoutModule
+            TileLayoutModule,
+            StackLayoutModule,
+            GridLayoutModule
         ]
     })
 ], LayoutModule);

package/dist/es2015/layouts/grid-layout.component.d.ts

@@ -0,0 +1,63 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Renderer2, ElementRef, AfterViewInit, SimpleChanges, OnChanges } from '@angular/core';
+import { GridLayoutGapSettings, AlignSettings } from './models';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+/**
+ * Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
+ */
+export declare class GridLayoutComponent implements AfterViewInit, OnChanges {
+    private renderer;
+    private element;
+    private localization;
+    hostClass: boolean;
+    readonly dir: string;
+    /**
+     * Specifies the number of rows and their height
+     * ([More details]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     *
+     * Accepts an array, which serves two purposes:
+     *
+     * The number of elements in the array defines the number of rows.
+     * Each array element defines the size of the corresponding row. The possible array values are:
+     * * `number` - Defines the size in pixels.
+     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
+     * * [GridLayoutRowSize]({% slug api_layout_gridlayoutrowsize %}) - Configuration object, which accepts a `height` key.
+     */
+    rows: Array<any>;
+    /**
+     * Specifies the number of columns and their widths
+     * ([More details]({% slug layout_gridlayout %}#toc-rows-and-columns)).
+     *
+     * Accepts an array, which serves two purposes:
+     *
+     * The number of elements in the array defines the number of columns.
+     * Each array element defines the size of the corresponding column. The possible array values are:
+     * * `number` - Defines the size in pixels.
+     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
+     * * [GridLayoutColSize]({% slug api_layout_gridlayoutcolsize %}) - Configuration object, which accepts a `width` key.
+     */
+    cols: Array<any>;
+    /**
+     * Specifies the gaps between the elements. The default value is `0`
+     * ([see example]({% slug layout_gridlayout %}#toc-gaps)).
+     */
+    gap: number | string | GridLayoutGapSettings;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner GridLayout elements
+     * ([see example]({% slug layout_gridlayout %}#toc-alignment)).
+     */
+    align: AlignSettings;
+    private _align;
+    private justifyClass;
+    private alignClass;
+    constructor(renderer: Renderer2, element: ElementRef, localization: LocalizationService);
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private handleAlignClasses;
+    private setGap;
+    private handleGridTemplateStyling;
+    private readonly direction;
+}

package/dist/es2015/layouts/grid-layout.component.js

@@ -0,0 +1,144 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, HostBinding, Input, Renderer2, ElementRef, isDevMode } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { ALIGN_PREFIX, generateGapStyle, generateGridStyle, GRID_JUSTIFY_PREFIX, normalizeGap, VERTICAL_SUFFIX, validateGridLayoutRowsCols } from './util';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { isPresent } from '../common/util';
+import { isChanged } from '@progress/kendo-angular-common';
+/**
+ * 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 isValid = validateGridLayoutRowsCols(this[type]);
+        if (!isValid && isDevMode()) {
+            const valueType = type === 'rows' ? 'GridLayoutRowSize' : 'GridLayoutColSize';
+            throw new Error(`The provided ${type} value contains invalid elements. The array supports values of type number, string or ${valueType}.`);
+        }
+        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';
+    }
+};
+tslib_1.__decorate([
+    HostBinding('class.k-grid-layout'),
+    tslib_1.__metadata("design:type", Boolean)
+], GridLayoutComponent.prototype, "hostClass", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.dir'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], GridLayoutComponent.prototype, "dir", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], GridLayoutComponent.prototype, "rows", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], GridLayoutComponent.prototype, "cols", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], GridLayoutComponent.prototype, "gap", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], GridLayoutComponent.prototype, "align", null);
+GridLayoutComponent = tslib_1.__decorate([
+    Component({
+        exportAs: 'kendoGridLayout',
+        selector: 'kendo-gridlayout',
+        providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.gridlayout'
+            }
+        ],
+        template: `
+        <ng-content></ng-content>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [Renderer2,
+        ElementRef,
+        LocalizationService])
+], GridLayoutComponent);
+export { GridLayoutComponent };

package/dist/es2015/layouts/gridlayout-item.component.d.ts

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Renderer2, ElementRef, OnChanges } from '@angular/core';
+export declare class GridLayoutItemComponent implements OnChanges {
+    private renderer;
+    private element;
+    /**
+     * Sets the row of the item in the GridLayout
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    row: number;
+    /**
+     * Sets the column of the item in the GridLayout
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    col: number;
+    /**
+     * Determines how many rows will the item span. The default size is one row
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    rowSpan: number;
+    /**
+     * Determines how many columns will the item span. The default size is one column
+     * ([see example]({% slug items_gridlayout %}#toc-size-and-position)).
+     */
+    colSpan: number;
+    constructor(renderer: Renderer2, element: ElementRef);
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    private setItemStyle;
+}

package/dist/es2015/layouts/gridlayout-item.component.js

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, Input, Renderer2, ElementRef } from '@angular/core';
+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);
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], GridLayoutItemComponent.prototype, "row", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], GridLayoutItemComponent.prototype, "col", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], GridLayoutItemComponent.prototype, "rowSpan", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], GridLayoutItemComponent.prototype, "colSpan", void 0);
+GridLayoutItemComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-gridlayout-item',
+        template: `
+        <ng-content></ng-content>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [Renderer2,
+        ElementRef])
+], GridLayoutItemComponent);
+export { GridLayoutItemComponent };

package/dist/es2015/layouts/models/gridlayout-gap-settings.d.ts

@@ -0,0 +1,17 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the gaps between the elements of the GridLayout.
+ */
+export interface GridLayoutGapSettings {
+    /**
+     * Defines the row gap between the elements.
+     */
+    rows?: number | string;
+    /**
+     * Defines the column gap between the elements.
+     */
+    cols?: number | string;
+}

package/dist/es2015/layouts/models/gridlayout-gap-settings.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/layouts/models/gridlayout-row-col-size.d.ts

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Specifies the size of the GridLayout row.
+ */
+export interface GridLayoutRowSize {
+    /**
+     * Defines the height of the row.
+     */
+    height?: number | string;
+}
+/**
+ * Specifies the size of the GridLayout column.
+ */
+export interface GridLayoutColSize {
+    /**
+     * Defines the width of the column.
+     */
+    width?: number | string;
+}

package/dist/es2015/layouts/models/gridlayout-row-col-size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/layouts/models/layout-align-settings.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { VerticalAlign, HorizontalAlign } from '../models';
+/**
+ * Represents the possible align options of the StackLayout and GridLayout components.
+ */
+export interface AlignSettings {
+    /**
+     * Defines the horizontal alignment of the inner GridLayout and StackLayout elements.
+     */
+    horizontal?: HorizontalAlign;
+    /**
+     * Defines the vertical alignment of the inner GridLayout and StackLayout elements.
+     */
+    vertical?: VerticalAlign;
+}

package/dist/es2015/layouts/models/layout-align-settings.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/layouts/models/layout-horizontal-align.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible horizontal alignment options of the StackLayout and GridLayout.
+ */
+export declare type HorizontalAlign = 'start' | 'center' | 'end' | 'stretch';

package/dist/es2015/layouts/models/layout-horizontal-align.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/layouts/models/layout-vertical-align.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible vertical alignment options of the StackLayout and GridLayout.
+ */
+export declare type VerticalAlign = 'top' | 'middle' | 'bottom' | 'stretch';

package/dist/es2015/layouts/models/layout-vertical-align.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/layouts/models.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './models/layout-align-settings';
+export * from './models/layout-horizontal-align';
+export * from './models/layout-vertical-align';
+export * from './models/gridlayout-gap-settings';
+export * from './models/gridlayout-row-col-size';
+export * from '../common/orientation';

package/dist/es2015/layouts/models.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/layouts/stack-layout.component.d.ts

@@ -0,0 +1,47 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Renderer2, ElementRef, AfterViewInit, SimpleChanges, OnChanges } from '@angular/core';
+import { AlignSettings, Orientation } from './models';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+/**
+ * Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
+ */
+export declare class StackLayoutComponent implements AfterViewInit, OnChanges {
+    private renderer;
+    private element;
+    private localization;
+    hostClass: boolean;
+    readonly horizontalClass: boolean;
+    readonly verticalClass: boolean;
+    readonly dir: string;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner StackLayout elements
+     * ([see example]({% slug layout_stacklayout %}#toc-alignment)).
+     */
+    align: AlignSettings;
+    /**
+     * Specifies the gap between the inner StackLayout elements. The default value is `0`
+     * ([see example]({% slug layout_stacklayout %}#toc-gaps)).
+     */
+    gap: number | string;
+    /**
+     * Specifies the orientation of the StackLayout
+     * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
+     *
+     * The possible values are:
+     * (Default) `horizontal`
+     * `vertical`
+     */
+    orientation: Orientation;
+    private _align;
+    private justifyClass;
+    private alignClass;
+    constructor(renderer: Renderer2, element: ElementRef, localization: LocalizationService);
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private handleAlignClasses;
+    private setGap;
+    private readonly direction;
+}

package/dist/es2015/layouts/stack-layout.component.js

@@ -0,0 +1,152 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, HostBinding, Input, Renderer2, ElementRef } from '@angular/core';
+import { VERTICAL_SUFFIX, ALIGN_PREFIX, JUSTIFY_PREFIX } from './util';
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { isNumber, isPresent } from '../common/util';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { isChanged } from '@progress/kendo-angular-common';
+/**
+ * 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';
+    }
+};
+tslib_1.__decorate([
+    HostBinding('class.k-stack-layout'),
+    tslib_1.__metadata("design:type", Boolean)
+], StackLayoutComponent.prototype, "hostClass", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-hstack'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], StackLayoutComponent.prototype, "horizontalClass", null);
+tslib_1.__decorate([
+    HostBinding('class.k-vstack'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], StackLayoutComponent.prototype, "verticalClass", null);
+tslib_1.__decorate([
+    HostBinding('attr.dir'),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [])
+], StackLayoutComponent.prototype, "dir", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], StackLayoutComponent.prototype, "align", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], StackLayoutComponent.prototype, "gap", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], StackLayoutComponent.prototype, "orientation", void 0);
+StackLayoutComponent = tslib_1.__decorate([
+    Component({
+        exportAs: 'kendoStackLayout',
+        selector: 'kendo-stacklayout',
+        providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.stacklayout'
+            }
+        ],
+        template: `
+        <ng-content></ng-content>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [Renderer2,
+        ElementRef,
+        LocalizationService])
+], StackLayoutComponent);
+export { StackLayoutComponent };