@progress/kendo-angular-layout 17.0.0-develop.2 → 17.0.0-develop.20
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/README.md +42 -27
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/splitter/splitter-bar.component.mjs +35 -2
- package/esm2020/splitter/splitter-pane.component.mjs +45 -27
- package/esm2020/splitter/splitter.component.mjs +39 -11
- package/esm2020/splitter/splitter.service.mjs +50 -17
- package/esm2020/tabstrip/rendering/tab.component.mjs +10 -9
- package/esm2020/tabstrip/tabstrip.component.mjs +16 -6
- package/esm2020/timeline/timeline-card.component.mjs +1 -1
- package/esm2020/timeline/timeline-horizontal.component.mjs +1 -1
- package/fesm2015/progress-kendo-angular-layout.mjs +365 -244
- package/fesm2020/progress-kendo-angular-layout.mjs +365 -244
- package/package.json +8 -8
- package/splitter/splitter-bar.component.d.ts +13 -1
- package/splitter/splitter-pane.component.d.ts +23 -4
- package/splitter/splitter.component.d.ts +12 -4
- package/splitter/splitter.service.d.ts +5 -0
- package/tabstrip/tabstrip.component.d.ts +2 -0
|
@@ -75,11 +75,13 @@ export class TabComponent {
|
|
|
75
75
|
}
|
|
76
76
|
}
|
|
77
77
|
TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
78
|
-
TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "
|
|
78
|
+
TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabComponent, isStandalone: true, selector: "[kendoTabStripTab]", inputs: { tab: "tab", index: "index", tabStripClosable: "tabStripClosable", tabStripCloseIcon: "tabStripCloseIcon", customTabstripCloseIcon: "customTabstripCloseIcon", closeSVGIcon: "closeSVGIcon" }, outputs: { tabClose: "tabClose" }, host: { properties: { "class.k-item": "this.hostClasses", "attr.aria-selected": "this.activeClass", "class.k-active": "this.activeClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-focus": "this.focusedClass", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: `
|
|
79
79
|
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
|
|
80
|
-
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
80
|
+
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
81
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
82
|
+
</span>
|
|
81
83
|
<span class="k-link" *ngIf="tab.tabTitle">
|
|
82
|
-
<ng-template [ngTemplateOutlet]="tab.tabTitle
|
|
84
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
83
85
|
</ng-template>
|
|
84
86
|
</span>
|
|
85
87
|
</ng-container>
|
|
@@ -101,7 +103,7 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
101
103
|
(click)="closeTab(index)"
|
|
102
104
|
class="k-remove-tab k-icon-button"
|
|
103
105
|
></button>
|
|
104
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
106
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
105
107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
|
|
106
108
|
type: Component,
|
|
107
109
|
args: [{
|
|
@@ -109,9 +111,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
109
111
|
selector: '[kendoTabStripTab]',
|
|
110
112
|
template: `
|
|
111
113
|
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
|
|
112
|
-
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
114
|
+
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
115
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
116
|
+
</span>
|
|
113
117
|
<span class="k-link" *ngIf="tab.tabTitle">
|
|
114
|
-
<ng-template [ngTemplateOutlet]="tab.tabTitle
|
|
118
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
115
119
|
</ng-template>
|
|
116
120
|
</span>
|
|
117
121
|
</ng-container>
|
|
@@ -154,9 +158,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
154
158
|
}], hostClasses: [{
|
|
155
159
|
type: HostBinding,
|
|
156
160
|
args: ['class.k-item']
|
|
157
|
-
}, {
|
|
158
|
-
type: HostBinding,
|
|
159
|
-
args: ['class.k-tabstrip-item']
|
|
160
161
|
}], activeClass: [{
|
|
161
162
|
type: HostBinding,
|
|
162
163
|
args: ['attr.aria-selected']
|
|
@@ -43,6 +43,12 @@ export class TabStripComponent {
|
|
|
43
43
|
* @default true
|
|
44
44
|
*/
|
|
45
45
|
this.animate = true;
|
|
46
|
+
/**
|
|
47
|
+
* Sets the alignment of the tabs.
|
|
48
|
+
*
|
|
49
|
+
* @default: 'start'
|
|
50
|
+
*/
|
|
51
|
+
this.tabAlignment = 'start';
|
|
46
52
|
/**
|
|
47
53
|
* Sets the position of the tabs. Defaults to `top`.
|
|
48
54
|
*
|
|
@@ -382,7 +388,7 @@ export class TabStripComponent {
|
|
|
382
388
|
}
|
|
383
389
|
}
|
|
384
390
|
TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TabStripService }, { token: i3.ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
385
|
-
TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-
|
|
391
|
+
TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
|
|
386
392
|
TabStripService,
|
|
387
393
|
ScrollService,
|
|
388
394
|
LocalizationService,
|
|
@@ -427,7 +433,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
427
433
|
[prev]="true"
|
|
428
434
|
[title]="localization.get('previousTabButton')"
|
|
429
435
|
(tabScroll)="tabScroll.emit($event)"
|
|
430
|
-
class="k-icon-button k-button k-button-md k-
|
|
436
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
431
437
|
(onClick)="onScrollButtonClick($event)">
|
|
432
438
|
</span>
|
|
433
439
|
<ul role="tablist" #tablist
|
|
@@ -445,6 +451,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
445
451
|
<li
|
|
446
452
|
#tabHeaderContainer
|
|
447
453
|
kendoTabStripTab
|
|
454
|
+
[class.k-first]="i === 0"
|
|
455
|
+
[class.k-last]="i === tabs.length - 1"
|
|
448
456
|
[ngClass]="tab.cssClass"
|
|
449
457
|
[ngStyle]="tab.cssStyle"
|
|
450
458
|
[tab]="tab"
|
|
@@ -470,7 +478,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
470
478
|
[prev]="false"
|
|
471
479
|
[title]="localization.get('nextTabButton')"
|
|
472
480
|
(tabScroll)="tabScroll.emit($event)"
|
|
473
|
-
class="k-icon-button k-button k-button-md k-
|
|
481
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
474
482
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
475
483
|
</div>
|
|
476
484
|
</ng-template>
|
|
@@ -563,7 +571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
563
571
|
[prev]="true"
|
|
564
572
|
[title]="localization.get('previousTabButton')"
|
|
565
573
|
(tabScroll)="tabScroll.emit($event)"
|
|
566
|
-
class="k-icon-button k-button k-button-md k-
|
|
574
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
567
575
|
(onClick)="onScrollButtonClick($event)">
|
|
568
576
|
</span>
|
|
569
577
|
<ul role="tablist" #tablist
|
|
@@ -581,6 +589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
581
589
|
<li
|
|
582
590
|
#tabHeaderContainer
|
|
583
591
|
kendoTabStripTab
|
|
592
|
+
[class.k-first]="i === 0"
|
|
593
|
+
[class.k-last]="i === tabs.length - 1"
|
|
584
594
|
[ngClass]="tab.cssClass"
|
|
585
595
|
[ngStyle]="tab.cssStyle"
|
|
586
596
|
[tab]="tab"
|
|
@@ -606,7 +616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
606
616
|
[prev]="false"
|
|
607
617
|
[title]="localization.get('nextTabButton')"
|
|
608
618
|
(tabScroll)="tabScroll.emit($event)"
|
|
609
|
-
class="k-icon-button k-button k-button-md k-
|
|
619
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
610
620
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
611
621
|
</div>
|
|
612
622
|
</ng-template>
|
|
@@ -667,7 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
667
677
|
args: ['class.k-tabstrip']
|
|
668
678
|
}, {
|
|
669
679
|
type: HostBinding,
|
|
670
|
-
args: ['class.k-
|
|
680
|
+
args: ['class.k-header']
|
|
671
681
|
}], tabsAtTop: [{
|
|
672
682
|
type: HostBinding,
|
|
673
683
|
args: ['class.k-tabstrip-top']
|
|
@@ -219,7 +219,7 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
219
219
|
</kendo-card-actions>
|
|
220
220
|
</div>
|
|
221
221
|
</kendo-card>
|
|
222
|
-
`, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
222
|
+
`, isInline: true, dependencies: [{ kind: "component", type: CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardHeaderComponent, selector: "kendo-card-header" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CardTitleDirective, selector: "[kendoCardTitle]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: CardSubtitleDirective, selector: "[kendoCardSubtitle]" }, { kind: "component", type: CardBodyComponent, selector: "kendo-card-body" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CardMediaDirective, selector: "[kendoCardMedia]" }, { kind: "component", type: CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }], animations: [
|
|
223
223
|
trigger('toggle', [
|
|
224
224
|
state('collapsed', style({
|
|
225
225
|
height: '0',
|
|
@@ -550,7 +550,7 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
550
550
|
</li>
|
|
551
551
|
</ul>
|
|
552
552
|
</div>
|
|
553
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
553
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TimelineCardComponent, selector: "kendo-timeline-card", inputs: ["event", "expanded", "collapsible", "reversed", "orientation", "navigable", "tabIndex", "animationDuration", "index", "eventWidth", "eventHeight", "headerTemplate", "bodyTemplate", "actionsTemplate", "calloutStyle"], exportAs: ["kendoTimelineCard"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }], animations: [
|
|
554
554
|
trigger('trackSlide', [
|
|
555
555
|
state('left', style({
|
|
556
556
|
transform: `translateX({{transformValue}}%)`,
|