@progress/kendo-angular-layout 16.12.0-develop.1 → 17.0.0-develop.10
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 +30 -41
- 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 +44 -54
- package/fesm2020/progress-kendo-angular-layout.mjs +44 -54
- package/package.json +8 -8
- package/tabstrip/models/tab-alignment.d.ts +1 -1
- package/tabstrip/tabstrip.component.d.ts +2 -12
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: '
|
|
12
|
+
publishDate: 1729175986,
|
|
13
|
+
version: '17.0.0-develop.10',
|
|
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
|
*
|
|
@@ -231,35 +237,6 @@ export class TabStripComponent {
|
|
|
231
237
|
this.activeStateChangeSub.unsubscribe();
|
|
232
238
|
}
|
|
233
239
|
}
|
|
234
|
-
/**
|
|
235
|
-
* @hidden
|
|
236
|
-
*/
|
|
237
|
-
get tabsAlignmentStyles() {
|
|
238
|
-
return {
|
|
239
|
-
start: 'flex-start',
|
|
240
|
-
end: 'flex-end',
|
|
241
|
-
center: 'center',
|
|
242
|
-
justify: 'space-between'
|
|
243
|
-
}[this.tabAlignment];
|
|
244
|
-
}
|
|
245
|
-
/**
|
|
246
|
-
* @hidden
|
|
247
|
-
*/
|
|
248
|
-
get tabListWidth() {
|
|
249
|
-
if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
|
|
250
|
-
return '100%';
|
|
251
|
-
}
|
|
252
|
-
return null;
|
|
253
|
-
}
|
|
254
|
-
/**
|
|
255
|
-
* @hidden
|
|
256
|
-
*/
|
|
257
|
-
get tabListHeight() {
|
|
258
|
-
if (this.tabPosition === 'left' || this.tabPosition === 'right') {
|
|
259
|
-
return '100%';
|
|
260
|
-
}
|
|
261
|
-
return null;
|
|
262
|
-
}
|
|
263
240
|
/**
|
|
264
241
|
* @hidden
|
|
265
242
|
*/
|
|
@@ -411,7 +388,7 @@ export class TabStripComponent {
|
|
|
411
388
|
}
|
|
412
389
|
}
|
|
413
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 });
|
|
414
|
-
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: [
|
|
415
392
|
TabStripService,
|
|
416
393
|
ScrollService,
|
|
417
394
|
LocalizationService,
|
|
@@ -456,20 +433,26 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
456
433
|
[prev]="true"
|
|
457
434
|
[title]="localization.get('previousTabButton')"
|
|
458
435
|
(tabScroll)="tabScroll.emit($event)"
|
|
459
|
-
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"
|
|
460
437
|
(onClick)="onScrollButtonClick($event)">
|
|
461
438
|
</span>
|
|
462
439
|
<ul role="tablist" #tablist
|
|
463
440
|
class="k-reset k-tabstrip-items"
|
|
464
|
-
[
|
|
465
|
-
|
|
466
|
-
|
|
441
|
+
[ngClass]="{
|
|
442
|
+
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
443
|
+
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
444
|
+
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
445
|
+
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
446
|
+
'k-tabstrip-items-justify': tabAlignment === 'justify'
|
|
447
|
+
}"
|
|
467
448
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
468
449
|
>
|
|
469
450
|
<ng-container *ngFor="let tab of tabs; let i = index;">
|
|
470
451
|
<li
|
|
471
452
|
#tabHeaderContainer
|
|
472
453
|
kendoTabStripTab
|
|
454
|
+
[class.k-first]="i === 0"
|
|
455
|
+
[class.k-last]="i === tabs.length - 1"
|
|
473
456
|
[ngClass]="tab.cssClass"
|
|
474
457
|
[ngStyle]="tab.cssStyle"
|
|
475
458
|
[tab]="tab"
|
|
@@ -495,7 +478,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
495
478
|
[prev]="false"
|
|
496
479
|
[title]="localization.get('nextTabButton')"
|
|
497
480
|
(tabScroll)="tabScroll.emit($event)"
|
|
498
|
-
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"
|
|
499
482
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
500
483
|
</div>
|
|
501
484
|
</ng-template>
|
|
@@ -588,20 +571,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
588
571
|
[prev]="true"
|
|
589
572
|
[title]="localization.get('previousTabButton')"
|
|
590
573
|
(tabScroll)="tabScroll.emit($event)"
|
|
591
|
-
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"
|
|
592
575
|
(onClick)="onScrollButtonClick($event)">
|
|
593
576
|
</span>
|
|
594
577
|
<ul role="tablist" #tablist
|
|
595
578
|
class="k-reset k-tabstrip-items"
|
|
596
|
-
[
|
|
597
|
-
|
|
598
|
-
|
|
579
|
+
[ngClass]="{
|
|
580
|
+
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
581
|
+
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
582
|
+
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
583
|
+
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
584
|
+
'k-tabstrip-items-justify': tabAlignment === 'justify'
|
|
585
|
+
}"
|
|
599
586
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
600
587
|
>
|
|
601
588
|
<ng-container *ngFor="let tab of tabs; let i = index;">
|
|
602
589
|
<li
|
|
603
590
|
#tabHeaderContainer
|
|
604
591
|
kendoTabStripTab
|
|
592
|
+
[class.k-first]="i === 0"
|
|
593
|
+
[class.k-last]="i === tabs.length - 1"
|
|
605
594
|
[ngClass]="tab.cssClass"
|
|
606
595
|
[ngStyle]="tab.cssStyle"
|
|
607
596
|
[tab]="tab"
|
|
@@ -627,7 +616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
627
616
|
[prev]="false"
|
|
628
617
|
[title]="localization.get('nextTabButton')"
|
|
629
618
|
(tabScroll)="tabScroll.emit($event)"
|
|
630
|
-
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"
|
|
631
620
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
632
621
|
</div>
|
|
633
622
|
</ng-template>
|
|
@@ -688,7 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
688
677
|
args: ['class.k-tabstrip']
|
|
689
678
|
}, {
|
|
690
679
|
type: HostBinding,
|
|
691
|
-
args: ['class.k-
|
|
680
|
+
args: ['class.k-header']
|
|
692
681
|
}], tabsAtTop: [{
|
|
693
682
|
type: HostBinding,
|
|
694
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: '
|
|
31
|
+
publishDate: 1729175986,
|
|
32
|
+
version: '17.0.0-develop.10',
|
|
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
|
*
|
|
@@ -3809,35 +3816,6 @@ class TabStripComponent {
|
|
|
3809
3816
|
this.activeStateChangeSub.unsubscribe();
|
|
3810
3817
|
}
|
|
3811
3818
|
}
|
|
3812
|
-
/**
|
|
3813
|
-
* @hidden
|
|
3814
|
-
*/
|
|
3815
|
-
get tabsAlignmentStyles() {
|
|
3816
|
-
return {
|
|
3817
|
-
start: 'flex-start',
|
|
3818
|
-
end: 'flex-end',
|
|
3819
|
-
center: 'center',
|
|
3820
|
-
justify: 'space-between'
|
|
3821
|
-
}[this.tabAlignment];
|
|
3822
|
-
}
|
|
3823
|
-
/**
|
|
3824
|
-
* @hidden
|
|
3825
|
-
*/
|
|
3826
|
-
get tabListWidth() {
|
|
3827
|
-
if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
|
|
3828
|
-
return '100%';
|
|
3829
|
-
}
|
|
3830
|
-
return null;
|
|
3831
|
-
}
|
|
3832
|
-
/**
|
|
3833
|
-
* @hidden
|
|
3834
|
-
*/
|
|
3835
|
-
get tabListHeight() {
|
|
3836
|
-
if (this.tabPosition === 'left' || this.tabPosition === 'right') {
|
|
3837
|
-
return '100%';
|
|
3838
|
-
}
|
|
3839
|
-
return null;
|
|
3840
|
-
}
|
|
3841
3819
|
/**
|
|
3842
3820
|
* @hidden
|
|
3843
3821
|
*/
|
|
@@ -3989,7 +3967,7 @@ class TabStripComponent {
|
|
|
3989
3967
|
}
|
|
3990
3968
|
}
|
|
3991
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 });
|
|
3992
|
-
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: [
|
|
3993
3971
|
TabStripService,
|
|
3994
3972
|
ScrollService,
|
|
3995
3973
|
LocalizationService,
|
|
@@ -4034,20 +4012,26 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4034
4012
|
[prev]="true"
|
|
4035
4013
|
[title]="localization.get('previousTabButton')"
|
|
4036
4014
|
(tabScroll)="tabScroll.emit($event)"
|
|
4037
|
-
class="k-icon-button k-button k-button-md k-
|
|
4015
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4038
4016
|
(onClick)="onScrollButtonClick($event)">
|
|
4039
4017
|
</span>
|
|
4040
4018
|
<ul role="tablist" #tablist
|
|
4041
4019
|
class="k-reset k-tabstrip-items"
|
|
4042
|
-
[
|
|
4043
|
-
|
|
4044
|
-
|
|
4020
|
+
[ngClass]="{
|
|
4021
|
+
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
4022
|
+
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
4023
|
+
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4024
|
+
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4025
|
+
'k-tabstrip-items-justify': tabAlignment === 'justify'
|
|
4026
|
+
}"
|
|
4045
4027
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4046
4028
|
>
|
|
4047
4029
|
<ng-container *ngFor="let tab of tabs; let i = index;">
|
|
4048
4030
|
<li
|
|
4049
4031
|
#tabHeaderContainer
|
|
4050
4032
|
kendoTabStripTab
|
|
4033
|
+
[class.k-first]="i === 0"
|
|
4034
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4051
4035
|
[ngClass]="tab.cssClass"
|
|
4052
4036
|
[ngStyle]="tab.cssStyle"
|
|
4053
4037
|
[tab]="tab"
|
|
@@ -4073,7 +4057,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4073
4057
|
[prev]="false"
|
|
4074
4058
|
[title]="localization.get('nextTabButton')"
|
|
4075
4059
|
(tabScroll)="tabScroll.emit($event)"
|
|
4076
|
-
class="k-icon-button k-button k-button-md k-
|
|
4060
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4077
4061
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
4078
4062
|
</div>
|
|
4079
4063
|
</ng-template>
|
|
@@ -4166,20 +4150,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4166
4150
|
[prev]="true"
|
|
4167
4151
|
[title]="localization.get('previousTabButton')"
|
|
4168
4152
|
(tabScroll)="tabScroll.emit($event)"
|
|
4169
|
-
class="k-icon-button k-button k-button-md k-
|
|
4153
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4170
4154
|
(onClick)="onScrollButtonClick($event)">
|
|
4171
4155
|
</span>
|
|
4172
4156
|
<ul role="tablist" #tablist
|
|
4173
4157
|
class="k-reset k-tabstrip-items"
|
|
4174
|
-
[
|
|
4175
|
-
|
|
4176
|
-
|
|
4158
|
+
[ngClass]="{
|
|
4159
|
+
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
4160
|
+
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
4161
|
+
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4162
|
+
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4163
|
+
'k-tabstrip-items-justify': tabAlignment === 'justify'
|
|
4164
|
+
}"
|
|
4177
4165
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4178
4166
|
>
|
|
4179
4167
|
<ng-container *ngFor="let tab of tabs; let i = index;">
|
|
4180
4168
|
<li
|
|
4181
4169
|
#tabHeaderContainer
|
|
4182
4170
|
kendoTabStripTab
|
|
4171
|
+
[class.k-first]="i === 0"
|
|
4172
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4183
4173
|
[ngClass]="tab.cssClass"
|
|
4184
4174
|
[ngStyle]="tab.cssStyle"
|
|
4185
4175
|
[tab]="tab"
|
|
@@ -4205,7 +4195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4205
4195
|
[prev]="false"
|
|
4206
4196
|
[title]="localization.get('nextTabButton')"
|
|
4207
4197
|
(tabScroll)="tabScroll.emit($event)"
|
|
4208
|
-
class="k-icon-button k-button k-button-md k-
|
|
4198
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4209
4199
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
4210
4200
|
</div>
|
|
4211
4201
|
</ng-template>
|
|
@@ -4266,7 +4256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4266
4256
|
args: ['class.k-tabstrip']
|
|
4267
4257
|
}, {
|
|
4268
4258
|
type: HostBinding,
|
|
4269
|
-
args: ['class.k-
|
|
4259
|
+
args: ['class.k-header']
|
|
4270
4260
|
}], tabsAtTop: [{
|
|
4271
4261
|
type: HostBinding,
|
|
4272
4262
|
args: ['class.k-tabstrip-top']
|
|
@@ -10459,7 +10449,7 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
10459
10449
|
</kendo-card-actions>
|
|
10460
10450
|
</div>
|
|
10461
10451
|
</kendo-card>
|
|
10462
|
-
`, 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: [
|
|
10463
10453
|
trigger('toggle', [
|
|
10464
10454
|
state('collapsed', style({
|
|
10465
10455
|
height: '0',
|
|
@@ -11177,7 +11167,7 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
11177
11167
|
</li>
|
|
11178
11168
|
</ul>
|
|
11179
11169
|
</div>
|
|
11180
|
-
`, 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: [
|
|
11181
11171
|
trigger('trackSlide', [
|
|
11182
11172
|
state('left', style({
|
|
11183
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: '
|
|
31
|
+
publishDate: 1729175986,
|
|
32
|
+
version: '17.0.0-develop.10',
|
|
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
|
*
|
|
@@ -3799,35 +3806,6 @@ class TabStripComponent {
|
|
|
3799
3806
|
this.activeStateChangeSub.unsubscribe();
|
|
3800
3807
|
}
|
|
3801
3808
|
}
|
|
3802
|
-
/**
|
|
3803
|
-
* @hidden
|
|
3804
|
-
*/
|
|
3805
|
-
get tabsAlignmentStyles() {
|
|
3806
|
-
return {
|
|
3807
|
-
start: 'flex-start',
|
|
3808
|
-
end: 'flex-end',
|
|
3809
|
-
center: 'center',
|
|
3810
|
-
justify: 'space-between'
|
|
3811
|
-
}[this.tabAlignment];
|
|
3812
|
-
}
|
|
3813
|
-
/**
|
|
3814
|
-
* @hidden
|
|
3815
|
-
*/
|
|
3816
|
-
get tabListWidth() {
|
|
3817
|
-
if (this.tabPosition === 'top' || this.tabPosition === 'bottom') {
|
|
3818
|
-
return '100%';
|
|
3819
|
-
}
|
|
3820
|
-
return null;
|
|
3821
|
-
}
|
|
3822
|
-
/**
|
|
3823
|
-
* @hidden
|
|
3824
|
-
*/
|
|
3825
|
-
get tabListHeight() {
|
|
3826
|
-
if (this.tabPosition === 'left' || this.tabPosition === 'right') {
|
|
3827
|
-
return '100%';
|
|
3828
|
-
}
|
|
3829
|
-
return null;
|
|
3830
|
-
}
|
|
3831
3809
|
/**
|
|
3832
3810
|
* @hidden
|
|
3833
3811
|
*/
|
|
@@ -3979,7 +3957,7 @@ class TabStripComponent {
|
|
|
3979
3957
|
}
|
|
3980
3958
|
}
|
|
3981
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 });
|
|
3982
|
-
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: [
|
|
3983
3961
|
TabStripService,
|
|
3984
3962
|
ScrollService,
|
|
3985
3963
|
LocalizationService,
|
|
@@ -4024,20 +4002,26 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4024
4002
|
[prev]="true"
|
|
4025
4003
|
[title]="localization.get('previousTabButton')"
|
|
4026
4004
|
(tabScroll)="tabScroll.emit($event)"
|
|
4027
|
-
class="k-icon-button k-button k-button-md k-
|
|
4005
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4028
4006
|
(onClick)="onScrollButtonClick($event)">
|
|
4029
4007
|
</span>
|
|
4030
4008
|
<ul role="tablist" #tablist
|
|
4031
4009
|
class="k-reset k-tabstrip-items"
|
|
4032
|
-
[
|
|
4033
|
-
|
|
4034
|
-
|
|
4010
|
+
[ngClass]="{
|
|
4011
|
+
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
4012
|
+
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
4013
|
+
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4014
|
+
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4015
|
+
'k-tabstrip-items-justify': tabAlignment === 'justify'
|
|
4016
|
+
}"
|
|
4035
4017
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4036
4018
|
>
|
|
4037
4019
|
<ng-container *ngFor="let tab of tabs; let i = index;">
|
|
4038
4020
|
<li
|
|
4039
4021
|
#tabHeaderContainer
|
|
4040
4022
|
kendoTabStripTab
|
|
4023
|
+
[class.k-first]="i === 0"
|
|
4024
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4041
4025
|
[ngClass]="tab.cssClass"
|
|
4042
4026
|
[ngStyle]="tab.cssStyle"
|
|
4043
4027
|
[tab]="tab"
|
|
@@ -4063,7 +4047,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
4063
4047
|
[prev]="false"
|
|
4064
4048
|
[title]="localization.get('nextTabButton')"
|
|
4065
4049
|
(tabScroll)="tabScroll.emit($event)"
|
|
4066
|
-
class="k-icon-button k-button k-button-md k-
|
|
4050
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4067
4051
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
4068
4052
|
</div>
|
|
4069
4053
|
</ng-template>
|
|
@@ -4156,20 +4140,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4156
4140
|
[prev]="true"
|
|
4157
4141
|
[title]="localization.get('previousTabButton')"
|
|
4158
4142
|
(tabScroll)="tabScroll.emit($event)"
|
|
4159
|
-
class="k-icon-button k-button k-button-md k-
|
|
4143
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4160
4144
|
(onClick)="onScrollButtonClick($event)">
|
|
4161
4145
|
</span>
|
|
4162
4146
|
<ul role="tablist" #tablist
|
|
4163
4147
|
class="k-reset k-tabstrip-items"
|
|
4164
|
-
[
|
|
4165
|
-
|
|
4166
|
-
|
|
4148
|
+
[ngClass]="{
|
|
4149
|
+
'k-tabstrip-items-start': tabAlignment === 'start',
|
|
4150
|
+
'k-tabstrip-items-center': tabAlignment === 'center',
|
|
4151
|
+
'k-tabstrip-items-end': tabAlignment === 'end',
|
|
4152
|
+
'k-tabstrip-items-stretched': tabAlignment === 'stretched',
|
|
4153
|
+
'k-tabstrip-items-justify': tabAlignment === 'justify'
|
|
4154
|
+
}"
|
|
4167
4155
|
[attr.aria-orientation]="tabPosition === 'left' || tabPosition === 'right' ? 'vertical' : 'horizontal'"
|
|
4168
4156
|
>
|
|
4169
4157
|
<ng-container *ngFor="let tab of tabs; let i = index;">
|
|
4170
4158
|
<li
|
|
4171
4159
|
#tabHeaderContainer
|
|
4172
4160
|
kendoTabStripTab
|
|
4161
|
+
[class.k-first]="i === 0"
|
|
4162
|
+
[class.k-last]="i === tabs.length - 1"
|
|
4173
4163
|
[ngClass]="tab.cssClass"
|
|
4174
4164
|
[ngStyle]="tab.cssStyle"
|
|
4175
4165
|
[tab]="tab"
|
|
@@ -4195,7 +4185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4195
4185
|
[prev]="false"
|
|
4196
4186
|
[title]="localization.get('nextTabButton')"
|
|
4197
4187
|
(tabScroll)="tabScroll.emit($event)"
|
|
4198
|
-
class="k-icon-button k-button k-button-md k-
|
|
4188
|
+
class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
|
|
4199
4189
|
(onClick)="onScrollButtonClick($event)"></span>
|
|
4200
4190
|
</div>
|
|
4201
4191
|
</ng-template>
|
|
@@ -4256,7 +4246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4256
4246
|
args: ['class.k-tabstrip']
|
|
4257
4247
|
}, {
|
|
4258
4248
|
type: HostBinding,
|
|
4259
|
-
args: ['class.k-
|
|
4249
|
+
args: ['class.k-header']
|
|
4260
4250
|
}], tabsAtTop: [{
|
|
4261
4251
|
type: HostBinding,
|
|
4262
4252
|
args: ['class.k-tabstrip-top']
|
|
@@ -10420,7 +10410,7 @@ TimelineCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
10420
10410
|
</kendo-card-actions>
|
|
10421
10411
|
</div>
|
|
10422
10412
|
</kendo-card>
|
|
10423
|
-
`, 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: [
|
|
10424
10414
|
trigger('toggle', [
|
|
10425
10415
|
state('collapsed', style({
|
|
10426
10416
|
height: '0',
|
|
@@ -11133,7 +11123,7 @@ TimelineHorizontalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
|
|
|
11133
11123
|
</li>
|
|
11134
11124
|
</ul>
|
|
11135
11125
|
</div>
|
|
11136
|
-
`, 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: [
|
|
11137
11127
|
trigger('trackSlide', [
|
|
11138
11128
|
state('left', style({
|
|
11139
11129
|
transform: `translateX({{transformValue}}%)`,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-layout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "17.0.0-develop.10",
|
|
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": "
|
|
43
|
-
"@progress/kendo-angular-l10n": "
|
|
44
|
-
"@progress/kendo-angular-progressbar": "
|
|
45
|
-
"@progress/kendo-angular-icons": "
|
|
46
|
-
"@progress/kendo-angular-buttons": "
|
|
47
|
-
"@progress/kendo-angular-intl": "
|
|
42
|
+
"@progress/kendo-angular-common": "17.0.0-develop.10",
|
|
43
|
+
"@progress/kendo-angular-l10n": "17.0.0-develop.10",
|
|
44
|
+
"@progress/kendo-angular-progressbar": "17.0.0-develop.10",
|
|
45
|
+
"@progress/kendo-angular-icons": "17.0.0-develop.10",
|
|
46
|
+
"@progress/kendo-angular-buttons": "17.0.0-develop.10",
|
|
47
|
+
"@progress/kendo-angular-intl": "17.0.0-develop.10",
|
|
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": "
|
|
52
|
+
"@progress/kendo-angular-schematics": "17.0.0-develop.10",
|
|
53
53
|
"@progress/kendo-draggable": "^3.0.2"
|
|
54
54
|
},
|
|
55
55
|
"schematics": "./schematics/collection.json",
|
|
@@ -40,6 +40,8 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
|
|
|
40
40
|
animate: boolean;
|
|
41
41
|
/**
|
|
42
42
|
* Sets the alignment of the tabs.
|
|
43
|
+
*
|
|
44
|
+
* @default: 'start'
|
|
43
45
|
*/
|
|
44
46
|
tabAlignment: TabAlignment;
|
|
45
47
|
/**
|
|
@@ -154,18 +156,6 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
|
|
|
154
156
|
ngAfterViewInit(): void;
|
|
155
157
|
ngOnChanges(changes: SimpleChanges): void;
|
|
156
158
|
ngOnDestroy(): void;
|
|
157
|
-
/**
|
|
158
|
-
* @hidden
|
|
159
|
-
*/
|
|
160
|
-
get tabsAlignmentStyles(): string;
|
|
161
|
-
/**
|
|
162
|
-
* @hidden
|
|
163
|
-
*/
|
|
164
|
-
get tabListWidth(): string;
|
|
165
|
-
/**
|
|
166
|
-
* @hidden
|
|
167
|
-
*/
|
|
168
|
-
get tabListHeight(): string;
|
|
169
159
|
/**
|
|
170
160
|
* @hidden
|
|
171
161
|
*/
|