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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/cdn/js/kendo-angular-layout.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/common/util.js +4 -0
  4. package/dist/es/gridlayout.module.js +31 -0
  5. package/dist/es/layout.module.js +5 -1
  6. package/dist/es/layouts/grid-layout.component.js +150 -0
  7. package/dist/es/layouts/gridlayout-item.component.js +52 -0
  8. package/dist/es/layouts/models/gridlayout-gap-settings.js +4 -0
  9. package/dist/es/layouts/models/gridlayout-row-col-size.js +4 -0
  10. package/dist/es/layouts/models/layout-align-settings.js +4 -0
  11. package/dist/es/layouts/models/layout-horizontal-align.js +4 -0
  12. package/dist/es/layouts/models/layout-vertical-align.js +4 -0
  13. package/dist/es/layouts/models.js +4 -0
  14. package/dist/es/layouts/stack-layout.component.js +171 -0
  15. package/dist/es/layouts/util.js +87 -0
  16. package/dist/es/main.js +7 -0
  17. package/dist/es/package-metadata.js +1 -1
  18. package/dist/es/stacklayout.module.js +29 -0
  19. package/dist/es2015/common/orientation.d.ts +1 -1
  20. package/dist/es2015/common/util.d.ts +4 -0
  21. package/dist/es2015/common/util.js +4 -0
  22. package/dist/es2015/gridlayout.module.d.ts +10 -0
  23. package/dist/es2015/gridlayout.module.js +30 -0
  24. package/dist/es2015/index.metadata.json +1 -1
  25. package/dist/es2015/layout.module.js +5 -1
  26. package/dist/es2015/layouts/grid-layout.component.d.ts +47 -0
  27. package/dist/es2015/layouts/grid-layout.component.js +139 -0
  28. package/dist/es2015/layouts/gridlayout-item.component.d.ts +33 -0
  29. package/dist/es2015/layouts/gridlayout-item.component.js +53 -0
  30. package/dist/es2015/layouts/models/gridlayout-gap-settings.d.ts +17 -0
  31. package/dist/es2015/layouts/models/gridlayout-gap-settings.js +4 -0
  32. package/dist/es2015/layouts/models/gridlayout-row-col-size.d.ts +22 -0
  33. package/dist/es2015/layouts/models/gridlayout-row-col-size.js +4 -0
  34. package/dist/es2015/layouts/models/layout-align-settings.d.ts +18 -0
  35. package/dist/es2015/layouts/models/layout-align-settings.js +4 -0
  36. package/dist/es2015/layouts/models/layout-horizontal-align.d.ts +8 -0
  37. package/dist/es2015/layouts/models/layout-horizontal-align.js +4 -0
  38. package/dist/es2015/layouts/models/layout-vertical-align.d.ts +8 -0
  39. package/dist/es2015/layouts/models/layout-vertical-align.js +4 -0
  40. package/dist/es2015/layouts/models.d.ts +10 -0
  41. package/dist/es2015/layouts/models.js +4 -0
  42. package/dist/es2015/layouts/stack-layout.component.d.ts +47 -0
  43. package/dist/es2015/layouts/stack-layout.component.js +152 -0
  44. package/dist/es2015/layouts/util.d.ts +38 -0
  45. package/dist/es2015/layouts/util.js +87 -0
  46. package/dist/es2015/main.d.ts +7 -0
  47. package/dist/es2015/main.js +7 -0
  48. package/dist/es2015/package-metadata.js +1 -1
  49. package/dist/es2015/stacklayout.module.d.ts +10 -0
  50. package/dist/es2015/stacklayout.module.js +28 -0
  51. package/dist/fesm2015/index.js +449 -4
  52. package/dist/fesm5/index.js +480 -4
  53. package/dist/npm/common/util.js +4 -0
  54. package/dist/npm/gridlayout.module.js +33 -0
  55. package/dist/npm/layout.module.js +5 -1
  56. package/dist/npm/layouts/grid-layout.component.js +152 -0
  57. package/dist/npm/layouts/gridlayout-item.component.js +54 -0
  58. package/dist/npm/layouts/models/gridlayout-gap-settings.js +6 -0
  59. package/dist/npm/layouts/models/gridlayout-row-col-size.js +6 -0
  60. package/dist/npm/layouts/models/layout-align-settings.js +6 -0
  61. package/dist/npm/layouts/models/layout-horizontal-align.js +6 -0
  62. package/dist/npm/layouts/models/layout-vertical-align.js +6 -0
  63. package/dist/npm/layouts/models.js +6 -0
  64. package/dist/npm/layouts/stack-layout.component.js +173 -0
  65. package/dist/npm/layouts/util.js +89 -0
  66. package/dist/npm/main.js +12 -0
  67. package/dist/npm/package-metadata.js +1 -1
  68. package/dist/npm/stacklayout.module.js +31 -0
  69. package/dist/systemjs/kendo-angular-layout.js +1 -1
  70. package/package.json +10 -8
