@progress/kendo-angular-layout 17.0.0-develop.1 → 17.0.0-develop.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -27
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/splitter/splitter-bar.component.mjs +35 -2
- package/esm2020/splitter/splitter-pane.component.mjs +25 -9
- package/esm2020/splitter/splitter.component.mjs +12 -7
- package/esm2020/splitter/splitter.service.mjs +16 -0
- 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 +316 -258
- package/fesm2020/progress-kendo-angular-layout.mjs +316 -258
- package/package.json +8 -8
- package/splitter/splitter-bar.component.d.ts +13 -1
- package/splitter/splitter-pane.component.d.ts +19 -4
- package/splitter/splitter.component.d.ts +6 -1
- package/splitter/splitter.service.d.ts +4 -0
- 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: '17.0.0-develop.
|
|
12
|
+
publishDate: 1729238832,
|
|
13
|
+
version: '17.0.0-develop.11',
|
|
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
|
};
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
6
6
|
import { ChangeDetectorRef, Component, ElementRef, Host, HostBinding, Input, Renderer2 } from '@angular/core';
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { DraggableDirective, Keys } from '@progress/kendo-angular-common';
|
|
8
|
+
import { DraggableDirective, Keys, isObjectPresent, parseAttributes, removeHTMLAttributes, setHTMLAttributes } from '@progress/kendo-angular-common';
|
|
9
9
|
import { SplitterService } from './splitter.service';
|
|
10
10
|
import { Subscription, of } from 'rxjs';
|
|
11
11
|
import { delay, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
|
|
@@ -42,10 +42,12 @@ export class SplitterBarComponent {
|
|
|
42
42
|
this.renderer = renderer;
|
|
43
43
|
this.cdr = cdr;
|
|
44
44
|
this.ariaRole = 'separator';
|
|
45
|
+
this.ariaLabel = 'Splitter pane';
|
|
45
46
|
this.focused = false;
|
|
46
47
|
this.orientation = 'horizontal';
|
|
47
48
|
this.index = 0;
|
|
48
49
|
this.subscriptions = new Subscription();
|
|
50
|
+
this.parsedAttributes = {};
|
|
49
51
|
}
|
|
50
52
|
get hostOrientation() {
|
|
51
53
|
return this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
|
|
@@ -72,6 +74,28 @@ export class SplitterBarComponent {
|
|
|
72
74
|
get order() {
|
|
73
75
|
return 2 * this.index + 1;
|
|
74
76
|
}
|
|
77
|
+
set htmlAttributes(attributes) {
|
|
78
|
+
if (isObjectPresent(this.parsedAttributes)) {
|
|
79
|
+
removeHTMLAttributes(this.parsedAttributes, this.renderer, this.element.nativeElement);
|
|
80
|
+
}
|
|
81
|
+
this._htmlAttributes = attributes;
|
|
82
|
+
this.parsedAttributes = this.htmlAttributes ?
|
|
83
|
+
parseAttributes(this.htmlAttributes, this.defaultAttributes) :
|
|
84
|
+
this.htmlAttributes;
|
|
85
|
+
this.setHtmlAttributes();
|
|
86
|
+
}
|
|
87
|
+
get htmlAttributes() {
|
|
88
|
+
return this._htmlAttributes;
|
|
89
|
+
}
|
|
90
|
+
get defaultAttributes() {
|
|
91
|
+
return {
|
|
92
|
+
'aria-orientation': this.hostOrientation,
|
|
93
|
+
role: this.ariaRole
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
get mutableAttributes() {
|
|
97
|
+
return { 'tabindex': this.tabIndex };
|
|
98
|
+
}
|
|
75
99
|
ngOnInit() {
|
|
76
100
|
let state;
|
|
77
101
|
const listener = this.draggable.kendoPress.pipe(tap(stopPropagation), filter(() => this.splitterService.isDraggable(this.index)), tap(() => state = this.splitterService.dragState(this.index)), tap(() => this.splitterService.toggleContentOverlay(this.index, true)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.draggable))).subscribe(({ pageX, pageY, originalX, originalY }) => {
|
|
@@ -218,9 +242,13 @@ export class SplitterBarComponent {
|
|
|
218
242
|
this.splitterService.tryToggle(next);
|
|
219
243
|
}
|
|
220
244
|
}
|
|
245
|
+
setHtmlAttributes() {
|
|
246
|
+
const attributesToRender = { ...this.mutableAttributes, ...this.parsedAttributes };
|
|
247
|
+
setHTMLAttributes(attributesToRender, this.renderer, this.element.nativeElement);
|
|
248
|
+
}
|
|
221
249
|
}
|
|
222
250
|
SplitterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterBarComponent, deps: [{ token: i1.DraggableDirective, host: true }, { token: i2.LocalizationService }, { token: i3.SplitterService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
223
|
-
SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
|
|
251
|
+
SplitterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterBarComponent, isStandalone: true, selector: "kendo-splitter-bar", inputs: { orientation: "orientation", index: "index", htmlAttributes: "htmlAttributes" }, host: { properties: { "attr.role": "this.ariaRole", "attr.aria-label": "this.ariaLabel", "class.k-focus": "this.focused", "attr.aria-orientation": "this.hostOrientation", "attr.tabindex": "this.tabIndex", "class": "this.hostClasses", "style.-ms-flex-order": "this.order", "style.order": "this.order" } }, ngImport: i0, template: `
|
|
224
252
|
<div *ngIf="shouldShowIcon('prev')" class="k-collapse-prev" (click)="togglePrevious()">
|
|
225
253
|
<kendo-icon-wrapper
|
|
226
254
|
size="xsmall"
|
|
@@ -266,6 +294,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
266
294
|
}] }, { type: i2.LocalizationService }, { type: i3.SplitterService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ariaRole: [{
|
|
267
295
|
type: HostBinding,
|
|
268
296
|
args: ['attr.role']
|
|
297
|
+
}], ariaLabel: [{
|
|
298
|
+
type: HostBinding,
|
|
299
|
+
args: ['attr.aria-label']
|
|
269
300
|
}], focused: [{
|
|
270
301
|
type: HostBinding,
|
|
271
302
|
args: ['class.k-focus']
|
|
@@ -288,4 +319,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
288
319
|
type: Input
|
|
289
320
|
}], index: [{
|
|
290
321
|
type: Input
|
|
322
|
+
}], htmlAttributes: [{
|
|
323
|
+
type: Input
|
|
291
324
|
}] } });
|
|
@@ -4,19 +4,18 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Renderer2, Input, Output } from '@angular/core';
|
|
6
6
|
import { NgIf } from '@angular/common';
|
|
7
|
+
import { SplitterService } from './splitter.service';
|
|
7
8
|
import * as i0 from "@angular/core";
|
|
9
|
+
import * as i1 from "./splitter.service";
|
|
8
10
|
/**
|
|
9
11
|
* Represents the pane component of the Splitter.
|
|
10
12
|
*/
|
|
11
13
|
export class SplitterPaneComponent {
|
|
12
|
-
constructor(element, renderer, cdr) {
|
|
14
|
+
constructor(element, renderer, cdr, splitterService) {
|
|
13
15
|
this.element = element;
|
|
14
16
|
this.renderer = renderer;
|
|
15
17
|
this.cdr = cdr;
|
|
16
|
-
|
|
17
|
-
* The value of the aria-label attribute of the auxiliary separator.
|
|
18
|
-
*/
|
|
19
|
-
this.separatorLabel = 'Splitter pane';
|
|
18
|
+
this.splitterService = splitterService;
|
|
20
19
|
/**
|
|
21
20
|
* Specifies if the user is allowed to resize the pane and provide space for other panes.
|
|
22
21
|
*/
|
|
@@ -94,6 +93,21 @@ export class SplitterPaneComponent {
|
|
|
94
93
|
get size() {
|
|
95
94
|
return this._size;
|
|
96
95
|
}
|
|
96
|
+
/**
|
|
97
|
+
* Sets the HTML attributes of the splitter bar.
|
|
98
|
+
* The property accepts string key-value based pairs.
|
|
99
|
+
* Attributes which are essential for certain functionalities cannot be changed.
|
|
100
|
+
*/
|
|
101
|
+
set splitterBarAttributes(attributes) {
|
|
102
|
+
this._splitterBarAttributes = attributes;
|
|
103
|
+
const splitterBar = this.splitterService.getPaneSplitterBar(this);
|
|
104
|
+
if (splitterBar) {
|
|
105
|
+
splitterBar.htmlAttributes = attributes;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
get splitterBarAttributes() {
|
|
109
|
+
return this._splitterBarAttributes;
|
|
110
|
+
}
|
|
97
111
|
/**
|
|
98
112
|
* @hidden
|
|
99
113
|
*/
|
|
@@ -162,8 +176,8 @@ export class SplitterPaneComponent {
|
|
|
162
176
|
this.renderer.setStyle(element, 'order', this.order);
|
|
163
177
|
}
|
|
164
178
|
}
|
|
165
|
-
SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
166
|
-
SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size",
|
|
179
|
+
SplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterPaneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.SplitterService }], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
SplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterPaneComponent, isStandalone: true, selector: "kendo-splitter-pane", inputs: { order: "order", size: "size", splitterBarAttributes: "splitterBarAttributes", splitterBarClass: "splitterBarClass", min: "min", max: "max", resizable: "resizable", collapsible: "collapsible", scrollable: "scrollable", collapsed: "collapsed", orientation: "orientation", containsSplitter: "containsSplitter", overlayContent: "overlayContent" }, outputs: { sizeChange: "sizeChange", collapsedChange: "collapsedChange" }, host: { properties: { "attr.role": "this.ariaRole", "class.k-pane": "this.hostClass", "class.k-pane-static": "this.staticPaneClass", "class.k-scrollable": "this.scrollablePaneClass" } }, exportAs: ["kendoSplitterPane"], ngImport: i0, template: `
|
|
167
181
|
<ng-container *ngIf="!collapsed"><ng-content></ng-content></ng-container>
|
|
168
182
|
<div *ngIf="overlayContent" class="k-splitter-overlay k-overlay"></div>
|
|
169
183
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
@@ -179,11 +193,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
179
193
|
standalone: true,
|
|
180
194
|
imports: [NgIf]
|
|
181
195
|
}]
|
|
182
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { order: [{
|
|
196
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.SplitterService }]; }, propDecorators: { order: [{
|
|
183
197
|
type: Input
|
|
184
198
|
}], size: [{
|
|
185
199
|
type: Input
|
|
186
|
-
}],
|
|
200
|
+
}], splitterBarAttributes: [{
|
|
201
|
+
type: Input
|
|
202
|
+
}], splitterBarClass: [{
|
|
187
203
|
type: Input
|
|
188
204
|
}], min: [{
|
|
189
205
|
type: Input
|
|
@@ -12,7 +12,7 @@ import { SplitterBarComponent } from './splitter-bar.component';
|
|
|
12
12
|
import { SplitterService } from './splitter.service';
|
|
13
13
|
import { isPresent } from '../common/util';
|
|
14
14
|
import { DraggableDirective } from '@progress/kendo-angular-common';
|
|
15
|
-
import { NgFor, NgIf, NgStyle } from '@angular/common';
|
|
15
|
+
import { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';
|
|
16
16
|
import * as i0 from "@angular/core";
|
|
17
17
|
import * as i1 from "./splitter.service";
|
|
18
18
|
import * as i2 from "@progress/kendo-angular-l10n";
|
|
@@ -97,6 +97,7 @@ export class SplitterComponent {
|
|
|
97
97
|
return this.direction;
|
|
98
98
|
}
|
|
99
99
|
set splitbars(splitbars) {
|
|
100
|
+
this.splitterService.splitterBars = splitbars ? splitbars.toArray() : [];
|
|
100
101
|
if (!isPresent(splitbars) || !isPresent(this.panes)) {
|
|
101
102
|
return;
|
|
102
103
|
}
|
|
@@ -109,9 +110,9 @@ export class SplitterComponent {
|
|
|
109
110
|
.sort((a, b) => a.order - b.order);
|
|
110
111
|
const elements = components.map(component => component.element.nativeElement);
|
|
111
112
|
panesArray.forEach((pane, i) => {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
const splitbar = splitBarsArray[i];
|
|
114
|
+
if (splitbar && pane.splitterBarAttributes) {
|
|
115
|
+
splitbar.htmlAttributes = pane.splitterBarAttributes;
|
|
115
116
|
}
|
|
116
117
|
});
|
|
117
118
|
elements.forEach(element => this.renderer.appendChild(this.element.nativeElement, element));
|
|
@@ -161,7 +162,7 @@ export class SplitterComponent {
|
|
|
161
162
|
}
|
|
162
163
|
}
|
|
163
164
|
SplitterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, deps: [{ token: i0.ElementRef }, { token: i1.SplitterService }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: SplitterPaneComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
164
|
-
SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
|
|
165
|
+
SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SplitterComponent, isStandalone: true, selector: "kendo-splitter", inputs: { orientation: "orientation", splitbarWidth: "splitbarWidth", resizeStep: "resizeStep", splitterBarClass: "splitterBarClass" }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.k-splitter": "this.hostClasses", "class.k-splitter-flex": "this.hostClasses", "class.k-splitter-horizontal": "this.horizontalHostClasses", "class.k-splitter-vertical": "this.verticalHostClasses", "attr.dir": "this.dir" } }, providers: [
|
|
165
166
|
SplitterService,
|
|
166
167
|
LocalizationService,
|
|
167
168
|
{
|
|
@@ -180,13 +181,14 @@ SplitterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
180
181
|
*ngIf="!last"
|
|
181
182
|
[index]="index"
|
|
182
183
|
[orientation]="orientation"
|
|
184
|
+
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
183
185
|
[ngStyle]="{
|
|
184
186
|
width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
|
|
185
187
|
height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
|
|
186
188
|
}">
|
|
187
189
|
</kendo-splitter-bar>
|
|
188
190
|
</ng-container>
|
|
189
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
191
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SplitterBarComponent, selector: "kendo-splitter-bar", inputs: ["orientation", "index", "htmlAttributes"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
190
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SplitterComponent, decorators: [{
|
|
191
193
|
type: Component,
|
|
192
194
|
args: [{
|
|
@@ -212,6 +214,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
212
214
|
*ngIf="!last"
|
|
213
215
|
[index]="index"
|
|
214
216
|
[orientation]="orientation"
|
|
217
|
+
[ngClass]="pane.splitterBarClass || splitterBarClass"
|
|
215
218
|
[ngStyle]="{
|
|
216
219
|
width: orientation === 'horizontal' ? splitbarWidth + 'px' : undefined,
|
|
217
220
|
height: orientation === 'vertical' ? splitbarWidth + 'px' : undefined
|
|
@@ -220,7 +223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
220
223
|
</ng-container>
|
|
221
224
|
`,
|
|
222
225
|
standalone: true,
|
|
223
|
-
imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle]
|
|
226
|
+
imports: [NgFor, NgIf, SplitterBarComponent, DraggableDirective, NgStyle, NgClass]
|
|
224
227
|
}]
|
|
225
228
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.SplitterService }, { type: i2.LocalizationService }, { type: i0.Renderer2 }, { type: i3.SplitterPaneComponent, decorators: [{
|
|
226
229
|
type: Optional
|
|
@@ -235,6 +238,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
235
238
|
type: Input
|
|
236
239
|
}], resizeStep: [{
|
|
237
240
|
type: Input
|
|
241
|
+
}], splitterBarClass: [{
|
|
242
|
+
type: Input
|
|
238
243
|
}], layoutChange: [{
|
|
239
244
|
type: Output
|
|
240
245
|
}], hostClasses: [{
|
|
@@ -122,6 +122,22 @@ export class SplitterService {
|
|
|
122
122
|
}
|
|
123
123
|
return this.panes[index];
|
|
124
124
|
}
|
|
125
|
+
paneByIndex(pane) {
|
|
126
|
+
if (!this.panes) {
|
|
127
|
+
return -1;
|
|
128
|
+
}
|
|
129
|
+
return this.panes.findIndex(splitterPane => splitterPane === pane);
|
|
130
|
+
}
|
|
131
|
+
getPaneSplitterBar(pane) {
|
|
132
|
+
if (!this.splitterBars) {
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
const paneIndex = this.paneByIndex(pane);
|
|
136
|
+
if (paneIndex < 0 || paneIndex >= this.splitterBars.length) {
|
|
137
|
+
return null;
|
|
138
|
+
}
|
|
139
|
+
return this.splitterBars[paneIndex];
|
|
140
|
+
}
|
|
125
141
|
configure({ panes, orientation, containerSize, direction }) {
|
|
126
142
|
this.panes = panes;
|
|
127
143
|
this.panes.forEach((pane, index) => {
|
|
@@ -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}}%)`,
|