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

package/dist/es2015/layouts/util.js

@@ -0,0 +1,87 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const VERTICAL_SUFFIX = {
+    top: 'start',
+    middle: 'center',
+    bottom: 'end',
+    stretch: 'stretch'
+};
+/**
+ * @hidden
+ */
+export const JUSTIFY_PREFIX = `k-justify-content`;
+/**
+ * @hidden
+ */
+export const GRID_JUSTIFY_PREFIX = `k-justify-items`;
+/**
+ * @hidden
+ */
+export const ALIGN_PREFIX = `k-align-items`;
+/**
+ * @hidden
+ */
+export 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
+ */
+export 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
+ */
+export 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;
+};

package/dist/es2015/main.d.ts

@@ -69,3 +69,10 @@ export { StepperModule } from './stepper.module';
 export { TabStripModule } from './tabstrip.module';
 export { ExpansionPanelModule } from './expansionpanel.module';
 export { TileLayoutModule } from './tilelayout.module';
+export { StackLayoutModule } from './stacklayout.module';
+export { GridLayoutModule } from './gridlayout.module';
+export { StackLayoutComponent } from './layouts/stack-layout.component';
+export { AlignSettings, HorizontalAlign, VerticalAlign } from './layouts/models';
+export { GridLayoutComponent } from './layouts/grid-layout.component';
+export { GridLayoutItemComponent } from './layouts/gridlayout-item.component';
+export { GridLayoutRowSize, GridLayoutColSize, GridLayoutGapSettings } from './layouts/models';

package/dist/es2015/main.js

@@ -63,3 +63,10 @@ export { StepperModule } from './stepper.module';
 export { TabStripModule } from './tabstrip.module';
 export { ExpansionPanelModule } from './expansionpanel.module';
 export { TileLayoutModule } from './tilelayout.module';
+export { StackLayoutModule } from './stacklayout.module';
+export { GridLayoutModule } from './gridlayout.module';
+// StackLayout exports
+export { StackLayoutComponent } from './layouts/stack-layout.component';
+// GridLayout exports
+export { GridLayoutComponent } from './layouts/grid-layout.component';
+export { GridLayoutItemComponent } from './layouts/gridlayout-item.component';

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

package/dist/es2015/splitter/splitter-bar.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnDestroy, OnInit } from '@angular/core';
+import { ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Orientation } from '../common/orientation';
 import { DraggableDirective } from '@progress/kendo-angular-common';