@@ -0,0 +1,87 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * @hidden
7
+ */
8
+ export const VERTICAL_SUFFIX = {
9
+ top: 'start',
10
+ middle: 'center',
11
+ bottom: 'end',
12
+ stretch: 'stretch'
13
+ };
14
+ /**
15
+ * @hidden
16
+ */
17
+ export const JUSTIFY_PREFIX = `k-justify-content`;
18
+ /**
19
+ * @hidden
20
+ */
21
+ export const GRID_JUSTIFY_PREFIX = `k-justify-items`;
22
+ /**
23
+ * @hidden
24
+ */
25
+ export const ALIGN_PREFIX = `k-align-items`;
26
+ /**
27
+ * @hidden
28
+ */
29
+ export const normalizeGap = (gap) => {
30
+ if (typeof gap === 'number' || typeof gap === 'string') {
31
+ return { cols: gap, rows: gap };
32
+ }
33
+ else {
34
+ let parsedGap = {};
35
+ parsedGap.rows = gap.rows ? gap.rows : 0;
36
+ parsedGap.cols = gap.cols ? gap.cols : 0;
37
+ return parsedGap;
38
+ }
39
+ };
40
+ /**
41
+ * @hidden
42
+ */
43
+ export const generateGapStyle = (gap) => {
44
+ if (gap.rows === gap.cols) {
45
+ return typeof gap.rows === 'number' ? `${gap.rows}px` : gap.rows;
46
+ }
47
+ else {
48
+ let rowStyle = `${typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows}`;
49
+ let colStyle = `${typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols}`;
50
+ return `${rowStyle} ${colStyle}`;
51
+ }
52
+ };
53
+ /**
54
+ * @hidden
55
+ */
56
+ export const generateGridStyle = (items, itemType) => {
57
+ let styling = [];
58
+ items.forEach((item) => {
59
+ if (typeof item === 'number') {
60
+ styling.push(`${item}px`);
61
+ }
62
+ else if (typeof item === 'string') {
63
+ styling.push(item);
64
+ }
65
+ else {
66
+ if (itemType === 'rows') {
67
+ const rowHeight = item.height;
68
+ if (rowHeight) {
69
+ styling.push(typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight);
70
+ }
71
+ else {
72
+ styling.push('0px');
73
+ }
74
+ }
75
+ else {
76
+ const colWidth = item.width;
77
+ if (colWidth) {
78
+ styling.push(typeof colWidth === 'number' ? `${colWidth}px` : colWidth);
79
+ }
80
+ else {
81
+ styling.push('0px');
82
+ }
83
+ }
84
+ }
85
+ });
86
+ return styling;
87
+ };
@@ -69,3 +69,10 @@ export { StepperModule } from './stepper.module';
69
69
  export { TabStripModule } from './tabstrip.module';
70
70
  export { ExpansionPanelModule } from './expansionpanel.module';
71
71
  export { TileLayoutModule } from './tilelayout.module';
72
+ export { StackLayoutModule } from './stacklayout.module';
73
+ export { GridLayoutModule } from './gridlayout.module';
74
+ export { StackLayoutComponent } from './layouts/stack-layout.component';
75
+ export { AlignSettings, HorizontalAlign, VerticalAlign } from './layouts/models';
76
+ export { GridLayoutComponent } from './layouts/grid-layout.component';
77
+ export { GridLayoutItemComponent } from './layouts/gridlayout-item.component';
78
+ export { GridLayoutRowSize, GridLayoutColSize, GridLayoutGapSettings } from './layouts/models';
@@ -63,3 +63,10 @@ export { StepperModule } from './stepper.module';
63
63
  export { TabStripModule } from './tabstrip.module';
64
64
  export { ExpansionPanelModule } from './expansionpanel.module';
