@progress/kendo-angular-layout 6.4.2-dev.202201271101 → 6.5.0
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.
- package/dist/cdn/js/kendo-angular-layout.js +2 -2
- package/dist/cdn/main.js +1 -1
- package/dist/es/common/util.js +4 -0
- package/dist/es/gridlayout.module.js +31 -0
- package/dist/es/layout.module.js +5 -1
- package/dist/es/layouts/grid-layout.component.js +155 -0
- package/dist/es/layouts/gridlayout-item.component.js +52 -0
- package/dist/es/layouts/models/gridlayout-gap-settings.js +4 -0
- package/dist/es/layouts/models/gridlayout-row-col-size.js +4 -0
- package/dist/es/layouts/models/layout-align-settings.js +4 -0
- package/dist/es/layouts/models/layout-horizontal-align.js +4 -0
- package/dist/es/layouts/models/layout-vertical-align.js +4 -0
- package/dist/es/layouts/models.js +4 -0
- package/dist/es/layouts/stack-layout.component.js +171 -0
- package/dist/es/layouts/util.js +102 -0
- package/dist/es/main.js +7 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/stacklayout.module.js +29 -0
- package/dist/es2015/common/orientation.d.ts +1 -1
- package/dist/es2015/common/util.d.ts +4 -0
- package/dist/es2015/common/util.js +4 -0
- package/dist/es2015/gridlayout.module.d.ts +10 -0
- package/dist/es2015/gridlayout.module.js +30 -0
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/layout.module.js +5 -1
- package/dist/es2015/layouts/grid-layout.component.d.ts +63 -0
- package/dist/es2015/layouts/grid-layout.component.js +144 -0
- package/dist/es2015/layouts/gridlayout-item.component.d.ts +33 -0
- package/dist/es2015/layouts/gridlayout-item.component.js +53 -0
- package/dist/es2015/layouts/models/gridlayout-gap-settings.d.ts +17 -0
- package/dist/es2015/layouts/models/gridlayout-gap-settings.js +4 -0
- package/dist/es2015/layouts/models/gridlayout-row-col-size.d.ts +22 -0
- package/dist/es2015/layouts/models/gridlayout-row-col-size.js +4 -0
- package/dist/es2015/layouts/models/layout-align-settings.d.ts +18 -0
- package/dist/es2015/layouts/models/layout-align-settings.js +4 -0
- package/dist/es2015/layouts/models/layout-horizontal-align.d.ts +8 -0
- package/dist/es2015/layouts/models/layout-horizontal-align.js +4 -0
- package/dist/es2015/layouts/models/layout-vertical-align.d.ts +8 -0
- package/dist/es2015/layouts/models/layout-vertical-align.js +4 -0
- package/dist/es2015/layouts/models.d.ts +10 -0
- package/dist/es2015/layouts/models.js +4 -0
- package/dist/es2015/layouts/stack-layout.component.d.ts +47 -0
- package/dist/es2015/layouts/stack-layout.component.js +152 -0
- package/dist/es2015/layouts/util.d.ts +42 -0
- package/dist/es2015/layouts/util.js +101 -0
- package/dist/es2015/main.d.ts +7 -0
- package/dist/es2015/main.js +7 -0
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/stacklayout.module.d.ts +10 -0
- package/dist/es2015/stacklayout.module.js +28 -0
- package/dist/fesm2015/index.js +468 -4
- package/dist/fesm5/index.js +500 -4
- package/dist/npm/common/util.js +4 -0
- package/dist/npm/gridlayout.module.js +33 -0
- package/dist/npm/layout.module.js +5 -1
- package/dist/npm/layouts/grid-layout.component.js +157 -0
- package/dist/npm/layouts/gridlayout-item.component.js +54 -0
- package/dist/npm/layouts/models/gridlayout-gap-settings.js +6 -0
- package/dist/npm/layouts/models/gridlayout-row-col-size.js +6 -0
- package/dist/npm/layouts/models/layout-align-settings.js +6 -0
- package/dist/npm/layouts/models/layout-horizontal-align.js +6 -0
- package/dist/npm/layouts/models/layout-vertical-align.js +6 -0
- package/dist/npm/layouts/models.js +6 -0
- package/dist/npm/layouts/stack-layout.component.js +173 -0
- package/dist/npm/layouts/util.js +104 -0
- package/dist/npm/main.js +12 -0
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/stacklayout.module.js +31 -0
- package/dist/systemjs/kendo-angular-layout.js +1 -1
- package/package.json +10 -8
|
@@ -0,0 +1,157 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
var tslib_1 = require("tslib");
|
|
8
|
+
var core_1 = require("@angular/core");
|
|
9
|
+
var kendo_licensing_1 = require("@progress/kendo-licensing");
|
|
10
|
+
var package_metadata_1 = require("../package-metadata");
|
|
11
|
+
var util_1 = require("./util");
|
|
12
|
+
var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
|
|
13
|
+
var util_2 = require("../common/util");
|
|
14
|
+
var kendo_angular_common_1 = require("@progress/kendo-angular-common");
|
|
15
|
+
/**
|
|
16
|
+
* Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
|
|
17
|
+
*/
|
|
18
|
+
var GridLayoutComponent = /** @class */ (function () {
|
|
19
|
+
function GridLayoutComponent(renderer, element, localization) {
|
|
20
|
+
this.renderer = renderer;
|
|
21
|
+
this.element = element;
|
|
22
|
+
this.localization = localization;
|
|
23
|
+
this.hostClass = true;
|
|
24
|
+
/**
|
|
25
|
+
* Specifies the gaps between the elements. The default value is `0`
|
|
26
|
+
* ([see example]({% slug layout_gridlayout %}#toc-gaps)).
|
|
27
|
+
*/
|
|
28
|
+
this.gap = 0;
|
|
29
|
+
this._align = {
|
|
30
|
+
horizontal: 'stretch',
|
|
31
|
+
vertical: 'stretch'
|
|
32
|
+
};
|
|
33
|
+
kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
|
|
34
|
+
}
|
|
35
|
+
Object.defineProperty(GridLayoutComponent.prototype, "dir", {
|
|
36
|
+
get: function () {
|
|
37
|
+
return this.direction;
|
|
38
|
+
},
|
|
39
|
+
enumerable: true,
|
|
40
|
+
configurable: true
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(GridLayoutComponent.prototype, "align", {
|
|
43
|
+
get: function () {
|
|
44
|
+
return this._align;
|
|
45
|
+
},
|
|
46
|
+
/**
|
|
47
|
+
* Specifies the horizontal and vertical alignment of the inner GridLayout elements
|
|
48
|
+
* ([see example]({% slug layout_gridlayout %}#toc-alignment)).
|
|
49
|
+
*/
|
|
50
|
+
set: function (align) {
|
|
51
|
+
this._align = Object.assign({}, this._align, align);
|
|
52
|
+
this.handleAlignClasses();
|
|
53
|
+
},
|
|
54
|
+
enumerable: true,
|
|
55
|
+
configurable: true
|
|
56
|
+
});
|
|
57
|
+
GridLayoutComponent.prototype.ngAfterViewInit = function () {
|
|
58
|
+
this.handleAlignClasses();
|
|
59
|
+
this.handleGridTemplateStyling('rows');
|
|
60
|
+
this.handleGridTemplateStyling('cols');
|
|
61
|
+
this.setGap();
|
|
62
|
+
};
|
|
63
|
+
GridLayoutComponent.prototype.ngOnChanges = function (changes) {
|
|
64
|
+
if (kendo_angular_common_1.isChanged('gap', changes)) {
|
|
65
|
+
this.setGap();
|
|
66
|
+
}
|
|
67
|
+
if (kendo_angular_common_1.isChanged('rows', changes)) {
|
|
68
|
+
this.handleGridTemplateStyling('rows');
|
|
69
|
+
}
|
|
70
|
+
if (kendo_angular_common_1.isChanged('cols', changes)) {
|
|
71
|
+
this.handleGridTemplateStyling('cols');
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
GridLayoutComponent.prototype.handleAlignClasses = function () {
|
|
75
|
+
var elem = this.element.nativeElement;
|
|
76
|
+
if (util_2.isPresent(this.justifyClass)) {
|
|
77
|
+
this.renderer.removeClass(elem, this.justifyClass);
|
|
78
|
+
}
|
|
79
|
+
if (util_2.isPresent(this.alignClass)) {
|
|
80
|
+
this.renderer.removeClass(elem, this.alignClass);
|
|
81
|
+
}
|
|
82
|
+
this.justifyClass = util_1.GRID_JUSTIFY_PREFIX + "-" + this.align.horizontal;
|
|
83
|
+
this.alignClass = util_1.ALIGN_PREFIX + "-" + util_1.VERTICAL_SUFFIX[this.align.vertical];
|
|
84
|
+
this.renderer.addClass(elem, this.justifyClass);
|
|
85
|
+
this.renderer.addClass(elem, this.alignClass);
|
|
86
|
+
};
|
|
87
|
+
GridLayoutComponent.prototype.setGap = function () {
|
|
88
|
+
var parsedGap = util_1.normalizeGap(this.gap);
|
|
89
|
+
var gapStyle = util_1.generateGapStyle(parsedGap);
|
|
90
|
+
this.renderer.setStyle(this.element.nativeElement, 'gap', gapStyle);
|
|
91
|
+
};
|
|
92
|
+
GridLayoutComponent.prototype.handleGridTemplateStyling = function (type) {
|
|
93
|
+
if (!util_2.isPresent(this[type])) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
var isValid = util_1.validateGridLayoutRowsCols(this[type]);
|
|
97
|
+
if (!isValid && core_1.isDevMode()) {
|
|
98
|
+
var valueType = type === 'rows' ? 'GridLayoutRowSize' : 'GridLayoutColSize';
|
|
99
|
+
throw new Error("The provided " + type + " value contains invalid elements. The array supports values of type number, string or " + valueType + ".");
|
|
100
|
+
}
|
|
101
|
+
var gridTemplateStyle = type === 'rows' ? 'grid-template-rows' : 'grid-template-columns';
|
|
102
|
+
var gridStyle = util_1.generateGridStyle(this[type], type);
|
|
103
|
+
this.renderer.setStyle(this.element.nativeElement, gridTemplateStyle, gridStyle.join(' '));
|
|
104
|
+
};
|
|
105
|
+
Object.defineProperty(GridLayoutComponent.prototype, "direction", {
|
|
106
|
+
get: function () {
|
|
107
|
+
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
108
|
+
},
|
|
109
|
+
enumerable: true,
|
|
110
|
+
configurable: true
|
|
111
|
+
});
|
|
112
|
+
tslib_1.__decorate([
|
|
113
|
+
core_1.HostBinding('class.k-grid-layout'),
|
|
114
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
115
|
+
], GridLayoutComponent.prototype, "hostClass", void 0);
|
|
116
|
+
tslib_1.__decorate([
|
|
117
|
+
core_1.HostBinding('attr.dir'),
|
|
118
|
+
tslib_1.__metadata("design:type", String),
|
|
119
|
+
tslib_1.__metadata("design:paramtypes", [])
|
|
120
|
+
], GridLayoutComponent.prototype, "dir", null);
|
|
121
|
+
tslib_1.__decorate([
|
|
122
|
+
core_1.Input(),
|
|
123
|
+
tslib_1.__metadata("design:type", Array)
|
|
124
|
+
], GridLayoutComponent.prototype, "rows", void 0);
|
|
125
|
+
tslib_1.__decorate([
|
|
126
|
+
core_1.Input(),
|
|
127
|
+
tslib_1.__metadata("design:type", Array)
|
|
128
|
+
], GridLayoutComponent.prototype, "cols", void 0);
|
|
129
|
+
tslib_1.__decorate([
|
|
130
|
+
core_1.Input(),
|
|
131
|
+
tslib_1.__metadata("design:type", Object)
|
|
132
|
+
], GridLayoutComponent.prototype, "gap", void 0);
|
|
133
|
+
tslib_1.__decorate([
|
|
134
|
+
core_1.Input(),
|
|
135
|
+
tslib_1.__metadata("design:type", Object),
|
|
136
|
+
tslib_1.__metadata("design:paramtypes", [Object])
|
|
137
|
+
], GridLayoutComponent.prototype, "align", null);
|
|
138
|
+
GridLayoutComponent = tslib_1.__decorate([
|
|
139
|
+
core_1.Component({
|
|
140
|
+
exportAs: 'kendoGridLayout',
|
|
141
|
+
selector: 'kendo-gridlayout',
|
|
142
|
+
providers: [
|
|
143
|
+
kendo_angular_l10n_1.LocalizationService,
|
|
144
|
+
{
|
|
145
|
+
provide: kendo_angular_l10n_1.L10N_PREFIX,
|
|
146
|
+
useValue: 'kendo.gridlayout'
|
|
147
|
+
}
|
|
148
|
+
],
|
|
149
|
+
template: "\n <ng-content></ng-content>\n "
|
|
150
|
+
}),
|
|
151
|
+
tslib_1.__metadata("design:paramtypes", [core_1.Renderer2,
|
|
152
|
+
core_1.ElementRef,
|
|
153
|
+
kendo_angular_l10n_1.LocalizationService])
|
|
154
|
+
], GridLayoutComponent);
|
|
155
|
+
return GridLayoutComponent;
|
|
156
|
+
}());
|
|
157
|
+
exports.GridLayoutComponent = GridLayoutComponent;
|
|
@@ -0,0 +1,54 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
var tslib_1 = require("tslib");
|
|
8
|
+
var core_1 = require("@angular/core");
|
|
9
|
+
var GridLayoutItemComponent = /** @class */ (function () {
|
|
10
|
+
function GridLayoutItemComponent(renderer, element) {
|
|
11
|
+
this.renderer = renderer;
|
|
12
|
+
this.element = element;
|
|
13
|
+
}
|
|
14
|
+
GridLayoutItemComponent.prototype.ngOnInit = function () {
|
|
15
|
+
this.setItemStyle();
|
|
16
|
+
};
|
|
17
|
+
GridLayoutItemComponent.prototype.ngOnChanges = function () {
|
|
18
|
+
this.setItemStyle();
|
|
19
|
+
};
|
|
20
|
+
GridLayoutItemComponent.prototype.setItemStyle = function () {
|
|
21
|
+
var row = this.row || 'auto';
|
|
22
|
+
var col = this.col || 'auto';
|
|
23
|
+
var rowSpan = this.rowSpan ? "span " + this.rowSpan : 'auto';
|
|
24
|
+
var colSpan = this.colSpan ? "span " + this.colSpan : 'auto';
|
|
25
|
+
var gridAreaStyle = row + " / " + col + " / " + rowSpan + " / " + colSpan;
|
|
26
|
+
this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
|
|
27
|
+
};
|
|
28
|
+
tslib_1.__decorate([
|
|
29
|
+
core_1.Input(),
|
|
30
|
+
tslib_1.__metadata("design:type", Number)
|
|
31
|
+
], GridLayoutItemComponent.prototype, "row", void 0);
|
|
32
|
+
tslib_1.__decorate([
|
|
33
|
+
core_1.Input(),
|
|
34
|
+
tslib_1.__metadata("design:type", Number)
|
|
35
|
+
], GridLayoutItemComponent.prototype, "col", void 0);
|
|
36
|
+
tslib_1.__decorate([
|
|
37
|
+
core_1.Input(),
|
|
38
|
+
tslib_1.__metadata("design:type", Number)
|
|
39
|
+
], GridLayoutItemComponent.prototype, "rowSpan", void 0);
|
|
40
|
+
tslib_1.__decorate([
|
|
41
|
+
core_1.Input(),
|
|
42
|
+
tslib_1.__metadata("design:type", Number)
|
|
43
|
+
], GridLayoutItemComponent.prototype, "colSpan", void 0);
|
|
44
|
+
GridLayoutItemComponent = tslib_1.__decorate([
|
|
45
|
+
core_1.Component({
|
|
46
|
+
selector: 'kendo-gridlayout-item',
|
|
47
|
+
template: "\n <ng-content></ng-content>\n "
|
|
48
|
+
}),
|
|
49
|
+
tslib_1.__metadata("design:paramtypes", [core_1.Renderer2,
|
|
50
|
+
core_1.ElementRef])
|
|
51
|
+
], GridLayoutItemComponent);
|
|
52
|
+
return GridLayoutItemComponent;
|
|
53
|
+
}());
|
|
54
|
+
exports.GridLayoutItemComponent = GridLayoutItemComponent;
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -0,0 +1,6 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -0,0 +1,173 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
var tslib_1 = require("tslib");
|
|
8
|
+
var core_1 = require("@angular/core");
|
|
9
|
+
var util_1 = require("./util");
|
|
10
|
+
var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
|
|
11
|
+
var util_2 = require("../common/util");
|
|
12
|
+
var kendo_licensing_1 = require("@progress/kendo-licensing");
|
|
13
|
+
var package_metadata_1 = require("../package-metadata");
|
|
14
|
+
var kendo_angular_common_1 = require("@progress/kendo-angular-common");
|
|
15
|
+
/**
|
|
16
|
+
* Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
|
|
17
|
+
*/
|
|
18
|
+
var StackLayoutComponent = /** @class */ (function () {
|
|
19
|
+
function StackLayoutComponent(renderer, element, localization) {
|
|
20
|
+
this.renderer = renderer;
|
|
21
|
+
this.element = element;
|
|
22
|
+
this.localization = localization;
|
|
23
|
+
this.hostClass = true;
|
|
24
|
+
/**
|
|
25
|
+
* Specifies the gap between the inner StackLayout elements. The default value is `0`
|
|
26
|
+
* ([see example]({% slug layout_stacklayout %}#toc-gaps)).
|
|
27
|
+
*/
|
|
28
|
+
this.gap = 0;
|
|
29
|
+
/**
|
|
30
|
+
* Specifies the orientation of the StackLayout
|
|
31
|
+
* ([see example]({% slug layout_stacklayout %}#toc-orientation)).
|
|
32
|
+
*
|
|
33
|
+
* The possible values are:
|
|
34
|
+
* (Default) `horizontal`
|
|
35
|
+
* `vertical`
|
|
36
|
+
*/
|
|
37
|
+
this.orientation = 'horizontal';
|
|
38
|
+
this._align = {
|
|
39
|
+
horizontal: 'stretch',
|
|
40
|
+
vertical: 'stretch'
|
|
41
|
+
};
|
|
42
|
+
kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
|
|
43
|
+
}
|
|
44
|
+
Object.defineProperty(StackLayoutComponent.prototype, "horizontalClass", {
|
|
45
|
+
get: function () {
|
|
46
|
+
return this.orientation === 'horizontal';
|
|
47
|
+
},
|
|
48
|
+
enumerable: true,
|
|
49
|
+
configurable: true
|
|
50
|
+
});
|
|
51
|
+
Object.defineProperty(StackLayoutComponent.prototype, "verticalClass", {
|
|
52
|
+
get: function () {
|
|
53
|
+
return this.orientation === 'vertical';
|
|
54
|
+
},
|
|
55
|
+
enumerable: true,
|
|
56
|
+
configurable: true
|
|
57
|
+
});
|
|
58
|
+
Object.defineProperty(StackLayoutComponent.prototype, "dir", {
|
|
59
|
+
get: function () {
|
|
60
|
+
return this.direction;
|
|
61
|
+
},
|
|
62
|
+
enumerable: true,
|
|
63
|
+
configurable: true
|
|
64
|
+
});
|
|
65
|
+
Object.defineProperty(StackLayoutComponent.prototype, "align", {
|
|
66
|
+
get: function () {
|
|
67
|
+
return this._align;
|
|
68
|
+
},
|
|
69
|
+
/**
|
|
70
|
+
* Specifies the horizontal and vertical alignment of the inner StackLayout elements
|
|
71
|
+
* ([see example]({% slug layout_stacklayout %}#toc-alignment)).
|
|
72
|
+
*/
|
|
73
|
+
set: function (align) {
|
|
74
|
+
this._align = Object.assign({}, this._align, align);
|
|
75
|
+
this.handleAlignClasses();
|
|
76
|
+
},
|
|
77
|
+
enumerable: true,
|
|
78
|
+
configurable: true
|
|
79
|
+
});
|
|
80
|
+
StackLayoutComponent.prototype.ngAfterViewInit = function () {
|
|
81
|
+
this.handleAlignClasses();
|
|
82
|
+
this.setGap();
|
|
83
|
+
};
|
|
84
|
+
StackLayoutComponent.prototype.ngOnChanges = function (changes) {
|
|
85
|
+
if (kendo_angular_common_1.isChanged('gap', changes)) {
|
|
86
|
+
this.setGap();
|
|
87
|
+
}
|
|
88
|
+
if (kendo_angular_common_1.isChanged('orientation', changes)) {
|
|
89
|
+
this.handleAlignClasses();
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
StackLayoutComponent.prototype.handleAlignClasses = function () {
|
|
93
|
+
var elem = this.element.nativeElement;
|
|
94
|
+
if (util_2.isPresent(this.justifyClass)) {
|
|
95
|
+
this.renderer.removeClass(elem, this.justifyClass);
|
|
96
|
+
}
|
|
97
|
+
if (util_2.isPresent(this.alignClass)) {
|
|
98
|
+
this.renderer.removeClass(elem, this.alignClass);
|
|
99
|
+
}
|
|
100
|
+
if (this.orientation === 'horizontal') {
|
|
101
|
+
this.justifyClass = util_1.JUSTIFY_PREFIX + "-" + this.align.horizontal;
|
|
102
|
+
this.alignClass = util_1.ALIGN_PREFIX + "-" + util_1.VERTICAL_SUFFIX[this.align.vertical];
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
this.justifyClass = util_1.JUSTIFY_PREFIX + "-" + util_1.VERTICAL_SUFFIX[this.align.vertical];
|
|
106
|
+
this.alignClass = util_1.ALIGN_PREFIX + "-" + this.align.horizontal;
|
|
107
|
+
}
|
|
108
|
+
this.renderer.addClass(elem, this.justifyClass);
|
|
109
|
+
this.renderer.addClass(elem, this.alignClass);
|
|
110
|
+
};
|
|
111
|
+
StackLayoutComponent.prototype.setGap = function () {
|
|
112
|
+
var parsedGap = util_2.isNumber(this.gap) ? this.gap + "px" : this.gap;
|
|
113
|
+
this.renderer.setStyle(this.element.nativeElement, 'gap', parsedGap);
|
|
114
|
+
};
|
|
115
|
+
Object.defineProperty(StackLayoutComponent.prototype, "direction", {
|
|
116
|
+
get: function () {
|
|
117
|
+
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
118
|
+
},
|
|
119
|
+
enumerable: true,
|
|
120
|
+
configurable: true
|
|
121
|
+
});
|
|
122
|
+
tslib_1.__decorate([
|
|
123
|
+
core_1.HostBinding('class.k-stack-layout'),
|
|
124
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
125
|
+
], StackLayoutComponent.prototype, "hostClass", void 0);
|
|
126
|
+
tslib_1.__decorate([
|
|
127
|
+
core_1.HostBinding('class.k-hstack'),
|
|
128
|
+
tslib_1.__metadata("design:type", Boolean),
|
|
129
|
+
tslib_1.__metadata("design:paramtypes", [])
|
|
130
|
+
], StackLayoutComponent.prototype, "horizontalClass", null);
|
|
131
|
+
tslib_1.__decorate([
|
|
132
|
+
core_1.HostBinding('class.k-vstack'),
|
|
133
|
+
tslib_1.__metadata("design:type", Boolean),
|
|
134
|
+
tslib_1.__metadata("design:paramtypes", [])
|
|
135
|
+
], StackLayoutComponent.prototype, "verticalClass", null);
|
|
136
|
+
tslib_1.__decorate([
|
|
137
|
+
core_1.HostBinding('attr.dir'),
|
|
138
|
+
tslib_1.__metadata("design:type", String),
|
|
139
|
+
tslib_1.__metadata("design:paramtypes", [])
|
|
140
|
+
], StackLayoutComponent.prototype, "dir", null);
|
|
141
|
+
tslib_1.__decorate([
|
|
142
|
+
core_1.Input(),
|
|
143
|
+
tslib_1.__metadata("design:type", Object),
|
|
144
|
+
tslib_1.__metadata("design:paramtypes", [Object])
|
|
145
|
+
], StackLayoutComponent.prototype, "align", null);
|
|
146
|
+
tslib_1.__decorate([
|
|
147
|
+
core_1.Input(),
|
|
148
|
+
tslib_1.__metadata("design:type", Object)
|
|
149
|
+
], StackLayoutComponent.prototype, "gap", void 0);
|
|
150
|
+
tslib_1.__decorate([
|
|
151
|
+
core_1.Input(),
|
|
152
|
+
tslib_1.__metadata("design:type", String)
|
|
153
|
+
], StackLayoutComponent.prototype, "orientation", void 0);
|
|
154
|
+
StackLayoutComponent = tslib_1.__decorate([
|
|
155
|
+
core_1.Component({
|
|
156
|
+
exportAs: 'kendoStackLayout',
|
|
157
|
+
selector: 'kendo-stacklayout',
|
|
158
|
+
providers: [
|
|
159
|
+
kendo_angular_l10n_1.LocalizationService,
|
|
160
|
+
{
|
|
161
|
+
provide: kendo_angular_l10n_1.L10N_PREFIX,
|
|
162
|
+
useValue: 'kendo.stacklayout'
|
|
163
|
+
}
|
|
164
|
+
],
|
|
165
|
+
template: "\n <ng-content></ng-content>\n "
|
|
166
|
+
}),
|
|
167
|
+
tslib_1.__metadata("design:paramtypes", [core_1.Renderer2,
|
|
168
|
+
core_1.ElementRef,
|
|
169
|
+
kendo_angular_l10n_1.LocalizationService])
|
|
170
|
+
], StackLayoutComponent);
|
|
171
|
+
return StackLayoutComponent;
|
|
172
|
+
}());
|
|
173
|
+
exports.StackLayoutComponent = StackLayoutComponent;
|
|
@@ -0,0 +1,104 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
/**
|
|
8
|
+
* @hidden
|
|
9
|
+
*/
|
|
10
|
+
exports.VERTICAL_SUFFIX = {
|
|
11
|
+
top: 'start',
|
|
12
|
+
middle: 'center',
|
|
13
|
+
bottom: 'end',
|
|
14
|
+
stretch: 'stretch'
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* @hidden
|
|
18
|
+
*/
|
|
19
|
+
exports.JUSTIFY_PREFIX = "k-justify-content";
|
|
20
|
+
/**
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
23
|
+
exports.GRID_JUSTIFY_PREFIX = "k-justify-items";
|
|
24
|
+
/**
|
|
25
|
+
* @hidden
|
|
26
|
+
*/
|
|
27
|
+
exports.ALIGN_PREFIX = "k-align-items";
|
|
28
|
+
/**
|
|
29
|
+
* @hidden
|
|
30
|
+
*/
|
|
31
|
+
exports.normalizeGap = function (gap) {
|
|
32
|
+
if (typeof gap === 'number' || typeof gap === 'string') {
|
|
33
|
+
return { cols: gap, rows: gap };
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
var parsedGap = {};
|
|
37
|
+
parsedGap.rows = gap.rows ? gap.rows : 0;
|
|
38
|
+
parsedGap.cols = gap.cols ? gap.cols : 0;
|
|
39
|
+
return parsedGap;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
/**
|
|
43
|
+
* @hidden
|
|
44
|
+
*/
|
|
45
|
+
exports.generateGapStyle = function (gap) {
|
|
46
|
+
if (gap.rows === gap.cols) {
|
|
47
|
+
return typeof gap.rows === 'number' ? gap.rows + "px" : gap.rows;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
var rowStyle = "" + (typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows);
|
|
51
|
+
var colStyle = "" + (typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols);
|
|
52
|
+
return rowStyle + " " + colStyle;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* @hidden
|
|
57
|
+
*/
|
|
58
|
+
exports.generateGridStyle = function (items, itemType) {
|
|
59
|
+
var styling = [];
|
|
60
|
+
items.forEach(function (item) {
|
|
61
|
+
if (typeof item === 'number') {
|
|
62
|
+
styling.push(item + "px");
|
|
63
|
+
}
|
|
64
|
+
else if (typeof item === 'string') {
|
|
65
|
+
styling.push(item);
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
if (itemType === 'rows') {
|
|
69
|
+
var rowHeight = item.height;
|
|
70
|
+
if (rowHeight) {
|
|
71
|
+
styling.push(typeof rowHeight === 'number' ? rowHeight + "px" : rowHeight);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
styling.push('0px');
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
var colWidth = item.width;
|
|
79
|
+
if (colWidth) {
|
|
80
|
+
styling.push(typeof colWidth === 'number' ? colWidth + "px" : colWidth);
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
styling.push('0px');
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
return styling;
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* @hidden
|
|
92
|
+
*/
|
|
93
|
+
exports.validateGridLayoutRowsCols = function (arr) {
|
|
94
|
+
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
|
|
95
|
+
var el = arr_1[_i];
|
|
96
|
+
var isNum = typeof el === 'number';
|
|
97
|
+
var isStr = typeof el === 'string';
|
|
98
|
+
var isObject = typeof el === 'object' && el !== null;
|
|
99
|
+
if (!isNum && !isStr && !isObject) {
|
|
100
|
+
return false;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
return true;
|
|
104
|
+
};
|
package/dist/npm/main.js
CHANGED
|
@@ -118,3 +118,15 @@ var expansionpanel_module_1 = require("./expansionpanel.module");
|
|
|
118
118
|
exports.ExpansionPanelModule = expansionpanel_module_1.ExpansionPanelModule;
|
|
119
119
|
var tilelayout_module_1 = require("./tilelayout.module");
|
|
120
120
|
exports.TileLayoutModule = tilelayout_module_1.TileLayoutModule;
|
|
121
|
+
var stacklayout_module_1 = require("./stacklayout.module");
|
|
122
|
+
exports.StackLayoutModule = stacklayout_module_1.StackLayoutModule;
|
|
123
|
+
var gridlayout_module_1 = require("./gridlayout.module");
|
|
124
|
+
exports.GridLayoutModule = gridlayout_module_1.GridLayoutModule;
|
|
125
|
+
// StackLayout exports
|
|
126
|
+
var stack_layout_component_1 = require("./layouts/stack-layout.component");
|
|
127
|
+
exports.StackLayoutComponent = stack_layout_component_1.StackLayoutComponent;
|
|
128
|
+
// GridLayout exports
|
|
129
|
+
var grid_layout_component_1 = require("./layouts/grid-layout.component");
|
|
130
|
+
exports.GridLayoutComponent = grid_layout_component_1.GridLayoutComponent;
|
|
131
|
+
var gridlayout_item_component_1 = require("./layouts/gridlayout-item.component");
|
|
132
|
+
exports.GridLayoutItemComponent = gridlayout_item_component_1.GridLayoutItemComponent;
|
|
@@ -11,7 +11,7 @@ exports.packageMetadata = {
|
|
|
11
11
|
name: '@progress/kendo-angular-layout',
|
|
12
12
|
productName: 'Kendo UI for Angular',
|
|
13
13
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
14
|
-
publishDate:
|
|
14
|
+
publishDate: 1644936591,
|
|
15
15
|
version: '',
|
|
16
16
|
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'
|
|
17
17
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
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
|
+
"use strict";
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
var tslib_1 = require("tslib");
|
|
8
|
+
var core_1 = require("@angular/core");
|
|
9
|
+
var common_1 = require("@angular/common");
|
|
10
|
+
var stack_layout_component_1 = require("./layouts/stack-layout.component");
|
|
11
|
+
var exportedModules = [
|
|
12
|
+
stack_layout_component_1.StackLayoutComponent
|
|
13
|
+
];
|
|
14
|
+
var declarations = exportedModules.slice();
|
|
15
|
+
/**
|
|
16
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
17
|
+
* definition for the StackLayout component.
|
|
18
|
+
*/
|
|
19
|
+
var StackLayoutModule = /** @class */ (function () {
|
|
20
|
+
function StackLayoutModule() {
|
|
21
|
+
}
|
|
22
|
+
StackLayoutModule = tslib_1.__decorate([
|
|
23
|
+
core_1.NgModule({
|
|
24
|
+
declarations: [declarations],
|
|
25
|
+
exports: [exportedModules],
|
|
26
|
+
imports: [common_1.CommonModule]
|
|
27
|
+
})
|
|
28
|
+
], StackLayoutModule);
|
|
29
|
+
return StackLayoutModule;
|
|
30
|
+
}());
|
|
31
|
+
exports.StackLayoutModule = StackLayoutModule;
|