@progress/kendo-angular-navigation 19.1.2-develop.3 → 19.1.2-develop.5
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/actionsheet/actionsheet.component.d.ts +18 -17
- package/actionsheet/models/actionsheet-action-layout.d.ts +15 -13
- package/actionsheet/models/actionsheet-action.d.ts +9 -30
- package/actionsheet/models/actionsheet-item.interface.d.ts +13 -18
- package/actionsheet/models/animation.d.ts +4 -2
- package/actionsheet/models/group.d.ts +6 -0
- package/actionsheet/models/item-click.event.d.ts +5 -3
- package/actionsheet/templates/actionsheet-template.d.ts +10 -1
- package/actionsheet/templates/content-template.directive.d.ts +10 -1
- package/actionsheet/templates/footer-template.directive.d.ts +10 -1
- package/actionsheet/templates/header-template.directive.d.ts +10 -1
- package/actionsheet/templates/item-template.directive.d.ts +10 -1
- package/actionsheet.module.d.ts +5 -18
- package/appbar/appbar-section.component.d.ts +9 -13
- package/appbar/appbar-spacer.component.d.ts +13 -21
- package/appbar/appbar.component.d.ts +19 -25
- package/appbar/models/position-mode.d.ts +5 -6
- package/appbar/models/position.d.ts +3 -8
- package/appbar/models/theme-color.d.ts +6 -7
- package/appbar.module.d.ts +5 -18
- package/bottomnavigation/bottomnavigation.component.d.ts +17 -31
- package/bottomnavigation/events/select-event.d.ts +5 -5
- package/bottomnavigation/templates/item-template.directive.d.ts +11 -3
- package/bottomnavigation/types/bottomnavigation-fill.d.ts +3 -3
- package/bottomnavigation/types/bottomnavigation-item-flow.d.ts +3 -3
- package/bottomnavigation/types/bottomnavigation-item.d.ts +11 -10
- package/bottomnavigation/types/bottomnavigation-position-mode.d.ts +3 -3
- package/bottomnavigation/types/bottomnavigation-theme-color.d.ts +12 -12
- package/bottomnavigation.module.d.ts +6 -18
- package/breadcrumb/breadcrumb.component.d.ts +14 -19
- package/breadcrumb/models/breadcrumb-item.interface.d.ts +10 -11
- package/breadcrumb/models/breadcrumb-size.d.ts +1 -2
- package/breadcrumb/models/collapse-mode.d.ts +5 -3
- package/breadcrumb/template-directives/item-template.directive.d.ts +12 -1
- package/breadcrumb.module.d.ts +6 -18
- package/directives.d.ts +94 -5
- package/esm2022/actionsheet/actionsheet.component.mjs +18 -17
- package/esm2022/actionsheet/models/item-click.event.mjs +5 -3
- package/esm2022/actionsheet/templates/actionsheet-template.mjs +10 -1
- package/esm2022/actionsheet/templates/content-template.directive.mjs +10 -1
- package/esm2022/actionsheet/templates/footer-template.directive.mjs +10 -1
- package/esm2022/actionsheet/templates/header-template.directive.mjs +10 -1
- package/esm2022/actionsheet/templates/item-template.directive.mjs +10 -1
- package/esm2022/actionsheet.module.mjs +5 -18
- package/esm2022/appbar/appbar-section.component.mjs +9 -13
- package/esm2022/appbar/appbar-spacer.component.mjs +13 -21
- package/esm2022/appbar/appbar.component.mjs +19 -25
- package/esm2022/appbar.module.mjs +5 -18
- package/esm2022/bottomnavigation/bottomnavigation.component.mjs +17 -31
- package/esm2022/bottomnavigation/events/select-event.mjs +5 -5
- package/esm2022/bottomnavigation/templates/item-template.directive.mjs +11 -3
- package/esm2022/bottomnavigation/types/bottomnavigation-theme-color.mjs +12 -12
- package/esm2022/bottomnavigation.module.mjs +6 -18
- package/esm2022/breadcrumb/breadcrumb.component.mjs +14 -19
- package/esm2022/breadcrumb/template-directives/item-template.directive.mjs +12 -1
- package/esm2022/breadcrumb.module.mjs +6 -18
- package/esm2022/directives.mjs +94 -5
- package/esm2022/navigation.module.mjs +6 -18
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-navigation.mjs +297 -240
- package/navigation.module.d.ts +6 -18
- package/package.json +7 -7
|
@@ -13,7 +13,13 @@ import { ActionSheetViewComponent } from './actionsheet-view.component';
|
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
/**
|
|
15
15
|
* Represents the [Kendo UI ActionSheet component for Angular](slug:overview_actionsheet).
|
|
16
|
-
*
|
|
16
|
+
* Use this component to display a set of choices related to a user-initiated task in a modal sheet that slides up from the bottom of the screen.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```html
|
|
20
|
+
* <kendo-actionsheet [items]="actionItems" [expanded]="true">
|
|
21
|
+
* </kendo-actionsheet>
|
|
22
|
+
* ```
|
|
17
23
|
*/
|
|
18
24
|
export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, OnChanges {
|
|
19
25
|
element: ElementRef;
|
|
@@ -35,51 +41,47 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, O
|
|
|
35
41
|
*/
|
|
36
42
|
direction: string;
|
|
37
43
|
/**
|
|
38
|
-
* Specifies the
|
|
44
|
+
* Specifies the action buttons displayed in the ActionSheet footer.
|
|
39
45
|
*/
|
|
40
46
|
actions: ActionSheetAction[];
|
|
41
47
|
/**
|
|
42
|
-
*
|
|
43
|
-
* By default, the action buttons are rendered horizontally and stretched.
|
|
48
|
+
* Configures the layout of the action buttons in the footer. By default, actions are arranged horizontally and stretched to fill the container.
|
|
44
49
|
*/
|
|
45
50
|
actionsLayout: ActionSheetActionsLayout;
|
|
46
51
|
/**
|
|
47
|
-
*
|
|
52
|
+
* Determines whether the ActionSheet closes when the overlay is clicked.
|
|
48
53
|
*
|
|
49
54
|
* @default false
|
|
50
55
|
*/
|
|
51
56
|
overlayClickClose: boolean;
|
|
52
57
|
/**
|
|
53
|
-
*
|
|
58
|
+
* Sets the title text displayed in the ActionSheet header.
|
|
54
59
|
*/
|
|
55
60
|
title: string;
|
|
56
61
|
/**
|
|
57
|
-
*
|
|
62
|
+
* Sets the subtitle text displayed below the title in the header.
|
|
58
63
|
*/
|
|
59
64
|
subtitle: string;
|
|
60
65
|
/**
|
|
61
|
-
*
|
|
66
|
+
* Provides the collection of items rendered in the ActionSheet content area.
|
|
62
67
|
*/
|
|
63
68
|
items: Array<ActionSheetItem>;
|
|
64
69
|
/**
|
|
65
|
-
*
|
|
66
|
-
* Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
|
|
70
|
+
* Applies CSS classes to the inner ActionSheet element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
67
71
|
*/
|
|
68
72
|
cssClass: any;
|
|
69
73
|
/**
|
|
70
|
-
*
|
|
71
|
-
* Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
|
|
74
|
+
* Applies inline styles to the inner ActionSheet element. Accepts any value supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
|
72
75
|
*/
|
|
73
76
|
cssStyle: any;
|
|
74
77
|
/**
|
|
75
|
-
* Configures the
|
|
76
|
-
* By default, the animations are turned off. The default animations' duration is `300ms`.
|
|
78
|
+
* Configures the opening and closing animations for the ActionSheet ([see example](slug:animations_actionsheet)).
|
|
77
79
|
*
|
|
78
80
|
* @default true
|
|
79
81
|
*/
|
|
80
82
|
animation: boolean | ActionSheetAnimation;
|
|
81
83
|
/**
|
|
82
|
-
*
|
|
84
|
+
* Controls whether the ActionSheet is expanded or collapsed.
|
|
83
85
|
*
|
|
84
86
|
* @default false
|
|
85
87
|
*/
|
|
@@ -88,7 +90,6 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, O
|
|
|
88
90
|
* Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
|
|
89
91
|
* Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`](slug:api_navigation_actionsheetheadertemplatedirective)
|
|
90
92
|
* or [`ActionSheetContentTemplate`](slug:api_navigation_actionsheetcontenttemplatedirective).
|
|
91
|
-
*
|
|
92
93
|
*/
|
|
93
94
|
titleId: string;
|
|
94
95
|
/**
|
|
@@ -99,7 +100,7 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, O
|
|
|
99
100
|
initialFocus: boolean;
|
|
100
101
|
/**
|
|
101
102
|
* Fires when the `expanded` property of the component is updated.
|
|
102
|
-
*
|
|
103
|
+
* You can use this event to provide two-way binding for the `expanded` property.
|
|
103
104
|
*/
|
|
104
105
|
expandedChange: EventEmitter<boolean>;
|
|
105
106
|
/**
|
|
@@ -3,32 +3,34 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
* Defines the possible orientations for
|
|
7
|
-
* - `horizontal
|
|
8
|
-
* - `vertical
|
|
6
|
+
* Defines the possible orientations for ActionSheet action buttons.
|
|
7
|
+
* - `horizontal`—Lays out actions in a horizontal row.
|
|
8
|
+
* - `vertical`—Stacks actions vertically.
|
|
9
9
|
*/
|
|
10
10
|
export type ActionSheetActionsOrientation = 'horizontal' | 'vertical';
|
|
11
11
|
/**
|
|
12
12
|
* Defines the possible alignments for the ActionSheet action buttons.
|
|
13
|
-
* - `start
|
|
14
|
-
* - `center
|
|
15
|
-
* - `end
|
|
16
|
-
* - `stretched
|
|
17
|
-
* - `justify
|
|
13
|
+
* - `start`—Aligns actions to the start of the container.
|
|
14
|
+
* - `center`—Centers actions within the container.
|
|
15
|
+
* - `end`—Aligns actions to the end of the container.
|
|
16
|
+
* - `stretched`—Stretches actions to fill the available space.
|
|
17
|
+
* - `justify`—Distributes actions evenly across the container.
|
|
18
18
|
*/
|
|
19
19
|
export type ActionSheetActionsAlignment = 'start' | 'center' | 'end' | 'stretched' | 'justify';
|
|
20
20
|
/**
|
|
21
|
-
* Represents the layout configuration for the ActionSheet action buttons.
|
|
21
|
+
* Represents the layout configuration options for the ActionSheet action buttons.
|
|
22
22
|
*/
|
|
23
23
|
export interface ActionSheetActionsLayout {
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
26
|
-
*
|
|
25
|
+
* Specifies the orientation of the actions.
|
|
26
|
+
*
|
|
27
|
+
* @default horizontal
|
|
27
28
|
*/
|
|
28
29
|
orientation?: ActionSheetActionsOrientation;
|
|
29
30
|
/**
|
|
30
|
-
*
|
|
31
|
-
*
|
|
31
|
+
* Specifies the alignment of the actions within the container.
|
|
32
|
+
*
|
|
33
|
+
* @default stretched
|
|
32
34
|
*/
|
|
33
35
|
alignment?: ActionSheetActionsAlignment;
|
|
34
36
|
}
|
|
@@ -5,60 +5,39 @@
|
|
|
5
5
|
import { ButtonFillMode, ButtonSize, ButtonThemeColor } from "@progress/kendo-angular-buttons";
|
|
6
6
|
import { SVGIcon } from "@progress/kendo-svg-icons";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Describes the configuration for an ActionSheet action button.
|
|
9
9
|
*/
|
|
10
10
|
export interface ActionSheetAction {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Specifies the unique identifier of the action button.
|
|
13
13
|
*/
|
|
14
14
|
id?: string | number;
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* Sets the text content of the action button.
|
|
17
17
|
*/
|
|
18
18
|
text?: string;
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
20
|
+
* Sets the [font icon](slug:icon_list) for the action button.
|
|
21
21
|
*/
|
|
22
22
|
icon?: string;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* Specifies an [`SVGIcon`](slug:api_icons_svgicon) for the action button.
|
|
25
25
|
*/
|
|
26
26
|
svgIcon?: SVGIcon;
|
|
27
27
|
/**
|
|
28
|
-
*
|
|
28
|
+
* Specifies the `title` attribute for the action button. The title appears as the default tooltip.
|
|
29
29
|
*/
|
|
30
30
|
title?: string;
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
33
|
-
* - `small`
|
|
34
|
-
* - `medium`
|
|
35
|
-
* - `large`
|
|
36
|
-
* - `none`
|
|
32
|
+
* Sets the size of the action button.
|
|
37
33
|
*/
|
|
38
34
|
size?: ButtonSize;
|
|
39
35
|
/**
|
|
40
|
-
*
|
|
41
|
-
* - `flat`
|
|
42
|
-
* - `outline`
|
|
43
|
-
* - `solid`
|
|
44
|
-
* - `link`
|
|
45
|
-
* - `clear`
|
|
46
|
-
* - `none`
|
|
36
|
+
* Defines the fill mode of the action button.
|
|
47
37
|
*/
|
|
48
38
|
fillMode?: ButtonFillMode;
|
|
49
39
|
/**
|
|
50
|
-
*
|
|
51
|
-
* - `base`: Applies coloring based on the base theme color.
|
|
52
|
-
* - `primary`: Applies coloring based on the primary theme color.
|
|
53
|
-
* - `secondary`: Applies coloring based on the secondary theme color.
|
|
54
|
-
* - `tertiary`: Applies coloring based on the tertiary theme color.
|
|
55
|
-
* - `info`: Applies coloring based on the info theme color.
|
|
56
|
-
* - `success`: Applies coloring based on the success theme color.
|
|
57
|
-
* - `warning`: Applies coloring based on the warning theme color.
|
|
58
|
-
* - `error`: Applies coloring based on the error theme color.
|
|
59
|
-
* - `dark`: Applies coloring based on the dark theme color.
|
|
60
|
-
* - `light`: Applies coloring based on the light theme color.
|
|
61
|
-
* - `inverse`: Applies coloring based on the inverse theme color.
|
|
40
|
+
* Specifies the theme color of the action button.
|
|
62
41
|
*/
|
|
63
42
|
themeColor?: ButtonThemeColor;
|
|
64
43
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { SVGIcon } from '@progress/kendo-svg-icons';
|
|
6
6
|
import { ActionSheetItemGroup } from "./group";
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Represents the configuration for an ActionSheet item.
|
|
9
9
|
*/
|
|
10
10
|
export interface ActionSheetItem {
|
|
11
11
|
/**
|
|
@@ -13,50 +13,45 @@ export interface ActionSheetItem {
|
|
|
13
13
|
*/
|
|
14
14
|
title?: string;
|
|
15
15
|
/**
|
|
16
|
-
* Defines the name
|
|
17
|
-
* The icon is rendered inside the ActionSheet item by a `span.k-icon` element.
|
|
16
|
+
* Defines the name of an existing [font icon](slug:icon_list) to render inside the item. The icon is rendered in a `span.k-icon` element.
|
|
18
17
|
*/
|
|
19
18
|
icon?: string;
|
|
20
19
|
/**
|
|
21
|
-
* Defines an [`SVGIcon`](slug:api_icons_svgicon) to
|
|
20
|
+
* Defines an [`SVGIcon`](slug:api_icons_svgicon) to render within the ActionSheet item.
|
|
22
21
|
*/
|
|
23
22
|
svgIcon?: SVGIcon;
|
|
24
23
|
/**
|
|
25
|
-
* Defines
|
|
26
|
-
* which are applied to a span element inside the ActionSheet item.
|
|
27
|
-
* Allows the usage of custom icons.
|
|
24
|
+
* Defines one or more CSS classes to apply to a span element inside the item. Allows using custom icons.
|
|
28
25
|
*/
|
|
29
26
|
iconClass?: string;
|
|
30
27
|
/**
|
|
31
|
-
*
|
|
32
|
-
* Items can be segregated in two groups - `top` and `bottom` -
|
|
33
|
-
* each specifying whether the ActionSheet item will be rendered over the separator or under it.
|
|
28
|
+
* Specifies the group for the item. Use `top` to render the item above the separator, or `bottom` to render below it.
|
|
34
29
|
*/
|
|
35
30
|
group?: ActionSheetItemGroup;
|
|
36
31
|
/**
|
|
37
|
-
*
|
|
32
|
+
* Sets additional text rendered below the item's title.
|
|
38
33
|
*/
|
|
39
34
|
description?: string;
|
|
40
35
|
/**
|
|
41
|
-
* Specifies
|
|
36
|
+
* Specifies whether the ActionSheet item is initially disabled.
|
|
37
|
+
*
|
|
38
|
+
* @default false
|
|
42
39
|
*/
|
|
43
40
|
disabled?: boolean;
|
|
44
41
|
/**
|
|
45
|
-
*
|
|
42
|
+
* Defines the size of the icon. Accepts any valid CSS font-size value.
|
|
46
43
|
*/
|
|
47
44
|
iconSize?: string;
|
|
48
45
|
/**
|
|
49
|
-
*
|
|
46
|
+
* Sets the color of the icon. Accepts `inherit`, `default`, `primary`, `secondary`, `tertiary`, `info`, `success`, `warning`, `error`, `dark`, `light`, `inverted`, or any hexadecimal value.
|
|
50
47
|
*/
|
|
51
48
|
iconColor?: string;
|
|
52
49
|
/**
|
|
53
|
-
*
|
|
54
|
-
* Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
|
|
50
|
+
* Specifies the CSS classes to apply to the item. Supports all value types accepted by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
55
51
|
*/
|
|
56
52
|
cssClass?: any;
|
|
57
53
|
/**
|
|
58
|
-
*
|
|
59
|
-
* Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
|
|
54
|
+
* Specifies the CSS styles to apply to the item. Supports all value types accepted by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
|
60
55
|
*/
|
|
61
56
|
cssStyle?: any;
|
|
62
57
|
}
|
|
@@ -3,11 +3,13 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* Represents the settings of the opening and closing animations for the ActionSheet ([see example](slug:animations_actionsheet)).
|
|
7
7
|
*/
|
|
8
8
|
export interface ActionSheetAnimation {
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Specifies the duration of the ActionSheet opening and closing animations in milliseconds.
|
|
11
|
+
*
|
|
12
|
+
* @default 300
|
|
11
13
|
*/
|
|
12
14
|
duration?: number;
|
|
13
15
|
}
|
|
@@ -2,4 +2,10 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
+
/**
|
|
6
|
+
* Defines the group for an ActionSheet item.
|
|
7
|
+
*
|
|
8
|
+
* - `top`—Renders the item above the separator.
|
|
9
|
+
* - `bottom`—Renders the item below the separator.
|
|
10
|
+
*/
|
|
5
11
|
export type ActionSheetItemGroup = 'top' | 'bottom';
|
|
@@ -4,15 +4,17 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { ActionSheetItem } from './actionsheet-item.interface';
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
7
|
+
* Provides the event data for the `itemClick` event of the ActionSheet component.
|
|
8
|
+
*
|
|
9
|
+
* Use this event to access the clicked item and the original DOM event.
|
|
8
10
|
*/
|
|
9
11
|
export declare class ActionSheetItemClickEvent {
|
|
10
12
|
/**
|
|
11
|
-
*
|
|
13
|
+
* Provides the ActionSheet item that was clicked.
|
|
12
14
|
*/
|
|
13
15
|
item: ActionSheetItem;
|
|
14
16
|
/**
|
|
15
|
-
*
|
|
17
|
+
* Represents the original DOM event that triggered the `itemClick` event.
|
|
16
18
|
*/
|
|
17
19
|
originalEvent: any;
|
|
18
20
|
}
|
|
@@ -5,9 +5,18 @@
|
|
|
5
5
|
import { TemplateRef } from '@angular/core';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
|
-
* Represents a template
|
|
8
|
+
* Represents a template for customizing the overall content of the ActionSheet.
|
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
|
10
10
|
* with the `kendoActionSheetTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-actionsheet>
|
|
15
|
+
* <ng-template kendoActionSheetTemplate>
|
|
16
|
+
* <div>Custom ActionSheet content</div>
|
|
17
|
+
* </ng-template>
|
|
18
|
+
* </kendo-actionsheet>
|
|
19
|
+
* ```
|
|
11
20
|
*/
|
|
12
21
|
export declare class ActionSheetTemplateDirective {
|
|
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
|
-
* Represents a template
|
|
8
|
+
* Represents a template for customizing the list content of the ActionSheet items.
|
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
|
10
10
|
* with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-actionsheet [items]="items">
|
|
15
|
+
* <ng-template kendoActionSheetContentTemplate>
|
|
16
|
+
* <div>Custom content here</div>
|
|
17
|
+
* </ng-template>
|
|
18
|
+
* </kendo-actionsheet>
|
|
19
|
+
* ```
|
|
11
20
|
*/
|
|
12
21
|
export declare class ActionSheetContentTemplateDirective {
|
|
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
|
-
* Represents a template
|
|
8
|
+
* Represents a template for customizing the footer of the ActionSheet.
|
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
|
10
10
|
* with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-actionsheet>
|
|
15
|
+
* <ng-template kendoActionSheetFooterTemplate>
|
|
16
|
+
* <button kendoButton>Custom Footer Button</button>
|
|
17
|
+
* </ng-template>
|
|
18
|
+
* </kendo-actionsheet>
|
|
19
|
+
* ```
|
|
11
20
|
*/
|
|
12
21
|
export declare class ActionSheetFooterTemplateDirective {
|
|
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
|
-
* Represents a template
|
|
8
|
+
* Represents a template for customizing the header content of the ActionSheet. If you implement this template, it will override the `title` and `subtitle` of the ActionSheet.
|
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
|
10
10
|
* with the `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-actionsheet>
|
|
15
|
+
* <ng-template kendoActionSheetHeaderTemplate>
|
|
16
|
+
* <h3>Custom Header</h3>
|
|
17
|
+
* </ng-template>
|
|
18
|
+
* </kendo-actionsheet>
|
|
19
|
+
* ```
|
|
11
20
|
*/
|
|
12
21
|
export declare class ActionSheetHeaderTemplateDirective {
|
|
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
|
-
* Represents a template
|
|
8
|
+
* Represents a template for customizing the content of each ActionSheet item.
|
|
9
9
|
* To define the template, nest an `<ng-template>` tag
|
|
10
10
|
* with the `kendoActionSheetItemTemplate` directive inside the `<kendo-actionsheet>` tag.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-actionsheet [items]="items">
|
|
15
|
+
* <ng-template kendoActionSheetItemTemplate let-item>
|
|
16
|
+
* <span>{{ item.title }} (custom)</span>
|
|
17
|
+
* </ng-template>
|
|
18
|
+
* </kendo-actionsheet>
|
|
19
|
+
* ```
|
|
11
20
|
*/
|
|
12
21
|
export declare class ActionSheetItemTemplateDirective {
|
|
13
22
|
templateRef: TemplateRef<any>;
|
package/actionsheet.module.d.ts
CHANGED
|
@@ -11,35 +11,22 @@ import * as i5 from "./actionsheet/templates/content-template.directive";
|
|
|
11
11
|
import * as i6 from "./actionsheet/templates/footer-template.directive";
|
|
12
12
|
import * as i7 from "./actionsheet/templates/actionsheet-template";
|
|
13
13
|
/**
|
|
14
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
14
|
+
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
15
15
|
* definition for the ActionSheet component.
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
|
-
*
|
|
19
|
-
* ```ts-no-run
|
|
20
|
-
* // Import the ActionSheet module
|
|
18
|
+
* ```typescript
|
|
21
19
|
* import { ActionSheetModule } from '@progress/kendo-angular-navigation';
|
|
22
|
-
*
|
|
23
|
-
* // The browser platform with a compiler
|
|
24
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
25
20
|
* import { BrowserModule } from '@angular/platform-browser';
|
|
26
|
-
*
|
|
27
21
|
* import { NgModule } from '@angular/core';
|
|
28
|
-
*
|
|
29
|
-
* // Import the app component
|
|
30
22
|
* import { AppComponent } from './app.component';
|
|
31
23
|
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* imports: [BrowserModule, ActionSheetModule], // import ActionSheet module
|
|
24
|
+
* @NgModule({
|
|
25
|
+
* declarations: [AppComponent],
|
|
26
|
+
* imports: [BrowserModule, ActionSheetModule],
|
|
36
27
|
* bootstrap: [AppComponent]
|
|
37
28
|
* })
|
|
38
29
|
* export class AppModule {}
|
|
39
|
-
*
|
|
40
|
-
* // Compile and launch the module
|
|
41
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
42
|
-
*
|
|
43
30
|
* ```
|
|
44
31
|
*/
|
|
45
32
|
export declare class ActionSheetModule {
|
|
@@ -6,20 +6,16 @@ import * as i0 from "@angular/core";
|
|
|
6
6
|
/**
|
|
7
7
|
* Represents the [Kendo UI AppBarSection component for Angular]({% slug contentarrangement_appbar %}#toc-sections).
|
|
8
8
|
*
|
|
9
|
-
*
|
|
9
|
+
* Use the AppBarSection component to group content, actions, or navigation items within the AppBar.
|
|
10
10
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
* </kendo-appbar>
|
|
20
|
-
* `
|
|
21
|
-
* })
|
|
22
|
-
* class AppComponent {}
|
|
11
|
+
* @example
|
|
12
|
+
* ```html
|
|
13
|
+
* <kendo-appbar>
|
|
14
|
+
* <kendo-appbar-section>
|
|
15
|
+
* <h2>Page Title</h2>
|
|
16
|
+
* </kendo-appbar-section>
|
|
17
|
+
* </kendo-appbar>
|
|
18
|
+
* ```
|
|
23
19
|
*/
|
|
24
20
|
export declare class AppBarSectionComponent {
|
|
25
21
|
hostClass: boolean;
|
|
@@ -6,30 +6,22 @@ import { Renderer2, ElementRef, AfterViewInit } from '@angular/core';
|
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
/**
|
|
8
8
|
* Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
|
|
9
|
-
* Used to give additional white space between the AppBar sections and provides a way for customizing its width.
|
|
10
9
|
*
|
|
11
|
-
*
|
|
10
|
+
* Use the AppBarSpacer component to add white space between AppBar sections and customize its width.
|
|
12
11
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* <
|
|
18
|
-
*
|
|
19
|
-
* <button kendoButton fillMode="flat">
|
|
20
|
-
* <kendo-icon name="menu"></kendo-icon>
|
|
21
|
-
* </button>
|
|
22
|
-
* </kendo-appbar-section>
|
|
12
|
+
* @example
|
|
13
|
+
* ```html
|
|
14
|
+
* <kendo-appbar>
|
|
15
|
+
* <kendo-appbar-section>
|
|
16
|
+
* <button kendoButton fillMode="flat" [svgIcon]="menuIcon"></button>
|
|
17
|
+
* </kendo-appbar-section>
|
|
23
18
|
*
|
|
24
|
-
*
|
|
19
|
+
* <kendo-appbar-spacer></kendo-appbar-spacer>
|
|
25
20
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
* `
|
|
31
|
-
* })
|
|
32
|
-
* class AppComponent {}
|
|
21
|
+
* <kendo-appbar-section>
|
|
22
|
+
* <h2>Page Title</h2>
|
|
23
|
+
* </kendo-appbar-section>
|
|
24
|
+
* </kendo-appbar>
|
|
33
25
|
* ```
|
|
34
26
|
*/
|
|
35
27
|
export declare class AppBarSpacerComponent implements AfterViewInit {
|
|
@@ -40,7 +32,7 @@ export declare class AppBarSpacerComponent implements AfterViewInit {
|
|
|
40
32
|
/**
|
|
41
33
|
* Specifies the width of the AppBarSpacer.
|
|
42
34
|
*
|
|
43
|
-
* If not set, the AppBarSpacer will take all the available space.
|
|
35
|
+
* If not set, the AppBarSpacer will take all of the available space.
|
|
44
36
|
*/
|
|
45
37
|
width: string;
|
|
46
38
|
constructor(renderer: Renderer2, element: ElementRef);
|
|
@@ -10,7 +10,20 @@ import { AppBarPositionMode } from './models/position-mode';
|
|
|
10
10
|
import * as i0 from "@angular/core";
|
|
11
11
|
/**
|
|
12
12
|
* Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
|
|
13
|
-
*
|
|
13
|
+
*
|
|
14
|
+
* Use the AppBar component to display information, actions, brand titles, and additional navigation on the current screen.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```html
|
|
18
|
+
* <kendo-appbar>
|
|
19
|
+
* <kendo-appbar-section>
|
|
20
|
+
* <h2>Page Title</h2>
|
|
21
|
+
* </kendo-appbar-section>
|
|
22
|
+
* </kendo-appbar>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @remarks
|
|
26
|
+
* Supported children components are: {@link AppBarSectionComponent}, {@link AppBarSpacerComponent}
|
|
14
27
|
*/
|
|
15
28
|
export declare class AppBarComponent implements AfterViewInit, OnDestroy {
|
|
16
29
|
private localizationService;
|
|
@@ -25,40 +38,21 @@ export declare class AppBarComponent implements AfterViewInit, OnDestroy {
|
|
|
25
38
|
* Specifies the position of the AppBar
|
|
26
39
|
* ([see example]({% slug positioning_appbar %}#toc-position)).
|
|
27
40
|
*
|
|
28
|
-
*
|
|
29
|
-
* * `top` (Default)—Positions the AppBar at the top of the content.
|
|
30
|
-
* Setting the `position` property to `top` requires adding the Appbar component before the page content.
|
|
31
|
-
* The position property applies CSS `top: 0` style in [`fixed mode`](slug:api_navigation_appbarcomponent#toc-positionmode) and also adds a `box-shadow` to the bottom of the AppBar.
|
|
32
|
-
*
|
|
33
|
-
* * `bottom`—Positions the AppBar at the bottom of the content.
|
|
34
|
-
* Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
|
|
35
|
-
* The position property applies CSS `bottom: 0` style in [`fixed mode`](slug:api_navigation_appbarcomponent#toc-positionmode) and also adds a `box-shadow ` to the top of the AppBar.
|
|
36
|
-
*
|
|
41
|
+
* @default 'top'
|
|
37
42
|
*/
|
|
38
43
|
set position(position: AppBarPosition);
|
|
39
44
|
get position(): AppBarPosition;
|
|
40
45
|
/**
|
|
41
|
-
*
|
|
42
|
-
* ([see example](slug:positioning_appbar#toc-position-mode)).
|
|
46
|
+
* Sets the position mode of the AppBar ([see example](slug:positioning_appbar#toc-position-mode)).
|
|
43
47
|
*
|
|
44
|
-
*
|
|
45
|
-
* * `static` (Default)—Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
|
|
46
|
-
* * `sticky`—Positions the AppBar based on the user's scroll position. A sticky element toggles between static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
|
|
47
|
-
* * `fixed`—Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
|
|
48
|
+
* @default 'static'
|
|
48
49
|
*/
|
|
49
50
|
set positionMode(positionMode: AppBarPositionMode);
|
|
50
51
|
get positionMode(): AppBarPositionMode;
|
|
51
52
|
/**
|
|
52
|
-
*
|
|
53
|
-
* The theme color will be applied as background color of the component.
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
* * The possible values are:
|
|
57
|
-
* * `light` (Default)—Applies coloring based on light theme color.
|
|
58
|
-
* * `dark`—Applies coloring based on dark theme color.
|
|
59
|
-
* * `inherit`— Applies inherited coloring value.
|
|
60
|
-
* * `primary`— Applies primary coloring value.
|
|
53
|
+
* Sets the theme color of the AppBar. The theme color is applied as the background color of the component.
|
|
61
54
|
*
|
|
55
|
+
* @default 'light'
|
|
62
56
|
*/
|
|
63
57
|
set themeColor(themeColor: AppBarThemeColor);
|
|
64
58
|
get themeColor(): AppBarThemeColor;
|