65
65
  export { TileLayoutModule } from './tilelayout.module';
66
+ export { StackLayoutModule } from './stacklayout.module';
67
+ export { GridLayoutModule } from './gridlayout.module';
68
+ // StackLayout exports
69
+ export { StackLayoutComponent } from './layouts/stack-layout.component';
70
+ // GridLayout exports
71
+ export { GridLayoutComponent } from './layouts/grid-layout.component';
72
+ export { GridLayoutItemComponent } from './layouts/gridlayout-item.component';
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-layout',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1643316804,
12
+ publishDate: 1644423873,
13
13
  version: '',
14
14
  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'
15
15
  };
@@ -0,0 +1,10 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
7
+ * definition for the StackLayout component.
8
+ */
9
+ export declare class StackLayoutModule {
10
+ }
@@ -0,0 +1,28 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import * as tslib_1 from "tslib";
6
+ import { NgModule } from '@angular/core';
7
+ import { CommonModule } from '@angular/common';
8
+ import { StackLayoutComponent } from './layouts/stack-layout.component';
9
+ const exportedModules = [
10
+ StackLayoutComponent
11
+ ];
12
+ const declarations = [
13
+ ...exportedModules
14
+ ];
15
+ /**
16
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
17
+ * definition for the StackLayout component.
18
+ */
19
+ let StackLayoutModule = class StackLayoutModule {
20
+ };
21
+ StackLayoutModule = tslib_1.__decorate([
22
+ NgModule({
23
+ declarations: [declarations],
24
+ exports: [exportedModules],
25
+ imports: [CommonModule]
26
+ })
27
+ ], StackLayoutModule);
28
+ export { StackLayoutModule };
@@ -5,7 +5,7 @@
5
5
  import { __decorate, __metadata, __param } from 'tslib';
6
6
  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';
7
7
  import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
8
- import { Keys, DraggableDirective, PreventableEvent, isDocumentAvailable, hasObservers, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
8
+ import { Keys, DraggableDirective, PreventableEvent, isDocumentAvailable, hasObservers, EventsModule, DraggableModule, ResizeSensorModule, isChanged } from '@progress/kendo-angular-common';
9
9
  import { validatePackage } from '@progress/kendo-licensing';
10
10
  import { trigger, state, style, transition, animate, AUTO_STYLE, AnimationBuilder } from '@angular/animations';
11
11
  import { Subject, BehaviorSubject, Subscription, of } from 'rxjs';
@@ -21,7 +21,7 @@ const packageMetadata = {
21
21
  name: '@progress/kendo-angular-layout',
22
22
  productName: 'Kendo UI for Angular',
23
23
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
24
- publishDate: 1643316804,
24
+ publishDate: 1644423873,
25
25
  version: '',
26
26
  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'
27
27
  };
@@ -219,6 +219,10 @@ const getStylingClasses = (componentType, stylingOption, previousValue, newValue
219
219
  * @hidden
220
220
  */
221
221
  const mapShapeToRounded = (shape) => SHAPE_TO_ROUNDED[shape] || null;
222
+ /**
223
+ * @hidden
224
+ */
225
+ const isNumber = (value) => typeof value === 'number' && isFinite(value);
222
226
 
223
227
  const focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
224
228
  const toClassList = (classNames) => String(classNames).trim().split(' ');
@@ -8269,6 +8273,445 @@ TileLayoutModule = __decorate([
8269
8273
  })
8270
8274
  ], TileLayoutModule);
8271
8275
 