@@ -12,6 +12,7 @@ import { SplitterService } from './splitter.service';
  */
 export declare class SplitterBarComponent implements OnInit, OnDestroy {
     draggable: DraggableDirective;
+    element: ElementRef<HTMLElement>;
     private splitter;
     private localization;
     orientation: Orientation;
@@ -28,7 +29,7 @@ export declare class SplitterBarComponent implements OnInit, OnDestroy {
     onFocusOut(): void;
     onKeyDown(event: any): void;
     private readonly expandLast;
-    constructor(draggable: DraggableDirective, splitter: SplitterService, localization: LocalizationService);
+    constructor(draggable: DraggableDirective, element: ElementRef<HTMLElement>, splitter: SplitterService, localization: LocalizationService);
     ngOnInit(): void;
     ngOnDestroy(): void;
     togglePrevious(): void;

package/dist/es2015/splitter/splitter-bar.component.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Host, HostBinding, HostListener, Input } from '@angular/core';
+import { Component, ElementRef, Host, HostBinding, HostListener, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { DraggableDirective, Keys } from '@progress/kendo-angular-common';
 import { SplitterService } from './splitter.service';
@@ -30,8 +30,9 @@ const ɵ3 = createMoveStream;
  * @hidden
  */
 let SplitterBarComponent = class SplitterBarComponent {
-    constructor(draggable, splitter, localization) {
+    constructor(draggable, element, splitter, localization) {
         this.draggable = draggable;
+        this.element = element;
         this.splitter = splitter;
         this.localization = localization;
         this.orientation = 'horizontal';
@@ -245,6 +246,7 @@ SplitterBarComponent = tslib_1.__decorate([
     }),
     tslib_1.__param(0, Host()),
     tslib_1.__metadata("design:paramtypes", [DraggableDirective,
+        ElementRef,
         SplitterService,
         LocalizationService])
 ], SplitterBarComponent);

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

@@ -8,7 +8,7 @@ import { Orientation } from '../common/orientation';
  * Represents the pane component of the Splitter.
  */
 export declare class SplitterPaneComponent implements AfterViewChecked {
-    private element;
+    element: ElementRef<HTMLElement>;
     private renderer;
     private cdr;
     /**
@@ -83,7 +83,7 @@ export declare class SplitterPaneComponent implements AfterViewChecked {
     isResized: boolean;
     private _size;
     private _order;
-    constructor(element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    constructor(element: ElementRef<HTMLElement>, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngAfterViewChecked(): void;
     /**
      * @hidden

package/dist/es2015/splitter/splitter.component.d.ts

@@ -2,10 +2,11 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, AfterContentInit, QueryList } from '@angular/core';
+import { ElementRef, EventEmitter, AfterContentInit, QueryList, Renderer2 } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Orientation } from '../common/orientation';
 import { SplitterPaneComponent } from './splitter-pane.component';
+import { SplitterBarComponent } from './splitter-bar.component';
 import { SplitterService } from './splitter.service';
 /**
  * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
@@ -43,9 +44,10 @@ import { SplitterService } from './splitter.service';
  * ```
  */
 export declare class SplitterComponent implements AfterContentInit {
-    protected element: ElementRef;
+    protected element: ElementRef<HTMLElement>;
     protected splitterService: SplitterService;
     private localization;
+    private renderer;
     private enclosingPane?;
     /**
      * Specifies the orientation of the panes within the Splitter.
@@ -64,12 +66,13 @@ export declare class SplitterComponent implements AfterContentInit {
     readonly verticalHostClasses: boolean;
     readonly dir: string;
     ariaRole: string;
+    splitbars: QueryList<SplitterBarComponent>;
     /**
      * @hidden
      */
     panes: QueryList<SplitterPaneComponent>;
     private paneChangesSubscription;
-    constructor(element: ElementRef, splitterService: SplitterService, localization: LocalizationService, enclosingPane?: SplitterPaneComponent);
+    constructor(element: ElementRef<HTMLElement>, splitterService: SplitterService, localization: LocalizationService, renderer: Renderer2, enclosingPane?: SplitterPaneComponent);
     ngAfterContentInit(): void;
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;

package/dist/es2015/splitter/splitter.component.js

@@ -3,12 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList } from '@angular/core';
+import { Component, ElementRef, EventEmitter, ContentChildren, Host, HostBinding, Inject, Input, Optional, Output, QueryList, ViewChildren, Renderer2 } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { SplitterPaneComponent } from './splitter-pane.component';
+import { SplitterBarComponent } from './splitter-bar.component';
 import { SplitterService } from './splitter.service';
+import { isPresent } from '../common/util';
 /**
  * Represents the [Kendo UI Splitter component for Angular]({% slug overview_splitter %}).
  *
@@ -45,10 +47,11 @@ import { SplitterService } from './splitter.service';
  * ```
  */
 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.
@@ -78,6 +81,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();
     }
@@ -155,6 +167,11 @@ tslib_1.__decorate([
     HostBinding('attr.role'),
     tslib_1.__metadata("design:type", String)
 ], SplitterComponent.prototype, "ariaRole", void 0);
+tslib_1.__decorate([
+    ViewChildren(SplitterBarComponent),
+    tslib_1.__metadata("design:type", QueryList),
+    tslib_1.__metadata("design:paramtypes", [QueryList])
+], SplitterComponent.prototype, "splitbars", null);
 tslib_1.__decorate([
     ContentChildren(SplitterPaneComponent),
     tslib_1.__metadata("design:type", QueryList)
@@ -187,10 +204,11 @@ SplitterComponent = tslib_1.__decorate([
       </ng-container>
     `
     }),
-    tslib_1.__param(3, Optional()), tslib_1.__param(3, Host()), tslib_1.__param(3, Inject(SplitterPaneComponent)),
+    tslib_1.__param(4, Optional()), tslib_1.__param(4, Host()), tslib_1.__param(4, Inject(SplitterPaneComponent)),
     tslib_1.__metadata("design:paramtypes", [ElementRef,
         SplitterService,
         LocalizationService,
+        Renderer2,
         SplitterPaneComponent])
 ], SplitterComponent);
 export { SplitterComponent };

package/dist/es2015/stacklayout.module.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
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the StackLayout component.
+ */
+export declare class StackLayoutModule {
+}

package/dist/es2015/stacklayout.module.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StackLayoutComponent } from './layouts/stack-layout.component';
+const exportedModules = [
+    StackLayoutComponent
+];
+const declarations = [
+    ...exportedModules
+];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the StackLayout component.
+ */
+let StackLayoutModule = class StackLayoutModule {
+};
+StackLayoutModule = tslib_1.__decorate([
+    NgModule({
+        declarations: [declarations],
+        exports: [exportedModules],
+        imports: [CommonModule]
+    })
+], StackLayoutModule);
+export { StackLayoutModule };