@progress/kendo-angular-layout 19.1.2-develop.4 → 19.1.2-develop.6
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/avatar/avatar.component.d.ts +43 -47
- package/avatar/l10n/custom-messages.component.d.ts +9 -1
- package/avatar/l10n/messages.d.ts +1 -1
- package/avatar/models/fill.d.ts +1 -1
- package/avatar/models/rounded.d.ts +1 -1
- package/avatar/models/size.d.ts +1 -1
- package/avatar/models/theme-color.d.ts +1 -1
- package/avatar.module.d.ts +14 -2
- package/card/card-actions.component.d.ts +16 -15
- package/card/card-body.component.d.ts +9 -1
- package/card/card-footer.component.d.ts +9 -1
- package/card/card-header.component.d.ts +10 -1
- package/card/card.component.d.ts +19 -6
- package/card/directives/card-media.directive.d.ts +10 -1
- package/card/directives/card-separator.directive.d.ts +10 -4
- package/card/directives/card-subtitle.directive.d.ts +8 -1
- package/card/directives/card-title.directive.d.ts +8 -1
- package/card/models/actions-layout.d.ts +1 -8
- package/card/models/card-action.d.ts +4 -4
- package/card.module.d.ts +14 -2
- package/codemods/utils.js +0 -3
- package/common/orientation.d.ts +1 -1
- package/common/preventable-event.d.ts +3 -6
- package/directives.d.ts +13 -13
- package/drawer/drawer-container.component.d.ts +13 -1
- package/drawer/drawer-content.component.d.ts +9 -1
- package/drawer/drawer.component.d.ts +48 -47
- package/drawer/events/select-event.d.ts +5 -5
- package/drawer/models/drawer-animation.interface.d.ts +1 -2
- package/drawer/models/drawer-item-expand.interface.d.ts +1 -1
- package/drawer/models/drawer-item.interface.d.ts +15 -17
- package/drawer/models/mode.d.ts +4 -3
- package/drawer/models/position.d.ts +1 -6
- package/drawer/template-directives/drawer-template.directive.d.ts +18 -5
- package/drawer/template-directives/footer-template.directive.d.ts +11 -3
- package/drawer/template-directives/header-template.directive.d.ts +11 -3
- package/drawer/template-directives/item-template.directive.d.ts +19 -3
- package/drawer.module.d.ts +14 -2
- package/esm2022/avatar/avatar.component.mjs +43 -47
- package/esm2022/avatar/l10n/custom-messages.component.mjs +9 -1
- package/esm2022/avatar/l10n/messages.mjs +1 -1
- package/esm2022/avatar.module.mjs +14 -2
- package/esm2022/card/card-actions.component.mjs +16 -15
- package/esm2022/card/card-body.component.mjs +9 -1
- package/esm2022/card/card-footer.component.mjs +9 -1
- package/esm2022/card/card-header.component.mjs +10 -1
- package/esm2022/card/card.component.mjs +19 -6
- package/esm2022/card/directives/card-media.directive.mjs +10 -1
- package/esm2022/card/directives/card-separator.directive.mjs +10 -4
- package/esm2022/card/directives/card-subtitle.directive.mjs +8 -1
- package/esm2022/card/directives/card-title.directive.mjs +8 -1
- package/esm2022/card/models/card-action.mjs +4 -4
- package/esm2022/card.module.mjs +14 -2
- package/esm2022/common/preventable-event.mjs +3 -6
- package/esm2022/directives.mjs +13 -13
- package/esm2022/drawer/drawer-container.component.mjs +13 -1
- package/esm2022/drawer/drawer-content.component.mjs +9 -1
- package/esm2022/drawer/drawer.component.mjs +48 -47
- package/esm2022/drawer/events/select-event.mjs +5 -5
- package/esm2022/drawer/template-directives/drawer-template.directive.mjs +18 -5
- package/esm2022/drawer/template-directives/footer-template.directive.mjs +11 -3
- package/esm2022/drawer/template-directives/header-template.directive.mjs +11 -3
- package/esm2022/drawer/template-directives/item-template.directive.mjs +19 -3
- package/esm2022/drawer.module.mjs +14 -2
- package/esm2022/expansionpanel/events/action-event.mjs +2 -2
- package/esm2022/expansionpanel/expansionpanel-title.directive.mjs +12 -3
- package/esm2022/expansionpanel/expansionpanel.component.mjs +20 -27
- package/esm2022/expansionpanel.module.mjs +14 -2
- package/esm2022/gridlayout.module.mjs +14 -2
- package/esm2022/layout.module.mjs +10 -21
- package/esm2022/layouts/grid-layout.component.mjs +24 -17
- package/esm2022/layouts/gridlayout-item.component.mjs +16 -4
- package/esm2022/layouts/stack-layout.component.mjs +15 -6
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/panelbar/events/collapse-event.mjs +2 -2
- package/esm2022/panelbar/events/expand-event.mjs +2 -2
- package/esm2022/panelbar/events/item-click-event.mjs +3 -3
- package/esm2022/panelbar/events/select-event.mjs +2 -2
- package/esm2022/panelbar/events/state-change-event.mjs +2 -2
- package/esm2022/panelbar/panelbar-content.directive.mjs +12 -1
- package/esm2022/panelbar/panelbar-expand-mode.mjs +3 -4
- package/esm2022/panelbar/panelbar-item-template.directive.mjs +12 -1
- package/esm2022/panelbar/panelbar-item-title.directive.mjs +12 -19
- package/esm2022/panelbar/panelbar-item.component.mjs +26 -11
- package/esm2022/panelbar/panelbar.component.mjs +40 -17
- package/esm2022/panelbar.module.mjs +13 -8
- package/esm2022/splitter/splitter-pane.component.mjs +40 -20
- package/esm2022/splitter/splitter.component.mjs +25 -41
- package/esm2022/splitter.module.mjs +13 -5
- package/esm2022/stacklayout.module.mjs +14 -2
- package/esm2022/stepper/events/activate-event.mjs +5 -5
- package/esm2022/stepper/localization/custom-messages.component.mjs +9 -1
- package/esm2022/stepper/localization/messages.mjs +1 -1
- package/esm2022/stepper/stepper.component.mjs +32 -39
- package/esm2022/stepper/stepper.service.mjs +4 -4
- package/esm2022/stepper/template-directives/indicator-template.directive.mjs +10 -1
- package/esm2022/stepper/template-directives/label-template.directive.mjs +10 -1
- package/esm2022/stepper/template-directives/step-template.directive.mjs +12 -1
- package/esm2022/stepper.module.mjs +14 -2
- package/esm2022/tabstrip/directives/tab-content.directive.mjs +12 -24
- package/esm2022/tabstrip/directives/tab-title.directive.mjs +10 -29
- package/esm2022/tabstrip/events/select-event.mjs +3 -1
- package/esm2022/tabstrip/events/tabclose-event.mjs +2 -1
- package/esm2022/tabstrip/events/tabscroll-event.mjs +2 -2
- package/esm2022/tabstrip/localization/custom-messages.component.mjs +11 -2
- package/esm2022/tabstrip/localization/messages.mjs +3 -3
- package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +30 -17
- package/esm2022/tabstrip/tabstrip.component.mjs +49 -37
- package/esm2022/tabstrip.module.mjs +13 -7
- package/esm2022/tilelayout/reorder-event.mjs +3 -2
- package/esm2022/tilelayout/resize-event.mjs +3 -2
- package/esm2022/tilelayout/tilelayout-item-body.component.mjs +10 -1
- package/esm2022/tilelayout/tilelayout-item-header.component.mjs +12 -2
- package/esm2022/tilelayout/tilelayout-item.component.mjs +20 -10
- package/esm2022/tilelayout/tilelayout.component.mjs +31 -26
- package/esm2022/tilelayout.module.mjs +13 -7
- package/esm2022/timeline/templates/timeline-card-actions.directive.mjs +11 -2
- package/esm2022/timeline/templates/timeline-card-body.directive.mjs +11 -2
- package/esm2022/timeline/templates/timeline-card-header.directive.mjs +12 -2
- package/esm2022/timeline/timeline.component.mjs +3 -0
- package/esm2022/timeline.module.mjs +13 -4
- package/expansionpanel/events/action-event.d.ts +3 -3
- package/expansionpanel/expansionpanel-title.directive.d.ts +12 -3
- package/expansionpanel/expansionpanel.component.d.ts +20 -27
- package/expansionpanel.module.d.ts +14 -2
- package/fesm2022/progress-kendo-angular-layout.mjs +1072 -641
- package/gridlayout.module.d.ts +14 -2
- package/layout.module.d.ts +10 -21
- package/layouts/grid-layout.component.d.ts +24 -17
- package/layouts/gridlayout-item.component.d.ts +16 -4
- package/layouts/models/gridlayout-gap-settings.d.ts +3 -3
- package/layouts/models/gridlayout-row-col-size.d.ts +4 -4
- package/layouts/models/layout-align-settings.d.ts +3 -3
- package/layouts/models/layout-horizontal-align.d.ts +1 -1
- package/layouts/models/layout-vertical-align.d.ts +1 -1
- package/layouts/stack-layout.component.d.ts +15 -6
- package/package.json +9 -9
- package/panelbar/events/collapse-event.d.ts +2 -2
- package/panelbar/events/expand-event.d.ts +2 -2
- package/panelbar/events/item-click-event.d.ts +3 -3
- package/panelbar/events/select-event.d.ts +2 -2
- package/panelbar/events/state-change-event.d.ts +2 -2
- package/panelbar/panelbar-content.directive.d.ts +12 -1
- package/panelbar/panelbar-expand-mode.d.ts +3 -4
- package/panelbar/panelbar-item-model.d.ts +6 -6
- package/panelbar/panelbar-item-template.directive.d.ts +12 -1
- package/panelbar/panelbar-item-title.directive.d.ts +12 -19
- package/panelbar/panelbar-item.component.d.ts +24 -9
- package/panelbar/panelbar.component.d.ts +40 -17
- package/panelbar.module.d.ts +13 -8
- package/splitter/splitter-pane.component.d.ts +40 -20
- package/splitter/splitter.component.d.ts +24 -40
- package/splitter.module.d.ts +13 -5
- package/stacklayout.module.d.ts +14 -2
- package/stepper/events/activate-event.d.ts +5 -5
- package/stepper/localization/custom-messages.component.d.ts +9 -1
- package/stepper/localization/messages.d.ts +1 -1
- package/stepper/models/orientation.d.ts +1 -3
- package/stepper/models/step-predicate.d.ts +5 -6
- package/stepper/models/step-type.d.ts +1 -4
- package/stepper/models/stepper-step.interface.d.ts +12 -12
- package/stepper/stepper.component.d.ts +32 -39
- package/stepper/template-directives/indicator-template.directive.d.ts +10 -1
- package/stepper/template-directives/label-template.directive.d.ts +10 -1
- package/stepper/template-directives/step-template.directive.d.ts +12 -1
- package/stepper.module.d.ts +14 -2
- package/tabstrip/directives/tab-content.directive.d.ts +12 -24
- package/tabstrip/directives/tab-title.directive.d.ts +10 -29
- package/tabstrip/events/select-event.d.ts +3 -1
- package/tabstrip/events/tabclose-event.d.ts +2 -1
- package/tabstrip/events/tabscroll-event.d.ts +2 -2
- package/tabstrip/localization/custom-messages.component.d.ts +11 -2
- package/tabstrip/localization/messages.d.ts +3 -3
- package/tabstrip/models/scroll-buttons-visibility.d.ts +1 -1
- package/tabstrip/models/scrollable-settings.d.ts +17 -22
- package/tabstrip/models/size.d.ts +1 -1
- package/tabstrip/models/tab-alignment.d.ts +1 -1
- package/tabstrip/models/tab-position.d.ts +1 -1
- package/tabstrip/models/tabstrip-tab.component.d.ts +30 -17
- package/tabstrip/tabstrip.component.d.ts +41 -29
- package/tabstrip.module.d.ts +13 -7
- package/tilelayout/models/flowmode.type.d.ts +7 -8
- package/tilelayout/models/gap.interface.d.ts +3 -5
- package/tilelayout/reorder-event.d.ts +3 -2
- package/tilelayout/resize-event.d.ts +3 -2
- package/tilelayout/tilelayout-item-body.component.d.ts +10 -1
- package/tilelayout/tilelayout-item-header.component.d.ts +12 -2
- package/tilelayout/tilelayout-item.component.d.ts +20 -10
- package/tilelayout/tilelayout.component.d.ts +31 -26
- package/tilelayout.module.d.ts +13 -7
- package/timeline/events/navigation-direction.d.ts +6 -0
- package/timeline/models/anchor-target.d.ts +6 -0
- package/timeline/templates/timeline-card-actions.directive.d.ts +11 -2
- package/timeline/templates/timeline-card-body.directive.d.ts +11 -2
- package/timeline/templates/timeline-card-header.directive.d.ts +12 -2
- package/timeline/timeline.component.d.ts +3 -0
- package/timeline.module.d.ts +13 -4
@@ -17,20 +17,22 @@ import * as i0 from "@angular/core";
|
|
17
17
|
* Represents the [Kendo UI Stepper component for Angular]({% slug overview_stepper %}).
|
18
18
|
*
|
19
19
|
* @example
|
20
|
-
* ```ts
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*
|
24
|
-
*
|
25
|
-
*
|
26
|
-
*
|
20
|
+
* ```ts
|
21
|
+
* @Component({
|
22
|
+
* selector: 'my-app',
|
23
|
+
* template: `
|
24
|
+
* <kendo-stepper [steps]="steps">
|
25
|
+
* </kendo-stepper>
|
26
|
+
* `
|
27
27
|
* })
|
28
28
|
* class AppComponent {
|
29
|
-
*
|
30
|
-
*
|
31
|
-
*
|
29
|
+
* public steps: Array<StepperStep> = [
|
30
|
+
* { label: 'Step One' }, { label: 'Step Two' }, { label: 'Step Three' }
|
31
|
+
* ];
|
32
32
|
* }
|
33
33
|
* ```
|
34
|
+
* @remarks
|
35
|
+
* Supported children components are: {@link StepperCustomMessagesComponent}.
|
34
36
|
*/
|
35
37
|
export declare class StepperComponent implements OnChanges, OnDestroy {
|
36
38
|
private renderer;
|
@@ -45,10 +47,7 @@ export declare class StepperComponent implements OnChanges, OnDestroy {
|
|
45
47
|
/**
|
46
48
|
* Specifies the type of the steps in the Stepper.
|
47
49
|
*
|
48
|
-
*
|
49
|
-
* * (Default) `indicator`
|
50
|
-
* * `label`
|
51
|
-
* * `full`
|
50
|
+
* @default 'indicator'
|
52
51
|
*/
|
53
52
|
stepType: StepType;
|
54
53
|
/**
|
@@ -61,65 +60,59 @@ export declare class StepperComponent implements OnChanges, OnDestroy {
|
|
61
60
|
* Specifies the orientation of the Stepper
|
62
61
|
* ([see example]({% slug orientation_stepper %})).
|
63
62
|
*
|
64
|
-
*
|
65
|
-
* * (Default) `horizontal`
|
66
|
-
* * `vertical`
|
63
|
+
* @default 'horizontal'
|
67
64
|
*/
|
68
65
|
orientation: StepperOrientation;
|
69
66
|
/**
|
70
|
-
*
|
67
|
+
* Specifies the index of the current step.
|
71
68
|
*/
|
72
69
|
set currentStep(value: number);
|
73
70
|
get currentStep(): number;
|
74
71
|
/**
|
75
|
-
*
|
76
|
-
* ([see example]({% slug step_appearance_stepper %}))
|
72
|
+
* Specifies the collection of steps that will be rendered in the Stepper
|
73
|
+
* ([see example]({% slug step_appearance_stepper %})).
|
77
74
|
*/
|
78
75
|
set steps(steps: any[]);
|
79
76
|
get steps(): any[];
|
80
77
|
/**
|
81
|
-
*
|
82
|
-
*
|
78
|
+
* Specifies an SVG icon to be rendered inside the step indicator instead of the default numeric or text content.
|
79
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
83
80
|
*/
|
84
81
|
set svgIcon(icon: SVGIcon);
|
85
82
|
get svgIcon(): SVGIcon;
|
86
83
|
/**
|
87
|
-
*
|
88
|
-
*
|
84
|
+
* Specifies an SVG icon to be rendered for the success icon.
|
85
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
89
86
|
*/
|
90
87
|
successSVGIcon: SVGIcon;
|
91
88
|
/**
|
92
|
-
*
|
93
|
-
*
|
89
|
+
* Specifies an SVG icon to be rendered for the error icon.
|
90
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
94
91
|
*/
|
95
92
|
errorSVGIcon: SVGIcon;
|
96
93
|
/**
|
97
|
-
* Specifies
|
98
|
-
*
|
94
|
+
* Specifies an SVG icon that will be rendered inside the step for valid previous steps.
|
95
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
99
96
|
*/
|
100
97
|
successIcon: string;
|
101
98
|
/**
|
102
|
-
|
103
|
-
|
104
|
-
|
99
|
+
* Specifies an SVG icon that will be rendered inside the step for invalid previous steps.
|
100
|
+
* You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
|
101
|
+
*/
|
105
102
|
errorIcon: string;
|
106
103
|
/**
|
107
|
-
* Specifies the duration of the progress indicator animation in milliseconds.
|
104
|
+
* Specifies the duration of the progress indicator animation in milliseconds.
|
108
105
|
*
|
109
|
-
*
|
110
|
-
* * Boolean
|
111
|
-
* * (Default) `true`
|
112
|
-
* * false
|
113
|
-
* * Number
|
106
|
+
* @default true
|
114
107
|
*/
|
115
108
|
animation?: boolean | number;
|
116
109
|
/**
|
117
|
-
* Fires when a step is about to be activated.
|
110
|
+
* Fires when a step is about to be activated. You can prevent this event.
|
118
111
|
*/
|
119
112
|
activate: EventEmitter<StepperActivateEvent>;
|
120
113
|
/**
|
121
114
|
* Fires when the `currentStep` property of the component was updated.
|
122
|
-
*
|
115
|
+
* Use this event to provide a two-way binding for the `currentStep` property.
|
123
116
|
*/
|
124
117
|
currentStepChange: EventEmitter<number>;
|
125
118
|
/**
|
@@ -5,9 +5,18 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Use this template to define custom content for the step indicator.
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
10
10
|
* with the `kendoStepperIndicatorTemplate` directive inside the `<kendo-stepper>` tag.
|
11
|
+
*
|
12
|
+
* @example
|
13
|
+
* ```html
|
14
|
+
* <kendo-stepper>
|
15
|
+
* <ng-template kendoStepperIndicatorTemplate let-step="step" let-index="index">
|
16
|
+
* <span>{{ index + 1 }}</span>
|
17
|
+
* </ng-template>
|
18
|
+
* </kendo-stepper>
|
19
|
+
* ```
|
11
20
|
*/
|
12
21
|
export declare class StepperIndicatorTemplateDirective {
|
13
22
|
templateRef: TemplateRef<any>;
|
@@ -5,9 +5,18 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Use this template to define custom content for the step label.
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
10
10
|
* with the `kendoStepperLabelTemplate` directive inside the `<kendo-stepper>` tag.
|
11
|
+
*
|
12
|
+
* @example
|
13
|
+
* ```html
|
14
|
+
* <kendo-stepper>
|
15
|
+
* <ng-template kendoStepperLabelTemplate let-step="step" let-index="index">
|
16
|
+
* <span class="custom-label">{{ step.label }}</span>
|
17
|
+
* </ng-template>
|
18
|
+
* </kendo-stepper>
|
19
|
+
* ```
|
11
20
|
*/
|
12
21
|
export declare class StepperLabelTemplateDirective {
|
13
22
|
templateRef: TemplateRef<any>;
|
@@ -5,9 +5,20 @@
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Use this template to define custom content for the entire step.
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
10
10
|
* with the `kendoStepperStepTemplate` directive inside the `<kendo-stepper>` tag.
|
11
|
+
*
|
12
|
+
* @example
|
13
|
+
* ```html
|
14
|
+
* <kendo-stepper>
|
15
|
+
* <ng-template kendoStepperStepTemplate let-step="step" let-index="index">
|
16
|
+
* <div class="custom-step">
|
17
|
+
* <span>{{ step.label }}</span>
|
18
|
+
* </div>
|
19
|
+
* </ng-template>
|
20
|
+
* </kendo-stepper>
|
21
|
+
* ```
|
11
22
|
*/
|
12
23
|
export declare class StepperStepTemplateDirective {
|
13
24
|
templateRef: TemplateRef<any>;
|
package/stepper.module.d.ts
CHANGED
@@ -9,8 +9,20 @@ import * as i3 from "./stepper/template-directives/indicator-template.directive"
|
|
9
9
|
import * as i4 from "./stepper/template-directives/label-template.directive";
|
10
10
|
import * as i5 from "./stepper/template-directives/step-template.directive";
|
11
11
|
/**
|
12
|
-
*
|
13
|
-
*
|
12
|
+
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Stepper component.
|
13
|
+
*
|
14
|
+
* Use this module to add the Stepper component to your NgModule-based Angular application.
|
15
|
+
*
|
16
|
+
* @example
|
17
|
+
* ```typescript
|
18
|
+
* import { StepperModule } from '@progress/kendo-angular-layout';
|
19
|
+
* import { NgModule } from '@angular/core';
|
20
|
+
*
|
21
|
+
* @NgModule({
|
22
|
+
* imports: [StepperModule]
|
23
|
+
* })
|
24
|
+
* export class AppModule { }
|
25
|
+
* ```
|
14
26
|
*/
|
15
27
|
export declare class StepperModule {
|
16
28
|
static ɵfac: i0.ɵɵFactoryDeclaration<StepperModule, never>;
|
@@ -6,32 +6,20 @@ import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
8
|
* Represents the content template of the Kendo UI TabStrip.
|
9
|
-
* To define the template, nest
|
9
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoTabContent` directive inside the component tag.
|
10
10
|
*
|
11
11
|
* @example
|
12
|
-
* ```
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
* <
|
18
|
-
*
|
19
|
-
*
|
20
|
-
*
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*
|
24
|
-
* <kendo-tabstrip-tab title="Sofia">
|
25
|
-
* <ng-template kendoTabContent>
|
26
|
-
* <h3>Content 2</h3>
|
27
|
-
* </ng-template>
|
28
|
-
* </kendo-tabstrip-tab>
|
29
|
-
* </kendo-tabstrip>
|
30
|
-
* `
|
31
|
-
* })
|
32
|
-
*
|
33
|
-
* class AppComponent {}
|
34
|
-
*
|
12
|
+
* ```html
|
13
|
+
* <kendo-tabstrip>
|
14
|
+
* <kendo-tabstrip-tab title="First Tab">
|
15
|
+
* <ng-template kendoTabContent>
|
16
|
+
* <div class="tab-content">
|
17
|
+
* <h2>Welcome</h2>
|
18
|
+
* <p>This is the content of the first tab.</p>
|
19
|
+
* </div>
|
20
|
+
* </ng-template>
|
21
|
+
* </kendo-tabstrip-tab>
|
22
|
+
* </kendo-tabstrip>
|
35
23
|
* ```
|
36
24
|
*/
|
37
25
|
export declare class TabContentDirective {
|
@@ -6,37 +6,18 @@ import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
8
|
* Represents the title template of the Kendo UI TabStrip.
|
9
|
-
* To define the template, nest
|
10
|
-
*
|
11
|
-
* > The `kendoTabTitle` directive overrides the TabStripTab [title]({% slug api_layout_tabstriptabcomponent %}#toc-title) option.
|
9
|
+
* To define the template, nest an `<ng-template>` tag with the `kendoTabTitle` directive inside the component tag.
|
10
|
+
* The `kendoTabTitle` directive overrides the TabStripTab [`title`]({% slug api_layout_tabstriptabcomponent %}#toc-title) option.
|
12
11
|
*
|
13
12
|
* @example
|
14
|
-
* ```
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*
|
20
|
-
*
|
21
|
-
*
|
22
|
-
* <h4>Custom Title</h4>
|
23
|
-
* </ng-template>
|
24
|
-
* <ng-template kendoTabContent>
|
25
|
-
* <h3>Content 1</h3>
|
26
|
-
* </ng-template>
|
27
|
-
* </kendo-tabstrip-tab>
|
28
|
-
*
|
29
|
-
* <kendo-tabstrip-tab title="Sofia">
|
30
|
-
* <ng-template kendoTabContent>
|
31
|
-
* <h3>Content 2</h3>
|
32
|
-
* </ng-template>
|
33
|
-
* </kendo-tabstrip-tab>
|
34
|
-
* </kendo-tabstrip>
|
35
|
-
* `
|
36
|
-
* })
|
37
|
-
*
|
38
|
-
* class AppComponent {}
|
39
|
-
*
|
13
|
+
* ```html
|
14
|
+
* <kendo-tabstrip>
|
15
|
+
* <kendo-tabstrip-tab>
|
16
|
+
* <ng-template kendoTabTitle>
|
17
|
+
* <span class="custom-title">My Custom Title</span>
|
18
|
+
* </ng-template>
|
19
|
+
* </kendo-tabstrip-tab>
|
20
|
+
* </kendo-tabstrip>
|
40
21
|
* ```
|
41
22
|
*/
|
42
23
|
export declare class TabTitleDirective {
|
@@ -5,7 +5,7 @@
|
|
5
5
|
import { PreventableEvent } from "@progress/kendo-angular-common";
|
6
6
|
/**
|
7
7
|
* Arguments for the `select` event of the TabStrip.
|
8
|
-
* The `select` event fires when
|
8
|
+
* The `select` event fires when tab is selected (clicked).
|
9
9
|
*/
|
10
10
|
export declare class SelectEvent extends PreventableEvent {
|
11
11
|
index: number;
|
@@ -14,6 +14,8 @@ export declare class SelectEvent extends PreventableEvent {
|
|
14
14
|
* Constructs the event arguments for the `select` event.
|
15
15
|
* @param index - The index of the selected tab.
|
16
16
|
* @param title - The title of the selected tab.
|
17
|
+
*
|
18
|
+
* @hidden
|
17
19
|
*/
|
18
20
|
constructor(index: number, title: string);
|
19
21
|
}
|
@@ -5,7 +5,7 @@
|
|
5
5
|
import { TabStripTabComponent } from "../models/tabstrip-tab.component";
|
6
6
|
/**
|
7
7
|
* Arguments for the `tabClose` event of the TabStrip.
|
8
|
-
* The `tabClose` event fires when
|
8
|
+
* The `tabClose` event fires when a tab is closed (clicked on the close button).
|
9
9
|
*
|
10
10
|
*/
|
11
11
|
export declare class TabCloseEvent {
|
@@ -15,6 +15,7 @@ export declare class TabCloseEvent {
|
|
15
15
|
* Constructs the event arguments for the `tabClose` event.
|
16
16
|
* @param index - The index of the closed tab.
|
17
17
|
* @param tab - The closed tab instance
|
18
|
+
* @hidden
|
18
19
|
*/
|
19
20
|
constructor(index: number, tab: TabStripTabComponent);
|
20
21
|
}
|
@@ -5,12 +5,12 @@
|
|
5
5
|
import { PreventableEvent } from "@progress/kendo-angular-common";
|
6
6
|
/**
|
7
7
|
* Arguments for the `tabScroll` event of the TabStrip.
|
8
|
-
* The `tabScroll` event fires when the tabs
|
8
|
+
* The `tabScroll` event fires when you scroll the tabs.
|
9
9
|
*
|
10
10
|
*/
|
11
11
|
export declare class TabScrollEvent extends PreventableEvent {
|
12
12
|
/**
|
13
|
-
* The DOM event that
|
13
|
+
* The original DOM event that caused the tab scroll.
|
14
14
|
*/
|
15
15
|
originalEvent: any;
|
16
16
|
/**
|
@@ -6,8 +6,17 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
6
6
|
import { TabStripMessages } from './messages';
|
7
7
|
import * as i0 from "@angular/core";
|
8
8
|
/**
|
9
|
-
*
|
10
|
-
* ([see example]({% slug rtl_layout %})).
|
9
|
+
* Represents the custom messages component for the TabStrip.
|
10
|
+
* It allows you to override the default messages used in the TabStrip component ([see example]({% slug rtl_layout %})).
|
11
|
+
*
|
12
|
+
* ```html
|
13
|
+
* <kendo-tabstrip>
|
14
|
+
* <kendo-tabstrip-messages
|
15
|
+
* closeTitle="Close this tab"
|
16
|
+
* previousTabButton="Go to previous tab"
|
17
|
+
* </kendo-tabstrip-messages>
|
18
|
+
* </kendo-tabstrip>
|
19
|
+
* ```
|
11
20
|
*/
|
12
21
|
export declare class TabStripCustomMessagesComponent extends TabStripMessages {
|
13
22
|
protected service: LocalizationService;
|
@@ -9,15 +9,15 @@ import * as i0 from "@angular/core";
|
|
9
9
|
*/
|
10
10
|
export declare class TabStripMessages extends ComponentMessages {
|
11
11
|
/**
|
12
|
-
*
|
12
|
+
* Sets the title for the **Close** button in the TabStrip tab.
|
13
13
|
*/
|
14
14
|
closeTitle: string;
|
15
15
|
/**
|
16
|
-
*
|
16
|
+
* Sets the title for the **Previous Tab** button when the TabStrip is scrollable.
|
17
17
|
*/
|
18
18
|
previousTabButton: string;
|
19
19
|
/**
|
20
|
-
*
|
20
|
+
* Sets the title for the **Next Tab** button when the TabStrip is scrollable.
|
21
21
|
*/
|
22
22
|
nextTabButton: string;
|
23
23
|
static ɵfac: i0.ɵɵFactoryDeclaration<TabStripMessages, never>;
|
@@ -3,6 +3,6 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
*
|
6
|
+
* Defines the visibility of the scroll buttons in a TabStrip component.
|
7
7
|
*/
|
8
8
|
export type TabStripScrollButtonsVisibility = 'hidden' | 'visible' | 'auto';
|
@@ -5,63 +5,58 @@
|
|
5
5
|
import { SVGIcon } from "@progress/kendo-svg-icons";
|
6
6
|
import { TabStripScrollButtonsVisibility } from "./scroll-buttons-visibility";
|
7
7
|
/**
|
8
|
-
*
|
8
|
+
* Configures the scrollable functionality of the TabStrip. ([See example]({% slug scrollable_tabstrip %})).
|
9
9
|
*/
|
10
10
|
export interface TabStripScrollableSettings {
|
11
11
|
/**
|
12
12
|
* Determines whether the TabStrip will be scrollable.
|
13
|
+
*
|
13
14
|
* @default true
|
14
15
|
*/
|
15
16
|
enabled?: boolean;
|
16
17
|
/**
|
17
|
-
*
|
18
|
-
* - 'auto'(default) - The scroll buttons will be rendered only when the tabs list overflows its container.
|
19
|
-
* - 'visible' - The scroll buttons will be always visible.
|
20
|
-
* - 'hidden' - No scroll buttons will be rendered.
|
18
|
+
* Controls when the TabStrip scroll buttons appear.
|
21
19
|
*/
|
22
20
|
scrollButtons?: TabStripScrollButtonsVisibility;
|
23
21
|
/**
|
24
|
-
*
|
22
|
+
* Enables scrolling with the mouse wheel, touchpad, and touch gestures on touch screens.
|
25
23
|
* @default true
|
26
24
|
*/
|
27
25
|
mouseScroll?: boolean;
|
28
26
|
/**
|
29
|
-
* Sets the tab list
|
27
|
+
* Sets how many pixels the tab list scrolls when you click the scroll buttons.
|
30
28
|
* @default 100
|
31
29
|
*/
|
32
30
|
buttonScrollSpeed?: number;
|
33
31
|
/**
|
34
|
-
*
|
35
|
-
*
|
36
|
-
*
|
32
|
+
* Sets custom CSS classes for the previous scroll button icon.
|
33
|
+
* You can define a single class or multiple classes separated by spaces.
|
34
|
+
* Use this to apply custom icons.
|
37
35
|
*/
|
38
36
|
prevButtonIcon?: string;
|
39
37
|
/**
|
40
|
-
*
|
41
|
-
*
|
42
|
-
*
|
38
|
+
* Sets custom CSS classes for the next scroll button icon.
|
39
|
+
* You can define a single class or multiple classes separated by spaces.
|
40
|
+
* Use this to apply custom icons.
|
43
41
|
*/
|
44
42
|
nextButtonIcon?: string;
|
45
43
|
/**
|
46
|
-
*
|
47
|
-
*
|
44
|
+
* Sets an SVG icon for the previous button.
|
45
|
+
* You can use an [existing Kendo SVG icon](slug:svgicon_list) or provide a custom one.
|
48
46
|
*/
|
49
47
|
prevSVGButtonIcon?: SVGIcon;
|
50
48
|
/**
|
51
|
-
*
|
52
|
-
*
|
49
|
+
* Sets an SVG icon for the next button.
|
50
|
+
* You can use an [existing Kendo SVG icon](slug:svgicon_list) or provide a custom one.
|
53
51
|
*/
|
54
52
|
nextSVGButtonIcon?: SVGIcon;
|
55
53
|
/**
|
56
|
-
*
|
57
|
-
* - 'start'—The scroll buttons will be rendered at the start before all tabs.
|
58
|
-
* - 'end'—The scroll buttons will be rendered at the end after all tabs.
|
59
|
-
* - 'split'(default)—The scroll buttons will be rendered at each side of the tabs.
|
54
|
+
* Specifies where to position the scroll buttons.
|
60
55
|
*/
|
61
56
|
scrollButtonsPosition?: TabStripScrollButtonsPosition;
|
62
57
|
}
|
63
58
|
/**
|
64
|
-
*
|
59
|
+
* Specifies where to position the scroll buttons.
|
65
60
|
*/
|
66
61
|
export type TabStripScrollButtonsPosition = 'start' | 'end' | 'split';
|
67
62
|
/**
|
@@ -3,6 +3,6 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
* Specifies the
|
6
|
+
* Specifies the size of the TabStrip ([see example](slug:sizing_tabstrip)).
|
7
7
|
*/
|
8
8
|
export type TabStripSize = 'small' | 'medium' | 'large' | 'none';
|
@@ -3,7 +3,7 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
* Specifies
|
6
|
+
* Specifies how to align the tabs
|
7
7
|
* ([see example](slug:tabs_tabstrip#toc-tab-alignment)).
|
8
8
|
*/
|
9
9
|
export type TabAlignment = 'start' | 'end' | 'center' | 'justify' | 'stretched';
|
@@ -3,7 +3,7 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
/**
|
6
|
-
* Specifies
|
6
|
+
* Specifies where to position the tabs
|
7
7
|
* ([see example](slug:tabs_tabstrip#toc-tab-position)).
|
8
8
|
*/
|
9
9
|
export type TabPosition = 'top' | 'left' | 'right' | 'bottom';
|
@@ -9,52 +9,65 @@ import { TabTitleDirective } from '../directives/tab-title.directive';
|
|
9
9
|
import { TabTemplateDirective } from '../directives/tab.directive';
|
10
10
|
import * as i0 from "@angular/core";
|
11
11
|
/**
|
12
|
-
* Represents the
|
12
|
+
* Represents the Kendo UI TabStrip tab component.
|
13
|
+
* Use this component to define individual tabs within a TabStrip.
|
14
|
+
*
|
15
|
+
* @example
|
16
|
+
* ```html
|
17
|
+
* <kendo-tabstrip>
|
18
|
+
* <kendo-tabstrip-tab title="Home" [selected]="true">
|
19
|
+
* <ng-template kendoTabContent>
|
20
|
+
* Home content here
|
21
|
+
* </ng-template>
|
22
|
+
* </kendo-tabstrip-tab>
|
23
|
+
* </kendo-tabstrip>
|
24
|
+
* ```
|
13
25
|
*/
|
14
26
|
export declare class TabStripTabComponent {
|
15
27
|
/**
|
16
|
-
* Sets the tab
|
28
|
+
* Sets the title text for the tab ([see example](slug:tabs_tabstrip#toc-tab-titles)).
|
17
29
|
*/
|
18
30
|
title: string;
|
19
31
|
/**
|
20
|
-
*
|
32
|
+
* Disables the tab and prevents user interaction ([see example]({% slug tabs_tabstrip %}#toc-disabled-tabs)).
|
21
33
|
*
|
22
|
-
*
|
34
|
+
* @default false
|
23
35
|
*/
|
24
36
|
disabled: boolean;
|
25
37
|
/**
|
26
|
-
*
|
27
|
-
*
|
38
|
+
* Specifies the CSS classes to apply to the `tab` element.
|
39
|
+
* Accepts the same values as [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
28
40
|
*/
|
29
41
|
cssClass: any;
|
30
42
|
/**
|
31
|
-
*
|
32
|
-
*
|
43
|
+
* Specifies the CSS styles to apply to the `tab` element.
|
44
|
+
* Accepts the same values as [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
33
45
|
*/
|
34
46
|
cssStyle: any;
|
35
47
|
/**
|
36
|
-
*
|
48
|
+
* Selects the tab when the TabStrip loads
|
37
49
|
* ([see example](slug:tabs_tabstrip#toc-selected-tab)).
|
38
50
|
*/
|
39
51
|
selected: boolean;
|
40
52
|
/**
|
41
|
-
*
|
42
|
-
* This
|
53
|
+
* Shows a close button inside the tab when set to `true`.
|
54
|
+
* This setting overrides the TabStrip `closable` option.
|
43
55
|
*/
|
44
56
|
closable: boolean;
|
45
57
|
/**
|
46
|
-
*
|
47
|
-
* This
|
58
|
+
* Sets the name of an existing font icon in the Kendo UI theme for the close button.
|
59
|
+
* This setting overrides the TabStrip `closeIcon` option.
|
48
60
|
*/
|
49
61
|
closeIcon: string;
|
50
62
|
/**
|
51
|
-
*
|
52
|
-
*
|
63
|
+
* Sets custom CSS classes for the close button icon.
|
64
|
+
* You can define a single class or multiple classes separated by spaces.
|
65
|
+
* This setting overrides the TabStrip `closeIcon` option.
|
53
66
|
*/
|
54
67
|
closeIconClass: string;
|
55
68
|
/**
|
56
|
-
*
|
57
|
-
*
|
69
|
+
* Sets an SVG icon for the close button.
|
70
|
+
* You can use an [existing Kendo SVG icon](slug:svgicon_list) or provide a custom one.
|
58
71
|
*/
|
59
72
|
closeSVGIcon: SVGIcon;
|
60
73
|
get tabContent(): TabContentDirective;
|