8276
+ /**
8277
+ * @hidden
8278
+ */
8279
+ const VERTICAL_SUFFIX = {
8280
+ top: 'start',
8281
+ middle: 'center',
8282
+ bottom: 'end',
8283
+ stretch: 'stretch'
8284
+ };
8285
+ /**
8286
+ * @hidden
8287
+ */
8288
+ const JUSTIFY_PREFIX = `k-justify-content`;
8289
+ /**
8290
+ * @hidden
8291
+ */
8292
+ const GRID_JUSTIFY_PREFIX = `k-justify-items`;
8293
+ /**
8294
+ * @hidden
8295
+ */
8296
+ const ALIGN_PREFIX = `k-align-items`;
8297
+ /**
8298
+ * @hidden
8299
+ */
8300
+ const normalizeGap = (gap) => {
8301
+ if (typeof gap === 'number' || typeof gap === 'string') {
8302
+ return { cols: gap, rows: gap };
8303
+ }
8304
+ else {
8305
+ let parsedGap = {};
8306
+ parsedGap.rows = gap.rows ? gap.rows : 0;
8307
+ parsedGap.cols = gap.cols ? gap.cols : 0;
8308
+ return parsedGap;
8309
+ }
8310
+ };
8311
+ /**
8312
+ * @hidden
8313
+ */
8314
+ const generateGapStyle = (gap) => {
8315
+ if (gap.rows === gap.cols) {
8316
+ return typeof gap.rows === 'number' ? `${gap.rows}px` : gap.rows;
8317
+ }
8318
+ else {
8319
+ let rowStyle = `${typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows}`;
8320
+ let colStyle = `${typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols}`;
8321
+ return `${rowStyle} ${colStyle}`;
8322
+ }
8323
+ };
8324
+ /**
8325
+ * @hidden
8326
+ */
8327
+ const generateGridStyle = (items, itemType) => {
8328
+ let styling = [];
8329
+ items.forEach((item) => {
8330
+ if (typeof item === 'number') {
8331
+ styling.push(`${item}px`);
8332
+ }
8333
+ else if (typeof item === 'string') {
8334
+ styling.push(item);
8335
+ }
8336
+ else {
8337
+ if (itemType === 'rows') {
8338
+ const rowHeight = item.height;
8339
+ if (rowHeight) {
8340
+ styling.push(typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight);
8341
+ }
8342
+ else {
8343
+ styling.push('0px');
8344
+ }
8345
+ }
8346
+ else {
8347
+ const colWidth = item.width;
8348
+ if (colWidth) {
8349
+ styling.push(typeof colWidth === 'number' ? `${colWidth}px` : colWidth);
8350
+ }
8351
+ else {
8352
+ styling.push('0px');
8353
+ }
8354
+ }
8355
+ }
8356
+ });
8357
+ return styling;
8358
+ };
8359
+
8360
+ /**
8361
+ * Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
8362
+ */
8363
+ let StackLayoutComponent = class StackLayoutComponent {
8364
+ constructor(renderer, element, localization) {
8365
+ this.renderer = renderer;
8366
+ this.element = element;
8367
+ this.localization = localization;
8368
+ this.hostClass = true;
8369
+ /**
8370
+ * Specifies the gap between the inner StackLayout elements. The default value is `0`
8371
+ * ([see example]({% slug layout_stacklayout %}#toc-gaps)).
8372
+ */
8373
+ this.gap = 0;
8374
+ /**
8375
+ * Specifies the orientation of the StackLayout
8376
+ * ([see example]({% slug layout_stacklayout %}#toc-orientation)).
8377
+ *
8378
+ * The possible values are:
8379
+ * (Default) `horizontal`
8380
+ * `vertical`
8381
+ */
8382
+ this.orientation = 'horizontal';
8383
+ this._align = {
8384
+ horizontal: 'stretch',
8385
+ vertical: 'stretch'
8386
+ };
8387
+ validatePackage(packageMetadata);
8388
+ }
8389
+ get horizontalClass() {
8390
+ return this.orientation === 'horizontal';
8391
+ }
8392
+ get verticalClass() {
8393
+ return this.orientation === 'vertical';
8394
+ }
8395
+ get dir() {
8396
+ return this.direction;
8397
+ }
8398
+ /**
8399
+ * Specifies the horizontal and vertical alignment of the inner StackLayout elements
8400
+ * ([see example]({% slug layout_stacklayout %}#toc-alignment)).
8401
+ */
8402
+ set align(align) {
8403
+ this._align = Object.assign({}, this._align, align);
8404
+ this.handleAlignClasses();
8405
+ }
8406
+ get align() {
8407
+ return this._align;
8408
+ }
8409
+ ngAfterViewInit() {
8410
+ this.handleAlignClasses();
8411
+ this.setGap();
8412
+ }
8413
+ ngOnChanges(changes) {
8414
+ if (isChanged('gap', changes)) {
8415
+ this.setGap();
8416
+ }
8417
+ if (isChanged('orientation', changes)) {
8418
+ this.handleAlignClasses();
8419
+ }
8420
+ }
8421
+ handleAlignClasses() {
8422
+ const elem = this.element.nativeElement;
8423
+ if (isPresent(this.justifyClass)) {
8424
+ this.renderer.removeClass(elem, this.justifyClass);
8425
+ }
8426
+ if (isPresent(this.alignClass)) {
8427
+ this.renderer.removeClass(elem, this.alignClass);
8428
+ }
8429
+ if (this.orientation === 'horizontal') {
8430
+ this.justifyClass = `${JUSTIFY_PREFIX}-${this.align.horizontal}`;
8431
+ this.alignClass = `${ALIGN_PREFIX}-${VERTICAL_SUFFIX[this.align.vertical]}`;
8432
+ }
8433
+ else {
8434
+ this.justifyClass = `${JUSTIFY_PREFIX}-${VERTICAL_SUFFIX[this.align.vertical]}`;
8435
+ this.alignClass = `${ALIGN_PREFIX}-${this.align.horizontal}`;
8436
+ }
8437
+ this.renderer.addClass(elem, this.justifyClass);
8438
+ this.renderer.addClass(elem, this.alignClass);
8439
+ }
8440
+ setGap() {
8441
+ const parsedGap = isNumber(this.gap) ? `${this.gap}px` : this.gap;
8442
+ this.renderer.setStyle(this.element.nativeElement, 'gap', parsedGap);
8443
+ }
8444
+ get direction() {
8445
+ return this.localization.rtl ? 'rtl' : 'ltr';
8446
+ }
8447
+ };
8448
+ __decorate([
8449
+ HostBinding('class.k-stack-layout'),
8450
+ __metadata("design:type", Boolean)
8451
+ ], StackLayoutComponent.prototype, "hostClass", void 0);
8452
+ __decorate([
8453
+ HostBinding('class.k-hstack'),
8454
+ __metadata("design:type", Boolean),
8455
+ __metadata("design:paramtypes", [])
8456
+ ], StackLayoutComponent.prototype, "horizontalClass", null);
8457
+ __decorate([
8458
+ HostBinding('class.k-vstack'),
8459
+ __metadata("design:type", Boolean),
8460
+ __metadata("design:paramtypes", [])
8461
+ ], StackLayoutComponent.prototype, "verticalClass", null);
8462
+ __decorate([
8463
+ HostBinding('attr.dir'),
8464
+ __metadata("design:type", String),
8465
+ __metadata("design:paramtypes", [])
8466
+ ], StackLayoutComponent.prototype, "dir", null);
8467
+ __decorate([
8468
+ Input(),
8469
+ __metadata("design:type", Object),
8470
+ __metadata("design:paramtypes", [Object])
8471
+ ], StackLayoutComponent.prototype, "align", null);
8472
+ __decorate([
8473
+ Input(),
8474
+ __metadata("design:type", Object)
8475
+ ], StackLayoutComponent.prototype, "gap", void 0);
8476
+ __decorate([
8477
+ Input(),
8478
+ __metadata("design:type", String)
8479
+ ], StackLayoutComponent.prototype, "orientation", void 0);
8480
+ StackLayoutComponent = __decorate([
8481
+ Component({
8482
+ exportAs: 'kendoStackLayout',
8483
+ selector: 'kendo-stacklayout',
8484
+ providers: [
8485
+ LocalizationService,
8486
+ {
8487
+ provide: L10N_PREFIX,
8488
+ useValue: 'kendo.stacklayout'
8489
+ }
8490
+ ],
8491
+ template: `
8492
+ <ng-content></ng-content>
8493
+ `
8494
+ }),
8495
+ __metadata("design:paramtypes", [Renderer2,
8496
+ ElementRef,
8497
+ LocalizationService])
8498
+ ], StackLayoutComponent);
8499
+
8500
+ const exportedModules$9 = [
8501
+ StackLayoutComponent
8502
+ ];
8503
+ const declarations$9 = [
8504
+ ...exportedModules$9
8505
+ ];
8506
+ /**
8507
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
8508
+ * definition for the StackLayout component.
8509
+ */
8510
+ let StackLayoutModule = class StackLayoutModule {
8511
+ };
8512
+ StackLayoutModule = __decorate([
8513
+ NgModule({
8514
+ declarations: [declarations$9],
8515
+ exports: [exportedModules$9],
8516
+ imports: [CommonModule]
8517
+ })
8518
+ ], StackLayoutModule);
8519
+
8520
+ /**
8521
+ * Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
8522
+ */
8523
+ let GridLayoutComponent = class GridLayoutComponent {
8524
+ constructor(renderer, element, localization) {
8525
+ this.renderer = renderer;
8526
+ this.element = element;
8527
+ this.localization = localization;
8528
+ this.hostClass = true;
8529
+ /**
8530
+ * Specifies the gaps between the elements. The default value is `0`
8531
+ * ([see example]({% slug layout_gridlayout %}#toc-gaps)).
8532
+ */
8533
+ this.gap = 0;
8534
+ this._align = {
8535
+ horizontal: 'stretch',
8536
+ vertical: 'stretch'
8537
+ };
8538
+ validatePackage(packageMetadata);
8539
+ }
8540
+ get dir() {
8541
+ return this.direction;
8542
+ }
8543
+ /**
8544
+ * Specifies the horizontal and vertical alignment of the inner GridLayout elements
8545
+ * ([see example]({% slug layout_gridlayout %}#toc-alignment)).
8546
+ */
8547
+ set align(align) {
8548
+ this._align = Object.assign({}, this._align, align);
8549
+ this.handleAlignClasses();
8550
+ }
8551
+ get align() {
8552
+ return this._align;
8553
+ }
8554
+ ngAfterViewInit() {
8555
+ this.handleAlignClasses();
8556
+ this.handleGridTemplateStyling('rows');
8557
+ this.handleGridTemplateStyling('cols');
8558
+ this.setGap();
8559
+ }
8560
+ ngOnChanges(changes) {
8561
+ if (isChanged('gap', changes)) {
8562
+ this.setGap();
8563
+ }
8564
+ if (isChanged('rows', changes)) {
8565
+ this.handleGridTemplateStyling('rows');
8566
+ }
8567
+ if (isChanged('cols', changes)) {
8568
+ this.handleGridTemplateStyling('cols');
8569
+ }
8570
+ }
8571
+ handleAlignClasses() {
8572
+ const elem = this.element.nativeElement;
8573
+ if (isPresent(this.justifyClass)) {
8574
+ this.renderer.removeClass(elem, this.justifyClass);
8575
+ }
8576
+ if (isPresent(this.alignClass)) {
8577
+ this.renderer.removeClass(elem, this.alignClass);
8578
+ }
8579
+ this.justifyClass = `${GRID_JUSTIFY_PREFIX}-${this.align.horizontal}`;
8580
+ this.alignClass = `${ALIGN_PREFIX}-${VERTICAL_SUFFIX[this.align.vertical]}`;
8581
+ this.renderer.addClass(elem, this.justifyClass);
8582
+ this.renderer.addClass(elem, this.alignClass);
8583
+ }
8584
+ setGap() {
8585
+ let parsedGap = normalizeGap(this.gap);
8586
+ let gapStyle = generateGapStyle(parsedGap);
8587
+ this.renderer.setStyle(this.element.nativeElement, 'gap', gapStyle);
8588
+ }
8589
+ handleGridTemplateStyling(type) {
8590
+ if (!isPresent(this[type])) {
8591
+ return;
8592
+ }
8593
+ const gridTemplateStyle = type === 'rows' ? 'grid-template-rows' : 'grid-template-columns';
8594
+ const gridStyle = generateGridStyle(this[type], type);
8595
+ this.renderer.setStyle(this.element.nativeElement, gridTemplateStyle, gridStyle.join(' '));
8596
+ }
8597
+ get direction() {
8598
+ return this.localization.rtl ? 'rtl' : 'ltr';
8599
+ }
8600
+ };
8601
+ __decorate([
8602
+ HostBinding('class.k-grid-layout'),
8603
+ __metadata("design:type", Boolean)
8604
+ ], GridLayoutComponent.prototype, "hostClass", void 0);
8605
+ __decorate([
8606
+ HostBinding('attr.dir'),
8607
+ __metadata("design:type", String),
8608
+ __metadata("design:paramtypes", [])
8609
+ ], GridLayoutComponent.prototype, "dir", null);
8610
+ __decorate([
8611
+ Input(),
8612
+ __metadata("design:type", Array)
8613
+ ], GridLayoutComponent.prototype, "rows", void 0);
8614
+ __decorate([
8615
+ Input(),
8616
+ __metadata("design:type", Array)
8617
+ ], GridLayoutComponent.prototype, "cols", void 0);
8618
+ __decorate([
8619
+ Input(),
8620
+ __metadata("design:type", Object)
8621
+ ], GridLayoutComponent.prototype, "gap", void 0);
8622
+ __decorate([
8623
+ Input(),
8624
+ __metadata("design:type", Object),
8625
+ __metadata("design:paramtypes", [Object])
8626
+ ], GridLayoutComponent.prototype, "align", null);
8627
+ GridLayoutComponent = __decorate([
8628
+ Component({
8629
+ exportAs: 'kendoGridLayout',
8630
+ selector: 'kendo-gridlayout',
8631
+ providers: [
8632
+ LocalizationService,
8633
+ {
8634
+ provide: L10N_PREFIX,
8635
+ useValue: 'kendo.gridlayout'
8636
+ }
8637
+ ],
8638
+ template: `
8639
+ <ng-content></ng-content>
8640
+ `
8641
+ }),
8642
+ __metadata("design:paramtypes", [Renderer2,
8643
+ ElementRef,
8644
+ LocalizationService])
8645
+ ], GridLayoutComponent);
8646
+
8647
+ let GridLayoutItemComponent = class GridLayoutItemComponent {
8648
+ constructor(renderer, element) {
8649
+ this.renderer = renderer;
8650
+ this.element = element;
8651
+ }
8652
+ ngOnInit() {
8653
+ this.setItemStyle();
8654
+ }
8655
+ ngOnChanges() {
8656
+ this.setItemStyle();
8657
+ }
8658
+ setItemStyle() {
8659
+ const row = this.row || 'auto';
8660
+ const col = this.col || 'auto';
8661
+ const rowSpan = this.rowSpan ? `span ${this.rowSpan}` : 'auto';
8662
+ const colSpan = this.colSpan ? `span ${this.colSpan}` : 'auto';
8663
+ const gridAreaStyle = `${row} / ${col} / ${rowSpan} / ${colSpan}`;
8664
+ this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
8665
+ }
8666
+ };
8667
+ __decorate([
8668
+ Input(),
8669
+ __metadata("design:type", Number)
8670
+ ], GridLayoutItemComponent.prototype, "row", void 0);
8671
+ __decorate([
8672
+ Input(),
8673
+ __metadata("design:type", Number)
8674
+ ], GridLayoutItemComponent.prototype, "col", void 0);
8675
+ __decorate([
8676
+ Input(),
8677
+ __metadata("design:type", Number)
8678
+ ], GridLayoutItemComponent.prototype, "rowSpan", void 0);
8679
+ __decorate([
8680
+ Input(),
8681
+ __metadata("design:type", Number)
8682
+ ], GridLayoutItemComponent.prototype, "colSpan", void 0);
8683
+ GridLayoutItemComponent = __decorate([
8684
+ Component({
8685
+ selector: 'kendo-gridlayout-item',
8686
+ template: `
8687
+ <ng-content></ng-content>
8688
+ `
8689
+ }),
8690
+ __metadata("design:paramtypes", [Renderer2,
8691
+ ElementRef])
8692
+ ], GridLayoutItemComponent);
8693
+
8694
+ const exportedModules$a = [
8695
+ GridLayoutComponent,
8696
+ GridLayoutItemComponent
8697
+ ];
8698
+ const declarations$a = [
8699
+ ...exportedModules$a
8700
+ ];
8701
+ /**
8702
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
8703
+ * definition for the GridLayout component.
8704
+ */
8705
+ let GridLayoutModule = class GridLayoutModule {
8706
+ };
8707
+ GridLayoutModule = __decorate([
8708
+ NgModule({
8709
+ declarations: [declarations$a],
8710
+ exports: [exportedModules$a],
8711
+ imports: [CommonModule]
8712
+ })
8713
+ ], GridLayoutModule);
8714
+
8272
8715
  /**
8273
8716
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
8274
8717
  * definition for the Layout components.
@@ -8313,7 +8756,9 @@ LayoutModule = __decorate([
8313
8756
  SplitterModule,
8314
8757
  StepperModule,
8315
8758
  TabStripModule,
8316
- TileLayoutModule
8759
+ TileLayoutModule,
8760
+ StackLayoutModule,
8761
+ GridLayoutModule
8317
8762
  ]
8318
8763
  })
8319
8764
  ], LayoutModule);
@@ -8322,4 +8767,4 @@ LayoutModule = __decorate([
8322
8767
  * Generated bundle index. Do not edit.
8323
8768
  */
8324
8769
 
8325
- 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 };
8770
+ 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 };