@progress/kendo-angular-layout 17.0.0-develop.6 → 17.0.0-develop.8
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/tabstrip/rendering/tab.component.mjs +10 -9
- package/esm2020/tabstrip/tabstrip.component.mjs +12 -2
- 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 +26 -15
- package/fesm2020/progress-kendo-angular-layout.mjs +26 -15
- package/package.json +8 -8
- package/tabstrip/tabstrip.component.d.ts +2 -0
package/README.md
CHANGED
|
@@ -2,42 +2,57 @@
|
|
|
2
2
|
<img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
|
|
3
3
|
</a>
|
|
4
4
|
|
|
5
|
-
## Kendo UI for Angular Layout Package (
|
|
5
|
+
## Kendo UI for Angular Layout Package (Avatar, Card, Drawer, ExpansionPanel, GridLayout, PanelBar, Splitter, StackLayout, Stepper, TabStrip, TileLayout and Timeline Components)
|
|
6
6
|
|
|
7
|
-
>
|
|
8
|
-
> *
|
|
9
|
-
> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout).
|
|
10
|
-
> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout).
|
|
7
|
+
> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui)—a commercial library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
|
|
8
|
+
> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
|
|
11
9
|
> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
|
|
12
10
|
>
|
|
13
|
-
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui
|
|
11
|
+
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
|
|
14
12
|
|
|
15
|
-
Kendo UI for Angular is a
|
|
13
|
+
The [Kendo UI for Angular Layout package](https://www.telerik.com/kendo-angular-ui/components/layout/) is a collection of popular components for laying out a professional quality app. The components include a variety of layout types and styles that have extensive configuration options allowing flexibility.
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
* [Avatar](https://www.telerik.com/kendo-angular-ui/avatar?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
19
|
-
* [Card](https://www.telerik.com/kendo-angular-ui/card?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
20
|
-
* [Drawer](https://www.telerik.com/kendo-angular-ui/drawer?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
21
|
-
* [ExpansionPanel](https://www.telerik.com/kendo-angular-ui/expansionpanel?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
22
|
-
* [PanelBar](https://www.telerik.com/kendo-angular-ui/panelbar?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
23
|
-
* [Splitter](https://www.telerik.com/kendo-angular-ui/splitter?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
24
|
-
* [Stepper](https://www.telerik.com/kendo-angular-ui/stepper?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
25
|
-
* [TabStrip](https://www.telerik.com/kendo-angular-ui/tabstrip?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
26
|
-
* [TileLayout](https://www.telerik.com/kendo-angular-ui/tilelayout?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
15
|
+
## What's Included in the Angular Layout Package
|
|
27
16
|
|
|
28
|
-
|
|
17
|
+
* [Avatar](https://www.telerik.com/kendo-angular-ui/components/layout/avatar)—Displays a graphical representation of a profile or online avatar, including people or entities with initials, custom icons, and images.
|
|
18
|
+
* [Card](https://www.telerik.com/kendo-angular-ui/components/layout/card)—Combines text, visual content and actions about a single subject. It provides clarity, categorization, and an attractive way of presentation.
|
|
19
|
+
* [Drawer](https://www.telerik.com/kendo-angular-ui/components/layout/drawer)—Offers a side navigation element that can be toggled to be displayed or hidden, or permanently displayed. It enables the user to change the content of a specific section of the page.
|
|
20
|
+
* [ExpansionPanel](https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel)—Organizes any content into a details-summary view consisting of a title bar and expandable/collapsible content.
|
|
21
|
+
* [GridLayout](https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout)—Based on the CSS Grid Layout system, which allows setting the specific row, column and size of each item. It allows you to arrange your content in columns and rows, forming a grid structure.
|
|
22
|
+
* [PanelBar](https://www.telerik.com/kendo-angular-ui/components/layout/panelbar)—Showcases hierarchical or multi-level content in a component, whose individual items can be expanded or collapsed.
|
|
23
|
+
* [Splitter](https://www.telerik.com/kendo-angular-ui/components/layout/splitter)—Splits a page into sections, which can be expanded, collapsed or resized, and allows users to control the page layout.
|
|
24
|
+
* [StackLayout](https://www.telerik.com/kendo-angular-ui/components/layout/stacklayout)—Allows you to easily arrange vertically or horizontally multiple elements in a stack according to the alignment and spacing you like.
|
|
25
|
+
* [Stepper](https://www.telerik.com/kendo-angular-ui/components/layout/stepper)—Visualizes the progress of a process by dividing it into chronological steps.
|
|
26
|
+
* [TabStrip](https://www.telerik.com/kendo-angular-ui/components/layout/tabstrip)—Displays a collection of tabs, each with their own associated content, which enable the user to switch between different views inside a single component.
|
|
27
|
+
* [TileLayout](https://www.telerik.com/kendo-angular-ui/components/layout/tilelayout)—Displays a collection of tiles and aligns them into columns and rows, allowing end users to rearrange and resize any of the tiles.
|
|
28
|
+
* [Timeline](https://www.telerik.com/kendo-angular-ui/components/layout/timeline)—Displays a collection of events and their data in a chronological succession for each year.
|
|
29
|
+
|
|
30
|
+
## Key Features
|
|
31
|
+
|
|
32
|
+
Among the many features which the Kendo UI for Angular Layout components deliver are:
|
|
33
|
+
|
|
34
|
+
* [Appearance](https://www.telerik.com/kendo-angular-ui/components/layout/avatar/appearance)—The appearance of all Layout components can be customized using theme variables and configuration options. Kendo UI for Angular offers a variety of popular themes, including Bootstrap and Material. These themes can be easily tailored to your needs using the [Progress ThemeBuilder](https://www.telerik.com/themebuilder), an online utility application.
|
|
35
|
+
* [Globalization](https://www.telerik.com/kendo-angular-ui/components/inputs/globalization)—The Kendo UI for Angular Layout package supports globalization to ensure that each Layout component can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Layout controls support rendering in a right-to-left (RTL) direction.
|
|
36
|
+
* [Accessibility](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/accessibility)—Most Layout components are accessible for screen readers and support WAI-ARIA attributes.
|
|
37
|
+
* [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui/components/inputs/maskedtextbox/keyboard-navigation)—Apart from the Avatar, Card, and TileLayout, the Layout components support a number of keyboard shortcuts which allow users to accomplish various commands.
|
|
29
38
|
|
|
30
|
-
|
|
31
|
-
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
32
|
-
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
|
|
33
|
-
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-layout)
|
|
39
|
+
## Support Options
|
|
34
40
|
|
|
35
|
-
|
|
41
|
+
For any issues you might encounter while working with the Kendo UI for Angular Layout, you have the following support channels available:
|
|
42
|
+
|
|
43
|
+
* Industry-leading technical support—Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-tickets).
|
|
44
|
+
* Product forums—The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
|
|
45
|
+
* Feedback portal—The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
|
|
46
|
+
|
|
47
|
+
## Resources
|
|
36
48
|
|
|
37
|
-
* [
|
|
38
|
-
* [
|
|
39
|
-
* [
|
|
40
|
-
* [
|
|
49
|
+
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
|
|
50
|
+
* [Getting Started with the Kendo UI for Angular Layout](https://www.telerik.com/kendo-angular-ui/components/layout/installation/getting-started)
|
|
51
|
+
* [Layout Overview page](https://www.telerik.com/kendo-angular-ui/components/layout) and [Layout API reference](https://www.telerik.com/kendo-angular-ui/components/layout/api)
|
|
52
|
+
* [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap)
|
|
53
|
+
* [Kendo UI for Angular Blog](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
|
|
54
|
+
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
|
|
55
|
+
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
|
|
41
56
|
|
|
42
57
|
*Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
|
|
43
58
|
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-layout',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '17.0.0-develop.
|
|
12
|
+
publishDate: 1729170015,
|
|
13
|
+
version: '17.0.0-develop.8',
|
|
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
|
};
|
|
@@ -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,
|
|
@@ -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"
|
|
@@ -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"
|
|
@@ -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}}%)`,
|
|
@@ -28,8 +28,8 @@ const packageMetadata = {
|
|
|
28
28
|
name: '@progress/kendo-angular-layout',
|
|
29
29
|
productName: 'Kendo UI for Angular',
|
|
30
30
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
31
|
-
publishDate:
|
|
32
|
-
version: '17.0.0-develop.
|
|
31
|
+
publishDate: 1729170015,
|
|
32
|
+
version: '17.0.0-develop.8',
|
|
33
33
|
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'
|
|
34
34
|
};
|
|
35
35
|
|
|
@@ -3451,11 +3451,13 @@ class TabComponent {
|
|
|
3451
3451
|
}
|
|
3452
3452
|
}
|
|
3453
3453
|
TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3454
|
-
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", "
|
|
3454
|
+
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: `
|
|
3455
3455
|
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
|
|
3456
|
-
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3456
|
+
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3457
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
3458
|
+
</span>
|
|
3457
3459
|
<span class="k-link" *ngIf="tab.tabTitle">
|
|
3458
|
-
<ng-template [ngTemplateOutlet]="tab.tabTitle
|
|
3460
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
3459
3461
|
</ng-template>
|
|
3460
3462
|
</span>
|
|
3461
3463
|
</ng-container>
|
|
@@ -3477,7 +3479,7 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
3477
3479
|
(click)="closeTab(index)"
|
|
3478
3480
|
class="k-remove-tab k-icon-button"
|
|
3479
3481
|
></button>
|
|
3480
|
-
`, 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]
|
|
3482
|
+
`, 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"] }] });
|
|
3481
3483
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
|
|
3482
3484
|
type: Component,
|
|
3483
3485
|
args: [{
|
|
@@ -3485,9 +3487,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3485
3487
|
selector: '[kendoTabStripTab]',
|
|
3486
3488
|
template: `
|
|
3487
3489
|
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
|
|
3488
|
-
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3490
|
+
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3491
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
3492
|
+
</span>
|
|
3489
3493
|
<span class="k-link" *ngIf="tab.tabTitle">
|
|
3490
|
-
<ng-template [ngTemplateOutlet]="tab.tabTitle
|
|
3494
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
3491
3495
|
</ng-template>
|
|
3492
3496
|
</span>
|
|
3493
3497
|
</ng-container>
|
|
@@ -3530,9 +3534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3530
3534
|
}], hostClasses: [{
|
|
3531
3535
|
type: HostBinding,
|
|
3532
3536
|
args: ['class.k-item']
|
|
3533
|
-
}, {
|
|
3534
|
-
type: HostBinding,
|
|
3535
|
-
args: ['class.k-tabstrip-item']
|
|
3536
3537
|
}], activeClass: [{
|
|
3537
3538
|
type: HostBinding,
|
|
3538
3539
|
args: ['attr.aria-selected']
|
|
@@ -3621,6 +3622,12 @@ class TabStripComponent {
|
|
|
3621
3622
|
* @default true
|
|
3622
3623
|
*/
|
|
3623
3624
|
this.animate = true;
|
|
3625
|
+
/**
|
|
3626
|
+
* Sets the alignment of the tabs.
|
|
3627
|
+
*
|
|
3628
|
+
* @default: 'start'
|
|
3629
|
+
*/
|
|
3630
|
+
this.tabAlignment = 'start';
|
|
3624
3631
|
/**
|
|
3625
3632
|
* Sets the position of the tabs. Defaults to `top`.
|
|
3626
3633
|
*
|
|
@@ -3960,7 +3967,7 @@ class TabStripComponent {
|
|
|
3960
3967
|
}
|
|
3961
3968
|
}
|
|
3962
3969
|
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: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
3963
|
-
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-
|
|
3970
|
+
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: [
|
|
3964
3971
|
TabStripService,
|
|
3965
3972
|
ScrollService,
|
|
3966
3973
|
LocalizationService,
|
|
@@ -4023,6 +4030,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4023
4030
|
<li
|
|
4024
4031
|
#tabHeaderContainer
|
|
4025
4032
|
kendoTabStripTab
|
|
4033
|
+
[class.k-first]="i === 0"
|
|
4034
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4026
4035
|
[ngClass]="tab.cssClass"
|
|
4027
4036
|
[ngStyle]="tab.cssStyle"
|
|
4028
4037
|
[tab]="tab"
|
|
@@ -4159,6 +4168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4159
4168
|
<li
|
|
4160
4169
|
#tabHeaderContainer
|
|
4161
4170
|
kendoTabStripTab
|
|
4171
|
+
[class.k-first]="i === 0"
|
|
4172
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4162
4173
|
[ngClass]="tab.cssClass"
|
|
4163
4174
|
[ngStyle]="tab.cssStyle"
|
|
4164
4175
|
[tab]="tab"
|
|
@@ -4245,7 +4256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4245
4256
|
args: ['class.k-tabstrip']
|
|
4246
4257
|
}, {
|
|
4247
4258
|
type: HostBinding,
|
|
4248
|
-
args: ['class.k-
|
|
4259
|
+
args: ['class.k-header']
|
|
4249
4260
|
}], tabsAtTop: [{
|
|
4250
4261
|
type: HostBinding,
|
|
4251
4262
|
args: ['class.k-tabstrip-top']
|
|
@@ -10438,7 +10449,7 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
10438
10449
|
</kendo-card-actions>
|
|
10439
10450
|
</div>
|
|
10440
10451
|
</kendo-card>
|
|
10441
|
-
`, 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]
|
|
10452
|
+
`, 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: [
|
|
10442
10453
|
trigger('toggle', [
|
|
10443
10454
|
state('collapsed', style({
|
|
10444
10455
|
height: '0',
|
|
@@ -11156,7 +11167,7 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
11156
11167
|
</li>
|
|
11157
11168
|
</ul>
|
|
11158
11169
|
</div>
|
|
11159
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
11170
|
+
`, 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: [
|
|
11160
11171
|
trigger('trackSlide', [
|
|
11161
11172
|
state('left', style({
|
|
11162
11173
|
transform: `translateX({{transformValue}}%)`,
|
|
@@ -28,8 +28,8 @@ const packageMetadata = {
|
|
|
28
28
|
name: '@progress/kendo-angular-layout',
|
|
29
29
|
productName: 'Kendo UI for Angular',
|
|
30
30
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
31
|
-
publishDate:
|
|
32
|
-
version: '17.0.0-develop.
|
|
31
|
+
publishDate: 1729170015,
|
|
32
|
+
version: '17.0.0-develop.8',
|
|
33
33
|
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'
|
|
34
34
|
};
|
|
35
35
|
|
|
@@ -3441,11 +3441,13 @@ class TabComponent {
|
|
|
3441
3441
|
}
|
|
3442
3442
|
}
|
|
3443
3443
|
TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3444
|
-
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", "
|
|
3444
|
+
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: `
|
|
3445
3445
|
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
|
|
3446
|
-
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3446
|
+
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3447
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
3448
|
+
</span>
|
|
3447
3449
|
<span class="k-link" *ngIf="tab.tabTitle">
|
|
3448
|
-
<ng-template [ngTemplateOutlet]="tab.tabTitle
|
|
3450
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
3449
3451
|
</ng-template>
|
|
3450
3452
|
</span>
|
|
3451
3453
|
</ng-container>
|
|
@@ -3467,7 +3469,7 @@ TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
3467
3469
|
(click)="closeTab(index)"
|
|
3468
3470
|
class="k-remove-tab k-icon-button"
|
|
3469
3471
|
></button>
|
|
3470
|
-
`, 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]
|
|
3472
|
+
`, 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"] }] });
|
|
3471
3473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
|
|
3472
3474
|
type: Component,
|
|
3473
3475
|
args: [{
|
|
@@ -3475,9 +3477,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3475
3477
|
selector: '[kendoTabStripTab]',
|
|
3476
3478
|
template: `
|
|
3477
3479
|
<ng-container *ngIf="!tab.tabTemplate; else tabTemplate">
|
|
3478
|
-
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3480
|
+
<span class="k-link" *ngIf="!tab.tabTitle">
|
|
3481
|
+
<span class="k-link-text">{{ tab.title }}</span>
|
|
3482
|
+
</span>
|
|
3479
3483
|
<span class="k-link" *ngIf="tab.tabTitle">
|
|
3480
|
-
<ng-template [ngTemplateOutlet]="tab.tabTitle
|
|
3484
|
+
<ng-template [ngTemplateOutlet]="tab.tabTitle.templateRef">
|
|
3481
3485
|
</ng-template>
|
|
3482
3486
|
</span>
|
|
3483
3487
|
</ng-container>
|
|
@@ -3520,9 +3524,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3520
3524
|
}], hostClasses: [{
|
|
3521
3525
|
type: HostBinding,
|
|
3522
3526
|
args: ['class.k-item']
|
|
3523
|
-
}, {
|
|
3524
|
-
type: HostBinding,
|
|
3525
|
-
args: ['class.k-tabstrip-item']
|
|
3526
3527
|
}], activeClass: [{
|
|
3527
3528
|
type: HostBinding,
|
|
3528
3529
|
args: ['attr.aria-selected']
|
|
@@ -3611,6 +3612,12 @@ class TabStripComponent {
|
|
|
3611
3612
|
* @default true
|
|
3612
3613
|
*/
|
|
3613
3614
|
this.animate = true;
|
|
3615
|
+
/**
|
|
3616
|
+
* Sets the alignment of the tabs.
|
|
3617
|
+
*
|
|
3618
|
+
* @default: 'start'
|
|
3619
|
+
*/
|
|
3620
|
+
this.tabAlignment = 'start';
|
|
3614
3621
|
/**
|
|
3615
3622
|
* Sets the position of the tabs. Defaults to `top`.
|
|
3616
3623
|
*
|
|
@@ -3950,7 +3957,7 @@ class TabStripComponent {
|
|
|
3950
3957
|
}
|
|
3951
3958
|
}
|
|
3952
3959
|
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: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
3953
|
-
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-
|
|
3960
|
+
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: [
|
|
3954
3961
|
TabStripService,
|
|
3955
3962
|
ScrollService,
|
|
3956
3963
|
LocalizationService,
|
|
@@ -4013,6 +4020,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4013
4020
|
<li
|
|
4014
4021
|
#tabHeaderContainer
|
|
4015
4022
|
kendoTabStripTab
|
|
4023
|
+
[class.k-first]="i === 0"
|
|
4024
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4016
4025
|
[ngClass]="tab.cssClass"
|
|
4017
4026
|
[ngStyle]="tab.cssStyle"
|
|
4018
4027
|
[tab]="tab"
|
|
@@ -4149,6 +4158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4149
4158
|
<li
|
|
4150
4159
|
#tabHeaderContainer
|
|
4151
4160
|
kendoTabStripTab
|
|
4161
|
+
[class.k-first]="i === 0"
|
|
4162
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4152
4163
|
[ngClass]="tab.cssClass"
|
|
4153
4164
|
[ngStyle]="tab.cssStyle"
|
|
4154
4165
|
[tab]="tab"
|
|
@@ -4235,7 +4246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4235
4246
|
args: ['class.k-tabstrip']
|
|
4236
4247
|
}, {
|
|
4237
4248
|
type: HostBinding,
|
|
4238
|
-
args: ['class.k-
|
|
4249
|
+
args: ['class.k-header']
|
|
4239
4250
|
}], tabsAtTop: [{
|
|
4240
4251
|
type: HostBinding,
|
|
4241
4252
|
args: ['class.k-tabstrip-top']
|
|
@@ -10399,7 +10410,7 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
10399
10410
|
</kendo-card-actions>
|
|
10400
10411
|
</div>
|
|
10401
10412
|
</kendo-card>
|
|
10402
|
-
`, 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]
|
|
10413
|
+
`, 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: [
|
|
10403
10414
|
trigger('toggle', [
|
|
10404
10415
|
state('collapsed', style({
|
|
10405
10416
|
height: '0',
|
|
@@ -11112,7 +11123,7 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
11112
11123
|
</li>
|
|
11113
11124
|
</ul>
|
|
11114
11125
|
</div>
|
|
11115
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]
|
|
11126
|
+
`, 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: [
|
|
11116
11127
|
trigger('trackSlide', [
|
|
11117
11128
|
state('left', style({
|
|
11118
11129
|
transform: `translateX({{transformValue}}%)`,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-layout",
|
|
3
|
-
"version": "17.0.0-develop.
|
|
3
|
+
"version": "17.0.0-develop.8",
|
|
4
4
|
"description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -39,17 +39,17 @@
|
|
|
39
39
|
"@angular/core": "15 - 18",
|
|
40
40
|
"@angular/platform-browser": "15 - 18",
|
|
41
41
|
"@progress/kendo-licensing": "^1.0.2",
|
|
42
|
-
"@progress/kendo-angular-common": "17.0.0-develop.
|
|
43
|
-
"@progress/kendo-angular-l10n": "17.0.0-develop.
|
|
44
|
-
"@progress/kendo-angular-progressbar": "17.0.0-develop.
|
|
45
|
-
"@progress/kendo-angular-icons": "17.0.0-develop.
|
|
46
|
-
"@progress/kendo-angular-buttons": "17.0.0-develop.
|
|
47
|
-
"@progress/kendo-angular-intl": "17.0.0-develop.
|
|
42
|
+
"@progress/kendo-angular-common": "17.0.0-develop.8",
|
|
43
|
+
"@progress/kendo-angular-l10n": "17.0.0-develop.8",
|
|
44
|
+
"@progress/kendo-angular-progressbar": "17.0.0-develop.8",
|
|
45
|
+
"@progress/kendo-angular-icons": "17.0.0-develop.8",
|
|
46
|
+
"@progress/kendo-angular-buttons": "17.0.0-develop.8",
|
|
47
|
+
"@progress/kendo-angular-intl": "17.0.0-develop.8",
|
|
48
48
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"tslib": "^2.3.1",
|
|
52
|
-
"@progress/kendo-angular-schematics": "17.0.0-develop.
|
|
52
|
+
"@progress/kendo-angular-schematics": "17.0.0-develop.8",
|
|
53
53
|
"@progress/kendo-draggable": "^3.0.2"
|
|
54
54
|
},
|
|
55
55
|
"schematics": "./schematics/collection.json",
|