@progress/kendo-angular-layout 6.3.3-dev.202110050911 → 6.3.5-dev.202110290740
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 +1 -1
- package/dist/cdn/main.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/panelbar/panelbar-item.component.js +45 -23
- package/dist/es/panelbar/panelbar.component.js +5 -13
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/panelbar/panelbar-item.component.d.ts +13 -13
- package/dist/es2015/panelbar/panelbar-item.component.js +45 -31
- package/dist/es2015/panelbar/panelbar.component.d.ts +1 -1
- package/dist/es2015/panelbar/panelbar.component.js +5 -9
- package/dist/fesm2015/index.js +51 -41
- package/dist/fesm5/index.js +51 -37
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/panelbar/panelbar-item.component.js +44 -22
- package/dist/npm/panelbar/panelbar.component.js +5 -13
- package/dist/systemjs/kendo-angular-layout.js +1 -1
- package/package.json +5 -5
|
@@ -9,7 +9,7 @@ export var packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-layout',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1635493161,
|
|
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
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as tslib_1 from "tslib";
|
|
6
|
-
import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, TemplateRef, QueryList, ViewChild, ElementRef } from '@angular/core';
|
|
6
|
+
import { Component, Input, ContentChildren, ViewChildren, Optional, Host, HostBinding, SkipSelf, isDevMode, TemplateRef, QueryList, ViewChild, ElementRef, Renderer2 } from '@angular/core';
|
|
7
7
|
import { animate, trigger, style, state, transition, AUTO_STYLE } from '@angular/animations';
|
|
8
8
|
import { PanelBarService } from "./panelbar.service";
|
|
9
9
|
import { PanelBarContentDirective } from "./panelbar-content.directive";
|
|
@@ -19,11 +19,12 @@ var nextId = 0;
|
|
|
19
19
|
* Represents the items of the PanelBar.
|
|
20
20
|
*/
|
|
21
21
|
var PanelBarItemComponent = /** @class */ (function () {
|
|
22
|
-
function PanelBarItemComponent(parent, eventService, element) {
|
|
22
|
+
function PanelBarItemComponent(parent, eventService, element, renderer) {
|
|
23
23
|
var _this = this;
|
|
24
24
|
this.parent = parent;
|
|
25
25
|
this.eventService = eventService;
|
|
26
26
|
this.element = element;
|
|
27
|
+
this.renderer = renderer;
|
|
27
28
|
/**
|
|
28
29
|
* Allows the component to set the `"id"` property to each item.
|
|
29
30
|
* Used to set the `id` attributes of the nested elements and to enable the WAI-ARIA support.
|
|
@@ -58,6 +59,7 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
58
59
|
this.state = "inactive";
|
|
59
60
|
this.role = "treeitem";
|
|
60
61
|
this.titleAttribute = null; // tslint:disable-line
|
|
62
|
+
this.kItemClass = true;
|
|
61
63
|
this.focused = false;
|
|
62
64
|
this.wrapperFocused = false;
|
|
63
65
|
this.subscriptions = new Subscription(function () { });
|
|
@@ -65,6 +67,7 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
65
67
|
this.subscriptions.add(eventService.parent$.subscribe(function (focused) { return _this.onWrapperFocusChange(focused); }));
|
|
66
68
|
this.subscriptions.add(eventService.keepContent$.subscribe(function (keepContent) { return _this.keepContent = keepContent; }));
|
|
67
69
|
this.wrapperFocused = parent ? parent.focused : false;
|
|
70
|
+
this.level = this.parent ? this.parent.level + 1 : 0;
|
|
68
71
|
}
|
|
69
72
|
PanelBarItemComponent_1 = PanelBarItemComponent;
|
|
70
73
|
Object.defineProperty(PanelBarItemComponent.prototype, "expanded", {
|
|
@@ -92,13 +95,6 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
92
95
|
enumerable: true,
|
|
93
96
|
configurable: true
|
|
94
97
|
});
|
|
95
|
-
Object.defineProperty(PanelBarItemComponent.prototype, "kItemClass", {
|
|
96
|
-
get: function () {
|
|
97
|
-
return true;
|
|
98
|
-
},
|
|
99
|
-
enumerable: true,
|
|
100
|
-
configurable: true
|
|
101
|
-
});
|
|
102
98
|
Object.defineProperty(PanelBarItemComponent.prototype, "kStateDefaultClass", {
|
|
103
99
|
get: function () {
|
|
104
100
|
return !this.disabled;
|
|
@@ -148,6 +144,20 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
148
144
|
enumerable: true,
|
|
149
145
|
configurable: true
|
|
150
146
|
});
|
|
147
|
+
Object.defineProperty(PanelBarItemComponent.prototype, "headerClass", {
|
|
148
|
+
get: function () {
|
|
149
|
+
return this.parent ? null : true;
|
|
150
|
+
},
|
|
151
|
+
enumerable: true,
|
|
152
|
+
configurable: true
|
|
153
|
+
});
|
|
154
|
+
Object.defineProperty(PanelBarItemComponent.prototype, "childClass", {
|
|
155
|
+
get: function () {
|
|
156
|
+
return this.parent ? true : null;
|
|
157
|
+
},
|
|
158
|
+
enumerable: true,
|
|
159
|
+
configurable: true
|
|
160
|
+
});
|
|
151
161
|
Object.defineProperty(PanelBarItemComponent.prototype, "titleTemplate", {
|
|
152
162
|
/**
|
|
153
163
|
* @hidden
|
|
@@ -164,9 +174,9 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
164
174
|
PanelBarItemComponent.prototype.headerHeight = function () {
|
|
165
175
|
return this.element.nativeElement.offsetHeight - (this.contentWrapper ? this.contentWrapper.nativeElement.offsetHeight : 0);
|
|
166
176
|
};
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
177
|
+
PanelBarItemComponent.prototype.ngOnInit = function () {
|
|
178
|
+
this.addLevelClass();
|
|
179
|
+
};
|
|
170
180
|
PanelBarItemComponent.prototype.ngAfterContentChecked = function () {
|
|
171
181
|
var _this = this;
|
|
172
182
|
this.hasItems = this.items && this.items.filter(function (item) { return !item.hidden; }).length > 0;
|
|
@@ -175,9 +185,6 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
175
185
|
this.content !== undefined;
|
|
176
186
|
this.validateConfiguration();
|
|
177
187
|
};
|
|
178
|
-
/**
|
|
179
|
-
* @hidden
|
|
180
|
-
*/
|
|
181
188
|
PanelBarItemComponent.prototype.ngAfterViewChecked = function () {
|
|
182
189
|
var _this = this;
|
|
183
190
|
if (this.items) {
|
|
@@ -187,9 +194,6 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
187
194
|
this.childrenItems = this.contentItems.filter(function (item) { return item !== _this; });
|
|
188
195
|
}
|
|
189
196
|
};
|
|
190
|
-
/**
|
|
191
|
-
* @hidden
|
|
192
|
-
*/
|
|
193
197
|
PanelBarItemComponent.prototype.ngOnDestroy = function () {
|
|
194
198
|
this.subscriptions.unsubscribe();
|
|
195
199
|
};
|
|
@@ -283,6 +287,14 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
283
287
|
});
|
|
284
288
|
}
|
|
285
289
|
};
|
|
290
|
+
/**
|
|
291
|
+
* @hidden
|
|
292
|
+
*/
|
|
293
|
+
PanelBarItemComponent.prototype.addLevelClass = function () {
|
|
294
|
+
if (this.level >= 0) {
|
|
295
|
+
this.renderer.addClass(this.element.nativeElement, "k-level-" + this.level);
|
|
296
|
+
}
|
|
297
|
+
};
|
|
286
298
|
PanelBarItemComponent.prototype.onWrapperFocusChange = function (focused) {
|
|
287
299
|
this.wrapperFocused = focused;
|
|
288
300
|
};
|
|
@@ -350,9 +362,8 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
350
362
|
], PanelBarItemComponent.prototype, "titleAttribute", void 0);
|
|
351
363
|
tslib_1.__decorate([
|
|
352
364
|
HostBinding('class.k-item'),
|
|
353
|
-
tslib_1.__metadata("design:type", Boolean)
|
|
354
|
-
|
|
355
|
-
], PanelBarItemComponent.prototype, "kItemClass", null);
|
|
365
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
366
|
+
], PanelBarItemComponent.prototype, "kItemClass", void 0);
|
|
356
367
|
tslib_1.__decorate([
|
|
357
368
|
HostBinding('class.k-state-default'),
|
|
358
369
|
tslib_1.__metadata("design:type", Boolean),
|
|
@@ -388,6 +399,16 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
388
399
|
tslib_1.__metadata("design:type", Boolean),
|
|
389
400
|
tslib_1.__metadata("design:paramtypes", [])
|
|
390
401
|
], PanelBarItemComponent.prototype, "ariaDisabled", null);
|
|
402
|
+
tslib_1.__decorate([
|
|
403
|
+
HostBinding('class.k-panelbar-header'),
|
|
404
|
+
tslib_1.__metadata("design:type", Boolean),
|
|
405
|
+
tslib_1.__metadata("design:paramtypes", [])
|
|
406
|
+
], PanelBarItemComponent.prototype, "headerClass", null);
|
|
407
|
+
tslib_1.__decorate([
|
|
408
|
+
HostBinding('class.k-panelbar-item'),
|
|
409
|
+
tslib_1.__metadata("design:type", Boolean),
|
|
410
|
+
tslib_1.__metadata("design:paramtypes", [])
|
|
411
|
+
], PanelBarItemComponent.prototype, "childClass", null);
|
|
391
412
|
tslib_1.__decorate([
|
|
392
413
|
ViewChildren(PanelBarItemComponent_1),
|
|
393
414
|
tslib_1.__metadata("design:type", QueryList)
|
|
@@ -421,12 +442,13 @@ var PanelBarItemComponent = /** @class */ (function () {
|
|
|
421
442
|
],
|
|
422
443
|
exportAs: 'kendoPanelbarItem',
|
|
423
444
|
selector: "kendo-panelbar-item",
|
|
424
|
-
template: "\n <span\n #header\n [class.k-link]=\"true\"\n [class.k-
|
|
445
|
+
template: "\n <span\n #header\n [class.k-link]=\"true\"\n [class.k-state-selected]=\"!disabled && selected\"\n [class.k-state-focused]=\"focused && wrapperFocused\"\n (click)=\"onItemClick($event)\">\n <span\n *ngIf=\"icon || iconClass\"\n class=\"k-icon k-panelbar-item-icon\"\n [ngClass]=\"iconClasses\">\n </span>\n <img\n *ngIf=\"imageUrl\"\n class=\"k-image k-panelbar-item-icon\"\n [src]=\"imageUrl\"\n alt=\"\">\n <ng-container *ngIf=\"!titleTemplate\"><span class=\"k-panelbar-item-text\">{{title}}</span></ng-container>\n <ng-template *ngIf=\"titleTemplate\" [ngTemplateOutlet]=\"titleTemplate\"></ng-template>\n <span *ngIf=\"hasChildItems || hasContent\"\n class=\"k-icon k-panelbar-toggle\"\n [ngClass]=\"{'k-i-arrow-chevron-up k-panelbar-collapse': expanded, 'k-i-arrow-chevron-down k-panelbar-expand': !expanded}\">\n </span>\n </span>\n <div #contentWrapper\n *ngIf=\"keepContent || (!disabled && expanded && (hasChildItems || hasContent))\"\n [@toggle]=\"state\"\n [attr.role]=\"'group'\"\n [attr.aria-hidden]=\"!disabled && !expanded\">\n <div\n *ngIf=\"hasChildItems && !items?.length\"\n [style.overflow]=\"contentOverflow\"\n [style.height]=\"contentHeight\"\n class=\"k-panel k-group k-panelbar-group\">\n <ng-content select=\"kendo-panelbar-item\"></ng-content>\n </div>\n <div\n *ngIf=\"hasContent && !content\"\n [style.overflow]=\"contentOverflow\"\n [style.height]=\"contentHeight\"\n class=\"k-content k-panelbar-content\">\n <ng-template\n [ngTemplateOutlet]=\"contentTemplate.first.templateRef\"\n [ngTemplateOutletContext]=\"{\n $implicit: {\n title: title,\n id: id,\n icon: icon,\n imageUrl: imageUrl,\n disabled: disabled,\n content: content\n }\n }\">\n </ng-template>\n </div>\n <div *ngIf=\"hasItems\"\n [style.overflow]=\"contentOverflow\"\n [style.height]=\"contentHeight\"\n class=\"k-panel k-group k-panelbar-group\">\n <ng-container *ngFor=\"let item of items\">\n <kendo-panelbar-item *ngIf=\"!item.hidden\"\n [title]=\"item.title\"\n [id]=\"item.id\"\n [icon]=\"item.icon\"\n [iconClass]=\"item.iconClass\"\n [imageUrl]=\"item.imageUrl\"\n [selected]=\"!!item.selected\"\n [expanded]=\"!!item.expanded\"\n [disabled]=\"!!item.disabled\"\n [template]=\"template\"\n [items]=\"item.children\"\n [content]=\"item.content\">\n </kendo-panelbar-item>\n </ng-container>\n </div>\n <div\n *ngIf=\"content\"\n [style.overflow]=\"contentOverflow\"\n [style.height]=\"contentHeight\"\n class=\"k-content k-panelbar-content\">\n <ng-template\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n $implicit: {\n title: title,\n id: id,\n icon: icon,\n imageUrl: imageUrl,\n disabled: disabled,\n content: content\n }\n }\">\n </ng-template>\n <ng-template [ngIf]=\"!template\">{{content}}</ng-template>\n </div>\n </div>"
|
|
425
446
|
}),
|
|
426
447
|
tslib_1.__param(0, SkipSelf()), tslib_1.__param(0, Host()), tslib_1.__param(0, Optional()),
|
|
427
448
|
tslib_1.__metadata("design:paramtypes", [PanelBarItemComponent,
|
|
428
449
|
PanelBarService,
|
|
429
|
-
ElementRef
|
|
450
|
+
ElementRef,
|
|
451
|
+
Renderer2])
|
|
430
452
|
], PanelBarItemComponent);
|
|
431
453
|
return PanelBarItemComponent;
|
|
432
454
|
}());
|
|
@@ -53,6 +53,7 @@ var PanelBarComponent = /** @class */ (function () {
|
|
|
53
53
|
this.stateChange = new EventEmitter();
|
|
54
54
|
this.tabIndex = 0;
|
|
55
55
|
this.role = "tree";
|
|
56
|
+
this.hostClass = true;
|
|
56
57
|
this.activeDescendant = "";
|
|
57
58
|
this.isViewInit = true;
|
|
58
59
|
this.focused = false;
|
|
@@ -318,13 +319,6 @@ var PanelBarComponent = /** @class */ (function () {
|
|
|
318
319
|
this.stateChange.emit(modifiedItems.map(function (currentItem) { return currentItem.serialize(); }));
|
|
319
320
|
}
|
|
320
321
|
};
|
|
321
|
-
Object.defineProperty(PanelBarComponent.prototype, "hostClasses", {
|
|
322
|
-
get: function () {
|
|
323
|
-
return true;
|
|
324
|
-
},
|
|
325
|
-
enumerable: true,
|
|
326
|
-
configurable: true
|
|
327
|
-
});
|
|
328
322
|
PanelBarComponent.prototype.isVisible = function (item) {
|
|
329
323
|
var visibleItems = this.visibleItems();
|
|
330
324
|
return visibleItems.some(function (i) { return i === item; });
|
|
@@ -475,6 +469,10 @@ var PanelBarComponent = /** @class */ (function () {
|
|
|
475
469
|
HostBinding('attr.role'),
|
|
476
470
|
tslib_1.__metadata("design:type", String)
|
|
477
471
|
], PanelBarComponent.prototype, "role", void 0);
|
|
472
|
+
tslib_1.__decorate([
|
|
473
|
+
HostBinding('class.k-panelbar'),
|
|
474
|
+
tslib_1.__metadata("design:type", Boolean)
|
|
475
|
+
], PanelBarComponent.prototype, "hostClass", void 0);
|
|
478
476
|
tslib_1.__decorate([
|
|
479
477
|
HostBinding('attr.aria-activedescendant'),
|
|
480
478
|
tslib_1.__metadata("design:type", String)
|
|
@@ -534,12 +532,6 @@ var PanelBarComponent = /** @class */ (function () {
|
|
|
534
532
|
tslib_1.__metadata("design:paramtypes", [Object]),
|
|
535
533
|
tslib_1.__metadata("design:returntype", void 0)
|
|
536
534
|
], PanelBarComponent.prototype, "onComponentKeyDown", null);
|
|
537
|
-
tslib_1.__decorate([
|
|
538
|
-
HostBinding('class.k-widget'),
|
|
539
|
-
HostBinding('class.k-panelbar'),
|
|
540
|
-
tslib_1.__metadata("design:type", Boolean),
|
|
541
|
-
tslib_1.__metadata("design:paramtypes", [])
|
|
542
|
-
], PanelBarComponent.prototype, "hostClasses", null);
|
|
543
535
|
PanelBarComponent = tslib_1.__decorate([
|
|
544
536
|
Component({
|
|
545
537
|
exportAs: 'kendoPanelbar',
|