@progress/kendo-angular-layout 6.4.2-dev.202201251524 → 6.5.0-dev.202202140804
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/expansionpanel/expansionpanel.component.js +1 -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/expansionpanel/expansionpanel.component.js +1 -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 +469 -4
- package/dist/fesm5/index.js +501 -4
- package/dist/npm/common/util.js +4 -0
- package/dist/npm/expansionpanel/expansionpanel.component.js +1 -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
package/dist/fesm5/index.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { __decorate, __metadata, __param, __extends, __assign } from 'tslib';
|
|
6
6
|
import { Injectable, Directive, TemplateRef, Optional, isDevMode, Input, ViewChild, ElementRef, HostBinding, ViewChildren, QueryList, ContentChildren, Component, SkipSelf, Host, Renderer2, Output, EventEmitter, 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 @@ var packageMetadata = {
|
|
|
21
21
|
name: '@progress/kendo-angular-layout',
|
|
22
22
|
productName: 'Kendo UI for Angular',
|
|
23
23
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
24
|
-
publishDate:
|
|
24
|
+
publishDate: 1644825801,
|
|
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
|
};
|
|
@@ -226,6 +226,10 @@ var getStylingClasses = function (componentType, stylingOption, previousValue, n
|
|
|
226
226
|
* @hidden
|
|
227
227
|
*/
|
|
228
228
|
var mapShapeToRounded = function (shape) { return SHAPE_TO_ROUNDED[shape] || null; };
|
|
229
|
+
/**
|
|
230
|
+
* @hidden
|
|
231
|
+
*/
|
|
232
|
+
var isNumber = function (value) { return typeof value === 'number' && isFinite(value); };
|
|
229
233
|
|
|
230
234
|
var focusableRegex = /^(?:a|input|select|option|textarea|button|object)$/i;
|
|
231
235
|
var toClassList = function (classNames) { return String(classNames).trim().split(' '); };
|
|
@@ -6042,6 +6046,7 @@ var ExpansionPanelComponent = /** @class */ (function () {
|
|
|
6042
6046
|
};
|
|
6043
6047
|
ExpansionPanelComponent.prototype.ngOnInit = function () {
|
|
6044
6048
|
var _this = this;
|
|
6049
|
+
this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
|
|
6045
6050
|
this.subscriptions = this.localizationService.changes.subscribe(function (_a) {
|
|
6046
6051
|
var rtl = _a.rtl;
|
|
6047
6052
|
_this.direction = rtl ? 'rtl' : 'ltr';
|
|
@@ -8623,6 +8628,496 @@ var TileLayoutModule = /** @class */ (function () {
|
|
|
8623
8628
|
return TileLayoutModule;
|
|
8624
8629
|
}());
|
|
8625
8630
|
|
|
8631
|
+
/**
|
|
8632
|
+
* @hidden
|
|
8633
|
+
*/
|
|
8634
|
+
var VERTICAL_SUFFIX = {
|
|
8635
|
+
top: 'start',
|
|
8636
|
+
middle: 'center',
|
|
8637
|
+
bottom: 'end',
|
|
8638
|
+
stretch: 'stretch'
|
|
8639
|
+
};
|
|
8640
|
+
/**
|
|
8641
|
+
* @hidden
|
|
8642
|
+
*/
|
|
8643
|
+
var JUSTIFY_PREFIX = "k-justify-content";
|
|
8644
|
+
/**
|
|
8645
|
+
* @hidden
|
|
8646
|
+
*/
|
|
8647
|
+
var GRID_JUSTIFY_PREFIX = "k-justify-items";
|
|
8648
|
+
/**
|
|
8649
|
+
* @hidden
|
|
8650
|
+
*/
|
|
8651
|
+
var ALIGN_PREFIX = "k-align-items";
|
|
8652
|
+
/**
|
|
8653
|
+
* @hidden
|
|
8654
|
+
*/
|
|
8655
|
+
var normalizeGap = function (gap) {
|
|
8656
|
+
if (typeof gap === 'number' || typeof gap === 'string') {
|
|
8657
|
+
return { cols: gap, rows: gap };
|
|
8658
|
+
}
|
|
8659
|
+
else {
|
|
8660
|
+
var parsedGap = {};
|
|
8661
|
+
parsedGap.rows = gap.rows ? gap.rows : 0;
|
|
8662
|
+
parsedGap.cols = gap.cols ? gap.cols : 0;
|
|
8663
|
+
return parsedGap;
|
|
8664
|
+
}
|
|
8665
|
+
};
|
|
8666
|
+
/**
|
|
8667
|
+
* @hidden
|
|
8668
|
+
*/
|
|
8669
|
+
var generateGapStyle = function (gap) {
|
|
8670
|
+
if (gap.rows === gap.cols) {
|
|
8671
|
+
return typeof gap.rows === 'number' ? gap.rows + "px" : gap.rows;
|
|
8672
|
+
}
|
|
8673
|
+
else {
|
|
8674
|
+
var rowStyle = "" + (typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows);
|
|
8675
|
+
var colStyle = "" + (typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols);
|
|
8676
|
+
return rowStyle + " " + colStyle;
|
|
8677
|
+
}
|
|
8678
|
+
};
|
|
8679
|
+
/**
|
|
8680
|
+
* @hidden
|
|
8681
|
+
*/
|
|
8682
|
+
var generateGridStyle = function (items, itemType) {
|
|
8683
|
+
var styling = [];
|
|
8684
|
+
items.forEach(function (item) {
|
|
8685
|
+
if (typeof item === 'number') {
|
|
8686
|
+
styling.push(item + "px");
|
|
8687
|
+
}
|
|
8688
|
+
else if (typeof item === 'string') {
|
|
8689
|
+
styling.push(item);
|
|
8690
|
+
}
|
|
8691
|
+
else {
|
|
8692
|
+
if (itemType === 'rows') {
|
|
8693
|
+
var rowHeight = item.height;
|
|
8694
|
+
if (rowHeight) {
|
|
8695
|
+
styling.push(typeof rowHeight === 'number' ? rowHeight + "px" : rowHeight);
|
|
8696
|
+
}
|
|
8697
|
+
else {
|
|
8698
|
+
styling.push('0px');
|
|
8699
|
+
}
|
|
8700
|
+
}
|
|
8701
|
+
else {
|
|
8702
|
+
var colWidth = item.width;
|
|
8703
|
+
if (colWidth) {
|
|
8704
|
+
styling.push(typeof colWidth === 'number' ? colWidth + "px" : colWidth);
|
|
8705
|
+
}
|
|
8706
|
+
else {
|
|
8707
|
+
styling.push('0px');
|
|
8708
|
+
}
|
|
8709
|
+
}
|
|
8710
|
+
}
|
|
8711
|
+
});
|
|
8712
|
+
return styling;
|
|
8713
|
+
};
|
|
8714
|
+
/**
|
|
8715
|
+
* @hidden
|
|
8716
|
+
*/
|
|
8717
|
+
var validateGridLayoutRowsCols = function (arr) {
|
|
8718
|
+
for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
|
|
8719
|
+
var el = arr_1[_i];
|
|
8720
|
+
var isNum = typeof el === 'number';
|
|
8721
|
+
var isStr = typeof el === 'string';
|
|
8722
|
+
var isObject = typeof el === 'object' && el !== null;
|
|
8723
|
+
if (!isNum && !isStr && !isObject) {
|
|
8724
|
+
return false;
|
|
8725
|
+
}
|
|
8726
|
+
}
|
|
8727
|
+
return true;
|
|
8728
|
+
};
|
|
8729
|
+
|
|
8730
|
+
/**
|
|
8731
|
+
* Represents the [Kendo UI StackLayout component for Angular]({% slug overview_stacklayout %}).
|
|
8732
|
+
*/
|
|
8733
|
+
var StackLayoutComponent = /** @class */ (function () {
|
|
8734
|
+
function StackLayoutComponent(renderer, element, localization) {
|
|
8735
|
+
this.renderer = renderer;
|
|
8736
|
+
this.element = element;
|
|
8737
|
+
this.localization = localization;
|
|
8738
|
+
this.hostClass = true;
|
|
8739
|
+
/**
|
|
8740
|
+
* Specifies the gap between the inner StackLayout elements. The default value is `0`
|
|
8741
|
+
* ([see example]({% slug layout_stacklayout %}#toc-gaps)).
|
|
8742
|
+
*/
|
|
8743
|
+
this.gap = 0;
|
|
8744
|
+
/**
|
|
8745
|
+
* Specifies the orientation of the StackLayout
|
|
8746
|
+
* ([see example]({% slug layout_stacklayout %}#toc-orientation)).
|
|
8747
|
+
*
|
|
8748
|
+
* The possible values are:
|
|
8749
|
+
* (Default) `horizontal`
|
|
8750
|
+
* `vertical`
|
|
8751
|
+
*/
|
|
8752
|
+
this.orientation = 'horizontal';
|
|
8753
|
+
this._align = {
|
|
8754
|
+
horizontal: 'stretch',
|
|
8755
|
+
vertical: 'stretch'
|
|
8756
|
+
};
|
|
8757
|
+
validatePackage(packageMetadata);
|
|
8758
|
+
}
|
|
8759
|
+
Object.defineProperty(StackLayoutComponent.prototype, "horizontalClass", {
|
|
8760
|
+
get: function () {
|
|
8761
|
+
return this.orientation === 'horizontal';
|
|
8762
|
+
},
|
|
8763
|
+
enumerable: true,
|
|
8764
|
+
configurable: true
|
|
8765
|
+
});
|
|
8766
|
+
Object.defineProperty(StackLayoutComponent.prototype, "verticalClass", {
|
|
8767
|
+
get: function () {
|
|
8768
|
+
return this.orientation === 'vertical';
|
|
8769
|
+
},
|
|
8770
|
+
enumerable: true,
|
|
8771
|
+
configurable: true
|
|
8772
|
+
});
|
|
8773
|
+
Object.defineProperty(StackLayoutComponent.prototype, "dir", {
|
|
8774
|
+
get: function () {
|
|
8775
|
+
return this.direction;
|
|
8776
|
+
},
|
|
8777
|
+
enumerable: true,
|
|
8778
|
+
configurable: true
|
|
8779
|
+
});
|
|
8780
|
+
Object.defineProperty(StackLayoutComponent.prototype, "align", {
|
|
8781
|
+
get: function () {
|
|
8782
|
+
return this._align;
|
|
8783
|
+
},
|
|
8784
|
+
/**
|
|
8785
|
+
* Specifies the horizontal and vertical alignment of the inner StackLayout elements
|
|
8786
|
+
* ([see example]({% slug layout_stacklayout %}#toc-alignment)).
|
|
8787
|
+
*/
|
|
8788
|
+
set: function (align) {
|
|
8789
|
+
this._align = Object.assign({}, this._align, align);
|
|
8790
|
+
this.handleAlignClasses();
|
|
8791
|
+
},
|
|
8792
|
+
enumerable: true,
|
|
8793
|
+
configurable: true
|
|
8794
|
+
});
|
|
8795
|
+
StackLayoutComponent.prototype.ngAfterViewInit = function () {
|
|
8796
|
+
this.handleAlignClasses();
|
|
8797
|
+
this.setGap();
|
|
8798
|
+
};
|
|
8799
|
+
StackLayoutComponent.prototype.ngOnChanges = function (changes) {
|
|
8800
|
+
if (isChanged('gap', changes)) {
|
|
8801
|
+
this.setGap();
|
|
8802
|
+
}
|
|
8803
|
+
if (isChanged('orientation', changes)) {
|
|
8804
|
+
this.handleAlignClasses();
|
|
8805
|
+
}
|
|
8806
|
+
};
|
|
8807
|
+
StackLayoutComponent.prototype.handleAlignClasses = function () {
|
|
8808
|
+
var elem = this.element.nativeElement;
|
|
8809
|
+
if (isPresent(this.justifyClass)) {
|
|
8810
|
+
this.renderer.removeClass(elem, this.justifyClass);
|
|
8811
|
+
}
|
|
8812
|
+
if (isPresent(this.alignClass)) {
|
|
8813
|
+
this.renderer.removeClass(elem, this.alignClass);
|
|
8814
|
+
}
|
|
8815
|
+
if (this.orientation === 'horizontal') {
|
|
8816
|
+
this.justifyClass = JUSTIFY_PREFIX + "-" + this.align.horizontal;
|
|
8817
|
+
this.alignClass = ALIGN_PREFIX + "-" + VERTICAL_SUFFIX[this.align.vertical];
|
|
8818
|
+
}
|
|
8819
|
+
else {
|
|
8820
|
+
this.justifyClass = JUSTIFY_PREFIX + "-" + VERTICAL_SUFFIX[this.align.vertical];
|
|
8821
|
+
this.alignClass = ALIGN_PREFIX + "-" + this.align.horizontal;
|
|
8822
|
+
}
|
|
8823
|
+
this.renderer.addClass(elem, this.justifyClass);
|
|
8824
|
+
this.renderer.addClass(elem, this.alignClass);
|
|
8825
|
+
};
|
|
8826
|
+
StackLayoutComponent.prototype.setGap = function () {
|
|
8827
|
+
var parsedGap = isNumber(this.gap) ? this.gap + "px" : this.gap;
|
|
8828
|
+
this.renderer.setStyle(this.element.nativeElement, 'gap', parsedGap);
|
|
8829
|
+
};
|
|
8830
|
+
Object.defineProperty(StackLayoutComponent.prototype, "direction", {
|
|
8831
|
+
get: function () {
|
|
8832
|
+
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
8833
|
+
},
|
|
8834
|
+
enumerable: true,
|
|
8835
|
+
configurable: true
|
|
8836
|
+
});
|
|
8837
|
+
__decorate([
|
|
8838
|
+
HostBinding('class.k-stack-layout'),
|
|
8839
|
+
__metadata("design:type", Boolean)
|
|
8840
|
+
], StackLayoutComponent.prototype, "hostClass", void 0);
|
|
8841
|
+
__decorate([
|
|
8842
|
+
HostBinding('class.k-hstack'),
|
|
8843
|
+
__metadata("design:type", Boolean),
|
|
8844
|
+
__metadata("design:paramtypes", [])
|
|
8845
|
+
], StackLayoutComponent.prototype, "horizontalClass", null);
|
|
8846
|
+
__decorate([
|
|
8847
|
+
HostBinding('class.k-vstack'),
|
|
8848
|
+
__metadata("design:type", Boolean),
|
|
8849
|
+
__metadata("design:paramtypes", [])
|
|
8850
|
+
], StackLayoutComponent.prototype, "verticalClass", null);
|
|
8851
|
+
__decorate([
|
|
8852
|
+
HostBinding('attr.dir'),
|
|
8853
|
+
__metadata("design:type", String),
|
|
8854
|
+
__metadata("design:paramtypes", [])
|
|
8855
|
+
], StackLayoutComponent.prototype, "dir", null);
|
|
8856
|
+
__decorate([
|
|
8857
|
+
Input(),
|
|
8858
|
+
__metadata("design:type", Object),
|
|
8859
|
+
__metadata("design:paramtypes", [Object])
|
|
8860
|
+
], StackLayoutComponent.prototype, "align", null);
|
|
8861
|
+
__decorate([
|
|
8862
|
+
Input(),
|
|
8863
|
+
__metadata("design:type", Object)
|
|
8864
|
+
], StackLayoutComponent.prototype, "gap", void 0);
|
|
8865
|
+
__decorate([
|
|
8866
|
+
Input(),
|
|
8867
|
+
__metadata("design:type", String)
|
|
8868
|
+
], StackLayoutComponent.prototype, "orientation", void 0);
|
|
8869
|
+
StackLayoutComponent = __decorate([
|
|
8870
|
+
Component({
|
|
8871
|
+
exportAs: 'kendoStackLayout',
|
|
8872
|
+
selector: 'kendo-stacklayout',
|
|
8873
|
+
providers: [
|
|
8874
|
+
LocalizationService,
|
|
8875
|
+
{
|
|
8876
|
+
provide: L10N_PREFIX,
|
|
8877
|
+
useValue: 'kendo.stacklayout'
|
|
8878
|
+
}
|
|
8879
|
+
],
|
|
8880
|
+
template: "\n <ng-content></ng-content>\n "
|
|
8881
|
+
}),
|
|
8882
|
+
__metadata("design:paramtypes", [Renderer2,
|
|
8883
|
+
ElementRef,
|
|
8884
|
+
LocalizationService])
|
|
8885
|
+
], StackLayoutComponent);
|
|
8886
|
+
return StackLayoutComponent;
|
|
8887
|
+
}());
|
|
8888
|
+
|
|
8889
|
+
var exportedModules$9 = [
|
|
8890
|
+
StackLayoutComponent
|
|
8891
|
+
];
|
|
8892
|
+
var declarations$9 = exportedModules$9.slice();
|
|
8893
|
+
/**
|
|
8894
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
8895
|
+
* definition for the StackLayout component.
|
|
8896
|
+
*/
|
|
8897
|
+
var StackLayoutModule = /** @class */ (function () {
|
|
8898
|
+
function StackLayoutModule() {
|
|
8899
|
+
}
|
|
8900
|
+
StackLayoutModule = __decorate([
|
|
8901
|
+
NgModule({
|
|
8902
|
+
declarations: [declarations$9],
|
|
8903
|
+
exports: [exportedModules$9],
|
|
8904
|
+
imports: [CommonModule]
|
|
8905
|
+
})
|
|
8906
|
+
], StackLayoutModule);
|
|
8907
|
+
return StackLayoutModule;
|
|
8908
|
+
}());
|
|
8909
|
+
|
|
8910
|
+
/**
|
|
8911
|
+
* Represents the [Kendo UI GridLayout component for Angular]({% slug overview_gridlayout %}).
|
|
8912
|
+
*/
|
|
8913
|
+
var GridLayoutComponent = /** @class */ (function () {
|
|
8914
|
+
function GridLayoutComponent(renderer, element, localization) {
|
|
8915
|
+
this.renderer = renderer;
|
|
8916
|
+
this.element = element;
|
|
8917
|
+
this.localization = localization;
|
|
8918
|
+
this.hostClass = true;
|
|
8919
|
+
/**
|
|
8920
|
+
* Specifies the gaps between the elements. The default value is `0`
|
|
8921
|
+
* ([see example]({% slug layout_gridlayout %}#toc-gaps)).
|
|
8922
|
+
*/
|
|
8923
|
+
this.gap = 0;
|
|
8924
|
+
this._align = {
|
|
8925
|
+
horizontal: 'stretch',
|
|
8926
|
+
vertical: 'stretch'
|
|
8927
|
+
};
|
|
8928
|
+
validatePackage(packageMetadata);
|
|
8929
|
+
}
|
|
8930
|
+
Object.defineProperty(GridLayoutComponent.prototype, "dir", {
|
|
8931
|
+
get: function () {
|
|
8932
|
+
return this.direction;
|
|
8933
|
+
},
|
|
8934
|
+
enumerable: true,
|
|
8935
|
+
configurable: true
|
|
8936
|
+
});
|
|
8937
|
+
Object.defineProperty(GridLayoutComponent.prototype, "align", {
|
|
8938
|
+
get: function () {
|
|
8939
|
+
return this._align;
|
|
8940
|
+
},
|
|
8941
|
+
/**
|
|
8942
|
+
* Specifies the horizontal and vertical alignment of the inner GridLayout elements
|
|
8943
|
+
* ([see example]({% slug layout_gridlayout %}#toc-alignment)).
|
|
8944
|
+
*/
|
|
8945
|
+
set: function (align) {
|
|
8946
|
+
this._align = Object.assign({}, this._align, align);
|
|
8947
|
+
this.handleAlignClasses();
|
|
8948
|
+
},
|
|
8949
|
+
enumerable: true,
|
|
8950
|
+
configurable: true
|
|
8951
|
+
});
|
|
8952
|
+
GridLayoutComponent.prototype.ngAfterViewInit = function () {
|
|
8953
|
+
this.handleAlignClasses();
|
|
8954
|
+
this.handleGridTemplateStyling('rows');
|
|
8955
|
+
this.handleGridTemplateStyling('cols');
|
|
8956
|
+
this.setGap();
|
|
8957
|
+
};
|
|
8958
|
+
GridLayoutComponent.prototype.ngOnChanges = function (changes) {
|
|
8959
|
+
if (isChanged('gap', changes)) {
|
|
8960
|
+
this.setGap();
|
|
8961
|
+
}
|
|
8962
|
+
if (isChanged('rows', changes)) {
|
|
8963
|
+
this.handleGridTemplateStyling('rows');
|
|
8964
|
+
}
|
|
8965
|
+
if (isChanged('cols', changes)) {
|
|
8966
|
+
this.handleGridTemplateStyling('cols');
|
|
8967
|
+
}
|
|
8968
|
+
};
|
|
8969
|
+
GridLayoutComponent.prototype.handleAlignClasses = function () {
|
|
8970
|
+
var elem = this.element.nativeElement;
|
|
8971
|
+
if (isPresent(this.justifyClass)) {
|
|
8972
|
+
this.renderer.removeClass(elem, this.justifyClass);
|
|
8973
|
+
}
|
|
8974
|
+
if (isPresent(this.alignClass)) {
|
|
8975
|
+
this.renderer.removeClass(elem, this.alignClass);
|
|
8976
|
+
}
|
|
8977
|
+
this.justifyClass = GRID_JUSTIFY_PREFIX + "-" + this.align.horizontal;
|
|
8978
|
+
this.alignClass = ALIGN_PREFIX + "-" + VERTICAL_SUFFIX[this.align.vertical];
|
|
8979
|
+
this.renderer.addClass(elem, this.justifyClass);
|
|
8980
|
+
this.renderer.addClass(elem, this.alignClass);
|
|
8981
|
+
};
|
|
8982
|
+
GridLayoutComponent.prototype.setGap = function () {
|
|
8983
|
+
var parsedGap = normalizeGap(this.gap);
|
|
8984
|
+
var gapStyle = generateGapStyle(parsedGap);
|
|
8985
|
+
this.renderer.setStyle(this.element.nativeElement, 'gap', gapStyle);
|
|
8986
|
+
};
|
|
8987
|
+
GridLayoutComponent.prototype.handleGridTemplateStyling = function (type) {
|
|
8988
|
+
if (!isPresent(this[type])) {
|
|
8989
|
+
return;
|
|
8990
|
+
}
|
|
8991
|
+
var isValid = validateGridLayoutRowsCols(this[type]);
|
|
8992
|
+
if (!isValid && isDevMode()) {
|
|
8993
|
+
var valueType = type === 'rows' ? 'GridLayoutRowSize' : 'GridLayoutColSize';
|
|
8994
|
+
throw new Error("The provided " + type + " value contains invalid elements. The array supports values of type number, string or " + valueType + ".");
|
|
8995
|
+
}
|
|
8996
|
+
var gridTemplateStyle = type === 'rows' ? 'grid-template-rows' : 'grid-template-columns';
|
|
8997
|
+
var gridStyle = generateGridStyle(this[type], type);
|
|
8998
|
+
this.renderer.setStyle(this.element.nativeElement, gridTemplateStyle, gridStyle.join(' '));
|
|
8999
|
+
};
|
|
9000
|
+
Object.defineProperty(GridLayoutComponent.prototype, "direction", {
|
|
9001
|
+
get: function () {
|
|
9002
|
+
return this.localization.rtl ? 'rtl' : 'ltr';
|
|
9003
|
+
},
|
|
9004
|
+
enumerable: true,
|
|
9005
|
+
configurable: true
|
|
9006
|
+
});
|
|
9007
|
+
__decorate([
|
|
9008
|
+
HostBinding('class.k-grid-layout'),
|
|
9009
|
+
__metadata("design:type", Boolean)
|
|
9010
|
+
], GridLayoutComponent.prototype, "hostClass", void 0);
|
|
9011
|
+
__decorate([
|
|
9012
|
+
HostBinding('attr.dir'),
|
|
9013
|
+
__metadata("design:type", String),
|
|
9014
|
+
__metadata("design:paramtypes", [])
|
|
9015
|
+
], GridLayoutComponent.prototype, "dir", null);
|
|
9016
|
+
__decorate([
|
|
9017
|
+
Input(),
|
|
9018
|
+
__metadata("design:type", Array)
|
|
9019
|
+
], GridLayoutComponent.prototype, "rows", void 0);
|
|
9020
|
+
__decorate([
|
|
9021
|
+
Input(),
|
|
9022
|
+
__metadata("design:type", Array)
|
|
9023
|
+
], GridLayoutComponent.prototype, "cols", void 0);
|
|
9024
|
+
__decorate([
|
|
9025
|
+
Input(),
|
|
9026
|
+
__metadata("design:type", Object)
|
|
9027
|
+
], GridLayoutComponent.prototype, "gap", void 0);
|
|
9028
|
+
__decorate([
|
|
9029
|
+
Input(),
|
|
9030
|
+
__metadata("design:type", Object),
|
|
9031
|
+
__metadata("design:paramtypes", [Object])
|
|
9032
|
+
], GridLayoutComponent.prototype, "align", null);
|
|
9033
|
+
GridLayoutComponent = __decorate([
|
|
9034
|
+
Component({
|
|
9035
|
+
exportAs: 'kendoGridLayout',
|
|
9036
|
+
selector: 'kendo-gridlayout',
|
|
9037
|
+
providers: [
|
|
9038
|
+
LocalizationService,
|
|
9039
|
+
{
|
|
9040
|
+
provide: L10N_PREFIX,
|
|
9041
|
+
useValue: 'kendo.gridlayout'
|
|
9042
|
+
}
|
|
9043
|
+
],
|
|
9044
|
+
template: "\n <ng-content></ng-content>\n "
|
|
9045
|
+
}),
|
|
9046
|
+
__metadata("design:paramtypes", [Renderer2,
|
|
9047
|
+
ElementRef,
|
|
9048
|
+
LocalizationService])
|
|
9049
|
+
], GridLayoutComponent);
|
|
9050
|
+
return GridLayoutComponent;
|
|
9051
|
+
}());
|
|
9052
|
+
|
|
9053
|
+
var GridLayoutItemComponent = /** @class */ (function () {
|
|
9054
|
+
function GridLayoutItemComponent(renderer, element) {
|
|
9055
|
+
this.renderer = renderer;
|
|
9056
|
+
this.element = element;
|
|
9057
|
+
}
|
|
9058
|
+
GridLayoutItemComponent.prototype.ngOnInit = function () {
|
|
9059
|
+
this.setItemStyle();
|
|
9060
|
+
};
|
|
9061
|
+
GridLayoutItemComponent.prototype.ngOnChanges = function () {
|
|
9062
|
+
this.setItemStyle();
|
|
9063
|
+
};
|
|
9064
|
+
GridLayoutItemComponent.prototype.setItemStyle = function () {
|
|
9065
|
+
var row = this.row || 'auto';
|
|
9066
|
+
var col = this.col || 'auto';
|
|
9067
|
+
var rowSpan = this.rowSpan ? "span " + this.rowSpan : 'auto';
|
|
9068
|
+
var colSpan = this.colSpan ? "span " + this.colSpan : 'auto';
|
|
9069
|
+
var gridAreaStyle = row + " / " + col + " / " + rowSpan + " / " + colSpan;
|
|
9070
|
+
this.renderer.setStyle(this.element.nativeElement, 'grid-area', gridAreaStyle);
|
|
9071
|
+
};
|
|
9072
|
+
__decorate([
|
|
9073
|
+
Input(),
|
|
9074
|
+
__metadata("design:type", Number)
|
|
9075
|
+
], GridLayoutItemComponent.prototype, "row", void 0);
|
|
9076
|
+
__decorate([
|
|
9077
|
+
Input(),
|
|
9078
|
+
__metadata("design:type", Number)
|
|
9079
|
+
], GridLayoutItemComponent.prototype, "col", void 0);
|
|
9080
|
+
__decorate([
|
|
9081
|
+
Input(),
|
|
9082
|
+
__metadata("design:type", Number)
|
|
9083
|
+
], GridLayoutItemComponent.prototype, "rowSpan", void 0);
|
|
9084
|
+
__decorate([
|
|
9085
|
+
Input(),
|
|
9086
|
+
__metadata("design:type", Number)
|
|
9087
|
+
], GridLayoutItemComponent.prototype, "colSpan", void 0);
|
|
9088
|
+
GridLayoutItemComponent = __decorate([
|
|
9089
|
+
Component({
|
|
9090
|
+
selector: 'kendo-gridlayout-item',
|
|
9091
|
+
template: "\n <ng-content></ng-content>\n "
|
|
9092
|
+
}),
|
|
9093
|
+
__metadata("design:paramtypes", [Renderer2,
|
|
9094
|
+
ElementRef])
|
|
9095
|
+
], GridLayoutItemComponent);
|
|
9096
|
+
return GridLayoutItemComponent;
|
|
9097
|
+
}());
|
|
9098
|
+
|
|
9099
|
+
var exportedModules$a = [
|
|
9100
|
+
GridLayoutComponent,
|
|
9101
|
+
GridLayoutItemComponent
|
|
9102
|
+
];
|
|
9103
|
+
var declarations$a = exportedModules$a.slice();
|
|
9104
|
+
/**
|
|
9105
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
9106
|
+
* definition for the GridLayout component.
|
|
9107
|
+
*/
|
|
9108
|
+
var GridLayoutModule = /** @class */ (function () {
|
|
9109
|
+
function GridLayoutModule() {
|
|
9110
|
+
}
|
|
9111
|
+
GridLayoutModule = __decorate([
|
|
9112
|
+
NgModule({
|
|
9113
|
+
declarations: [declarations$a],
|
|
9114
|
+
exports: [exportedModules$a],
|
|
9115
|
+
imports: [CommonModule]
|
|
9116
|
+
})
|
|
9117
|
+
], GridLayoutModule);
|
|
9118
|
+
return GridLayoutModule;
|
|
9119
|
+
}());
|
|
9120
|
+
|
|
8626
9121
|
/**
|
|
8627
9122
|
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
8628
9123
|
* definition for the Layout components.
|
|
@@ -8668,7 +9163,9 @@ var LayoutModule = /** @class */ (function () {
|
|
|
8668
9163
|
SplitterModule,
|
|
8669
9164
|
StepperModule,
|
|
8670
9165
|
TabStripModule,
|
|
8671
|
-
TileLayoutModule
|
|
9166
|
+
TileLayoutModule,
|
|
9167
|
+
StackLayoutModule,
|
|
9168
|
+
GridLayoutModule
|
|
8672
9169
|
]
|
|
8673
9170
|
})
|
|
8674
9171
|
], LayoutModule);
|
|
@@ -8679,4 +9176,4 @@ var LayoutModule = /** @class */ (function () {
|
|
|
8679
9176
|
* Generated bundle index. Do not edit.
|
|
8680
9177
|
*/
|
|
8681
9178
|
|
|
8682
|
-
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 };
|
|
9179
|
+
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 };
|
package/dist/npm/common/util.js
CHANGED
|
@@ -87,3 +87,7 @@ exports.getStylingClasses = function (componentType, stylingOption, previousValu
|
|
|
87
87
|
* @hidden
|
|
88
88
|
*/
|
|
89
89
|
exports.mapShapeToRounded = function (shape) { return SHAPE_TO_ROUNDED[shape] || null; };
|
|
90
|
+
/**
|
|
91
|
+
* @hidden
|
|
92
|
+
*/
|
|
93
|
+
exports.isNumber = function (value) { return typeof value === 'number' && isFinite(value); };
|
|
@@ -168,6 +168,7 @@ var ExpansionPanelComponent = /** @class */ (function () {
|
|
|
168
168
|
};
|
|
169
169
|
ExpansionPanelComponent.prototype.ngOnInit = function () {
|
|
170
170
|
var _this = this;
|
|
171
|
+
this.renderer.removeAttribute(this.hostElement.nativeElement, 'title');
|
|
171
172
|
this.subscriptions = this.localizationService.changes.subscribe(function (_a) {
|
|
172
173
|
var rtl = _a.rtl;
|
|
173
174
|
_this.direction = rtl ? 'rtl' : 'ltr';
|
|
@@ -0,0 +1,33 @@
|
|
|
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 grid_layout_component_1 = require("./layouts/grid-layout.component");
|
|
11
|
+
var gridlayout_item_component_1 = require("./layouts/gridlayout-item.component");
|
|
12
|
+
var exportedModules = [
|
|
13
|
+
grid_layout_component_1.GridLayoutComponent,
|
|
14
|
+
gridlayout_item_component_1.GridLayoutItemComponent
|
|
15
|
+
];
|
|
16
|
+
var declarations = exportedModules.slice();
|
|
17
|
+
/**
|
|
18
|
+
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
19
|
+
* definition for the GridLayout component.
|
|
20
|
+
*/
|
|
21
|
+
var GridLayoutModule = /** @class */ (function () {
|
|
22
|
+
function GridLayoutModule() {
|
|
23
|
+
}
|
|
24
|
+
GridLayoutModule = tslib_1.__decorate([
|
|
25
|
+
core_1.NgModule({
|
|
26
|
+
declarations: [declarations],
|
|
27
|
+
exports: [exportedModules],
|
|
28
|
+
imports: [common_1.CommonModule]
|
|
29
|
+
})
|
|
30
|
+
], GridLayoutModule);
|
|
31
|
+
return GridLayoutModule;
|
|
32
|
+
}());
|
|
33
|
+
exports.GridLayoutModule = GridLayoutModule;
|
|
@@ -15,6 +15,8 @@ var splitter_module_1 = require("./splitter.module");
|
|
|
15
15
|
var stepper_module_1 = require("./stepper.module");
|
|
16
16
|
var tabstrip_module_1 = require("./tabstrip.module");
|
|
17
17
|
var tilelayout_module_1 = require("./tilelayout.module");
|
|
18
|
+
var stacklayout_module_1 = require("./stacklayout.module");
|
|
19
|
+
var gridlayout_module_1 = require("./gridlayout.module");
|
|
18
20
|
/**
|
|
19
21
|
* Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
|
|
20
22
|
* definition for the Layout components.
|
|
@@ -60,7 +62,9 @@ var LayoutModule = /** @class */ (function () {
|
|
|
60
62
|
splitter_module_1.SplitterModule,
|
|
61
63
|
stepper_module_1.StepperModule,
|
|
62
64
|
tabstrip_module_1.TabStripModule,
|
|
63
|
-
tilelayout_module_1.TileLayoutModule
|
|
65
|
+
tilelayout_module_1.TileLayoutModule,
|
|
66
|
+
stacklayout_module_1.StackLayoutModule,
|
|
67
|
+
gridlayout_module_1.GridLayoutModule
|
|
64
68
|
]
|
|
65
69
|
})
|
|
66
70
|
], LayoutModule);
|