@progress/kendo-angular-navigation 19.1.2-develop.4 → 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.
Files changed (62) hide show
  1. package/actionsheet/actionsheet.component.d.ts +18 -17
  2. package/actionsheet/models/actionsheet-action-layout.d.ts +15 -13
  3. package/actionsheet/models/actionsheet-action.d.ts +9 -30
  4. package/actionsheet/models/actionsheet-item.interface.d.ts +13 -18
  5. package/actionsheet/models/animation.d.ts +4 -2
  6. package/actionsheet/models/group.d.ts +6 -0
  7. package/actionsheet/models/item-click.event.d.ts +5 -3
  8. package/actionsheet/templates/actionsheet-template.d.ts +10 -1
  9. package/actionsheet/templates/content-template.directive.d.ts +10 -1
  10. package/actionsheet/templates/footer-template.directive.d.ts +10 -1
  11. package/actionsheet/templates/header-template.directive.d.ts +10 -1
  12. package/actionsheet/templates/item-template.directive.d.ts +10 -1
  13. package/actionsheet.module.d.ts +5 -18
  14. package/appbar/appbar-section.component.d.ts +9 -13
  15. package/appbar/appbar-spacer.component.d.ts +13 -21
  16. package/appbar/appbar.component.d.ts +19 -25
  17. package/appbar/models/position-mode.d.ts +5 -6
  18. package/appbar/models/position.d.ts +3 -8
  19. package/appbar/models/theme-color.d.ts +6 -7
  20. package/appbar.module.d.ts +5 -18
  21. package/bottomnavigation/bottomnavigation.component.d.ts +17 -31
  22. package/bottomnavigation/events/select-event.d.ts +5 -5
  23. package/bottomnavigation/templates/item-template.directive.d.ts +11 -3
  24. package/bottomnavigation/types/bottomnavigation-fill.d.ts +3 -3
  25. package/bottomnavigation/types/bottomnavigation-item-flow.d.ts +3 -3
  26. package/bottomnavigation/types/bottomnavigation-item.d.ts +11 -10
  27. package/bottomnavigation/types/bottomnavigation-position-mode.d.ts +3 -3
  28. package/bottomnavigation/types/bottomnavigation-theme-color.d.ts +12 -12
  29. package/bottomnavigation.module.d.ts +6 -18
  30. package/breadcrumb/breadcrumb.component.d.ts +14 -19
  31. package/breadcrumb/models/breadcrumb-item.interface.d.ts +10 -11
  32. package/breadcrumb/models/breadcrumb-size.d.ts +1 -2
  33. package/breadcrumb/models/collapse-mode.d.ts +5 -3
  34. package/breadcrumb/template-directives/item-template.directive.d.ts +12 -1
  35. package/breadcrumb.module.d.ts +6 -18
  36. package/directives.d.ts +94 -5
  37. package/esm2022/actionsheet/actionsheet.component.mjs +18 -17
  38. package/esm2022/actionsheet/models/item-click.event.mjs +5 -3
  39. package/esm2022/actionsheet/templates/actionsheet-template.mjs +10 -1
  40. package/esm2022/actionsheet/templates/content-template.directive.mjs +10 -1
  41. package/esm2022/actionsheet/templates/footer-template.directive.mjs +10 -1
  42. package/esm2022/actionsheet/templates/header-template.directive.mjs +10 -1
  43. package/esm2022/actionsheet/templates/item-template.directive.mjs +10 -1
  44. package/esm2022/actionsheet.module.mjs +5 -18
  45. package/esm2022/appbar/appbar-section.component.mjs +9 -13
  46. package/esm2022/appbar/appbar-spacer.component.mjs +13 -21
  47. package/esm2022/appbar/appbar.component.mjs +19 -25
  48. package/esm2022/appbar.module.mjs +5 -18
  49. package/esm2022/bottomnavigation/bottomnavigation.component.mjs +17 -31
  50. package/esm2022/bottomnavigation/events/select-event.mjs +5 -5
  51. package/esm2022/bottomnavigation/templates/item-template.directive.mjs +11 -3
  52. package/esm2022/bottomnavigation/types/bottomnavigation-theme-color.mjs +12 -12
  53. package/esm2022/bottomnavigation.module.mjs +6 -18
  54. package/esm2022/breadcrumb/breadcrumb.component.mjs +14 -19
  55. package/esm2022/breadcrumb/template-directives/item-template.directive.mjs +12 -1
  56. package/esm2022/breadcrumb.module.mjs +6 -18
  57. package/esm2022/directives.mjs +94 -5
  58. package/esm2022/navigation.module.mjs +6 -18
  59. package/esm2022/package-metadata.mjs +2 -2
  60. package/fesm2022/progress-kendo-angular-navigation.mjs +297 -240
  61. package/navigation.module.d.ts +6 -18
  62. package/package.json +7 -7
@@ -3,12 +3,11 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the positionMode of the AppBar
7
- * ([see example](slug:positioning_appbar#toc-position-mode)).
6
+ * Represents the available position modes of the AppBar ([see example](slug:positioning_appbar#toc-position-mode)).
8
7
  *
9
- * * The possible values are:
10
- * * `static` (Default)—Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
11
- * * `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.
12
- * * `fixed`—Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
8
+ * The possible values are:
9
+ * * `static`—Positions the AppBar according to the normal flow of the page.
10
+ * * `sticky`—Positions the AppBar based on the user's scroll position. A sticky element toggles between the static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
11
+ * * `fixed`—Positions the AppBar relative to the viewport. The component always stays in the same place even if the page is scrolled.
13
12
  */
14
13
  export type AppBarPositionMode = 'static' | 'sticky' | 'fixed';
@@ -3,17 +3,12 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the position of the AppBar
6
+ * Represents the position options of the AppBar
7
7
  * ([see example]({% slug positioning_appbar %}#toc-position)).
8
8
  *
9
9
  * * The possible values are:
10
- * * `top` (Default)—Positions the AppBar at the top of the content.
11
- * Setting the `position` property to `top` requires adding the Appbar component before the page content.
12
- * 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.
13
- *
14
- * * `bottom`—Positions the AppBar at the bottom of the content.
15
- * Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
16
- * 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.
10
+ * * `top`—Places the AppBar at the top of the content. This setting requires rendering the AppBar before the main page content. In [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode), this value applies a `top: 0` CSS style and adds a `box-shadow` to the bottom of the AppBar.
11
+ * * `bottom`—Places the AppBar at the bottom of the content. This setting requires rendering the AppBar after the main page content. In [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode), this value applies a `bottom: 0` CSS style and adds a `box-shadow` to the top of the AppBar.
17
12
  *
18
13
  */
19
14
  export type AppBarPosition = 'top' | 'bottom';
@@ -3,16 +3,15 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the theme color of the AppBar
6
+ * Represents the possible theme colors of the AppBar
7
7
  * ([see example](slug:themecolor_appbar)).
8
- * The theme color will be applied as background color of the component.
9
- *
8
+ * The theme color will be applied as a background color to the component.
10
9
  *
11
10
  * * The possible values are:
12
- * * `light` (Default)—Applies coloring based on light theme color.
13
- * * `dark`—Applies coloring based on dark theme color.
14
- * * `inherit`— Applies inherited coloring value.
15
- * * `primary`— Applies primary coloring value.
11
+ * * `light`—Applies coloring based on the light theme color.
12
+ * * `dark`—Applies coloring based on the dark theme color.
13
+ * * `inherit`&mdash Applies inherited coloring value.
14
+ * * `primary`—Applies primary coloring value.
16
15
  *
17
16
  */
18
17
  export type AppBarThemeColor = 'inherit' | 'light' | 'dark' | 'primary';
@@ -7,35 +7,22 @@ import * as i1 from "./appbar/appbar.component";
7
7
  import * as i2 from "./appbar/appbar-section.component";
8
8
  import * as i3 from "./appbar/appbar-spacer.component";
9
9
  /**
10
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
10
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
11
11
  * definition for the AppBar component.
12
12
  *
13
13
  * @example
14
- *
15
- * ```ts-no-run
16
- * // Import the AppBar module
14
+ * ```typescript
17
15
  * import { AppBarModule } from '@progress/kendo-angular-navigation';
18
- *
19
- * // The browser platform with a compiler
20
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
21
16
  * import { BrowserModule } from '@angular/platform-browser';
22
- *
23
17
  * import { NgModule } from '@angular/core';
24
- *
25
- * // Import the app component
26
18
  * import { AppComponent } from './app.component';
27
19
  *
28
- * // Define the app module
29
- * _@NgModule({
30
- * declarations: [AppComponent], // declare app component
31
- * imports: [BrowserModule, AppBarModule], // import AppBar module
20
+ * @NgModule({
21
+ * declarations: [AppComponent],
22
+ * imports: [BrowserModule, AppBarModule],
32
23
  * bootstrap: [AppComponent]
33
24
  * })
34
25
  * export class AppModule {}
35
- *
36
- * // Compile and launch the module
37
- * platformBrowserDynamic().bootstrapModule(AppModule);
38
- *
39
26
  * ```
40
27
  */
41
28
  export declare class AppBarModule {
@@ -14,9 +14,11 @@ import * as i0 from "@angular/core";
14
14
  /**
15
15
  * Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
16
16
  *
17
+ * Use the BottomNavigation component to let users quickly switch between primary views in your app.
18
+ *
17
19
  * @example
18
- * ```ts-no-run
19
- * _@Component({
20
+ * ```typescript
21
+ * @Component({
20
22
  * selector: 'my-app',
21
23
  * template: `
22
24
  * <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
@@ -27,7 +29,7 @@ import * as i0 from "@angular/core";
27
29
  * { text: 'Inbox', icon: 'envelop', selected: true },
28
30
  * { text: 'Calendar', icon: 'calendar'},
29
31
  * { text: 'Profile', icon: 'user'}
30
- * ]
32
+ * ];
31
33
  * }
32
34
  * ```
33
35
  */
@@ -38,67 +40,51 @@ export declare class BottomNavigationComponent implements OnInit, AfterViewInit,
38
40
  private changeDetector;
39
41
  private renderer;
40
42
  /**
41
- * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
43
+ * Provides the collection of items rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
42
44
  */
43
45
  items: any[];
44
46
  /**
45
- * Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
47
+ * Shows a top border on the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
46
48
  *
47
49
  * @default false
48
50
  */
49
51
  border: boolean;
50
52
  /**
51
- * Disables the whole BottomNavigation.
53
+ * Disables the entire BottomNavigation.
52
54
  *
53
55
  * @default false
54
56
  */
55
57
  disabled: boolean;
56
58
  /**
57
- * The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
59
+ * Sets the fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
58
60
  *
59
- * * The possible values are:
60
- * * (Default) `flat`
61
- * * `solid`
61
+ * @default 'flat'
62
62
  */
63
63
  set fill(fill: BottomNavigationFill);
64
64
  get fill(): BottomNavigationFill;
65
65
  /**
66
- * Specifies how the icon and text label are positioned in the BottomNavigation items.
66
+ * Controls how the icon and text label are positioned in the BottomNavigation items.
67
67
  *
68
- * The possible values are:
69
- * * (Default) `vertical` - Renders the text below the icon.
70
- * * `horizontal` - Renders the icon and the text on the same line.
68
+ * @default 'vertical'
71
69
  */
72
70
  set itemFlow(itemFlow: BottomNavigationItemFlow);
73
71
  get itemFlow(): BottomNavigationItemFlow;
74
72
  /**
75
- * Specifies the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
73
+ * Sets the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
76
74
  *
77
- * The possible values are:
78
- * * (Default) `fixed` - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
79
- * * `sticky` - Positions the BottomNavigation at the end of the scrollable container.
75
+ * @default 'fixed'
80
76
  */
81
77
  set positionMode(positionMode: BottomNavigationPositionMode);
82
78
  get positionMode(): BottomNavigationPositionMode;
83
79
  /**
84
- * Specifies the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
80
+ * Sets the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
85
81
  *
86
- * * The possible values are:
87
- * * (Default) `primary` - Applies coloring based on the primary theme color.
88
- * * `secondary` - Applies coloring based on the secondary theme color.
89
- * * `tertiary` - Applies coloring based on the tertiary theme color.
90
- * * `info` - Applies coloring based on the info theme color.
91
- * * `success` - Applies coloring based on the success theme color.
92
- * * `warning` - Applies coloring based on the warning theme color.
93
- * * `error` - Applies coloring based on the error theme color.
94
- * * `dark` - Applies coloring based on the dark theme color.
95
- * * `light` - Applies coloring based on the light theme color.
96
- * * `inverse` - Applies coloring based on the inverted theme color.
82
+ * @default 'primary'
97
83
  */
98
84
  set themeColor(themeColor: BottomNavigationThemeColor);
99
85
  get themeColor(): BottomNavigationThemeColor;
100
86
  /**
101
- * Fires each time an item is selected. This event is preventable.
87
+ * Fires when a user selects an item. This event is preventable.
102
88
  */
103
89
  select: EventEmitter<BottomNavigationSelectEvent>;
104
90
  /**
@@ -5,23 +5,23 @@
5
5
  import { PreventableEvent } from '../../common/preventable-event';
6
6
  import { BottomNavigationComponent } from '../bottomnavigation.component';
7
7
  /**
8
- * Arguments for the `select` event of the BottomNavigation.
8
+ * Provides the arguments for the `select` event of the BottomNavigation.
9
9
  */
10
10
  export declare class BottomNavigationSelectEvent extends PreventableEvent {
11
11
  /**
12
- * The index of the selected item in the `items` collection.
12
+ * Represents the index of the selected item in the `items` collection.
13
13
  */
14
14
  index: number;
15
15
  /**
16
- * The selected BottomNavigation item.
16
+ * Represents the selected BottomNavigation item.
17
17
  */
18
18
  item: any;
19
19
  /**
20
- * The DOM event that triggered the selection.
20
+ * Provides the DOM event that triggered the selection.
21
21
  */
22
22
  originalEvent: any;
23
23
  /**
24
- * The BottomNavigation that triggered the event.
24
+ * Provides a reference to the BottomNavigation instance that triggered the event.
25
25
  */
26
26
  sender: BottomNavigationComponent;
27
27
  /**
@@ -5,9 +5,17 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Represents a template that defines the item content of the BottomNavigation.
9
- * To define the template, nest an `<ng-template>` tag
10
- * with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
8
+ * Represents a template that defines the content of the BottomNavigation items. Use this directive to customize the appearance of each navigation item.
9
+ * To define the template, nest an `<ng-template>` tag with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
10
+ *
11
+ * @example
12
+ * ```html
13
+ * <kendo-bottomnavigation [items]="items">
14
+ * <ng-template kendoBottomNavigationItemTemplate let-item="item">
15
+ * <span>{{ item.text }}</span>
16
+ * </ng-template>
17
+ * </kendo-bottomnavigation>
18
+ * ```
11
19
  */
12
20
  export declare class BottomNavigationItemTemplateDirective {
13
21
  templateRef: TemplateRef<any>;
@@ -3,10 +3,10 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
6
+ * Represents the possible options for the fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
7
7
  *
8
8
  * The possible values are:
9
- * * (Default) `flat`
10
- * * `solid`
9
+ * * `flat`&mdash;Sets the BottomNavigation fill style to a flat, borderless appearance.
10
+ * * `solid`&mdash;Sets the BottomNavigation fill style to a solid, filled background.
11
11
  */
12
12
  export type BottomNavigationFill = 'flat' | 'solid';
@@ -3,10 +3,10 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies how the icon and text label are positioned in the BottomNavigation items.
6
+ * Represents the possible options to control how the icon and text label are positioned in the BottomNavigation items.
7
7
  *
8
8
  * The possible values are:
9
- * * (Default) `vertical` - Renders the text below the icon.
10
- * * `horizontal` - Renders the icon and the text on the same line.
9
+ * * `vertical`&mdash;Renders the text below the icon.
10
+ * * `horizontal`&mdash;Renders the icon and the text on the same line.
11
11
  */
12
12
  export type BottomNavigationItemFlow = 'vertical' | 'horizontal';
@@ -4,46 +4,47 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { SVGIcon } from "@progress/kendo-svg-icons";
6
6
  /**
7
- * An interface for describing the BottomNavigation items ([see example](slug:items_bottomnavigation)).
7
+ * Describes the structure of a BottomNavigation item ([see example](slug:items_bottomnavigation)).
8
8
  */
9
9
  export interface BottomNavigationItem {
10
10
  /**
11
11
  * Disables the BottomNavigation item.
12
+ *
13
+ * @default false
12
14
  */
13
15
  disabled?: boolean;
14
16
  /**
15
- * Defines the name of an existing icon in a Kendo UI theme.
17
+ * Defines the name of an existing [font icon](slug:icon_list) in a Kendo UI theme.
16
18
  */
17
19
  icon?: string;
18
20
  /**
19
- * Defines a CSS class or multiple classes separated by spaces, which are applied to a span element inside the item. Allows the usage of custom icons.
21
+ * Applies a CSS class or multiple classes separated by spaces to a span element inside the item. Allows the usage of custom icons.
20
22
  */
21
23
  iconClass?: string;
22
24
  /**
23
- * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the BottomNavigation item.
25
+ * Sets an [`SVGIcon`](slug:api_icons_svgicon) to render within the BottomNavigation item.
24
26
  */
25
27
  svgIcon?: SVGIcon;
26
28
  /**
27
- * Specifies, if the BottomNavigation item is selected.
29
+ * Specifies whether the BottomNavigation item is selected.
28
30
  */
29
31
  selected?: boolean;
30
32
  /**
31
- * Sets the tabIndex property of the BottomNavigation item.
33
+ * Sets the `tabindex` attribute of the BottomNavigation item.
32
34
  *
33
35
  * @default 0
34
- *
35
36
  */
36
37
  tabIndex?: number;
37
38
  /**
38
- * Specifies the text content of the BottomNavigation item.
39
+ * Sets the text content of the BottomNavigation item.
39
40
  */
40
41
  text?: string;
41
42
  /**
42
- * The CSS classes that will be rendered on the item element of the BottomNavigation. Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi'])..
43
+ * Applies CSS classes to the item element of the BottomNavigation. Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
43
44
  */
44
45
  cssClass?: any;
45
46
  /**
46
- * The CSS styles that will be rendered on the item element of the BottomNavigation. Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
47
+ * Applies CSS styles to the item element of the BottomNavigation. Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
47
48
  */
48
49
  cssStyle?: any;
49
50
  }
@@ -3,10 +3,10 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
6
+ * Represents the options to control the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
7
7
  *
8
8
  * The possible values are:
9
- * * (Default) `fixed` - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
10
- * * `sticky` - Positions the BottomNavigation at the end of the scrollable container.
9
+ * * `fixed`&mdash;Positions the BottomNavigation at the bottom of the viewport, regardless of the page scroll position.
10
+ * * `sticky`&mdash;Positions the BottomNavigation at the end of the scrollable container.
11
11
  */
12
12
  export type BottomNavigationPositionMode = 'fixed' | 'sticky';
@@ -3,18 +3,18 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
6
+ * Represents the possible theme colors of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
7
7
  *
8
- * * The possible values are:
9
- * * (Default) `primary` - Applies coloring based on the primary theme color.
10
- * * `secondary` - Applies coloring based on the secondary theme color.
11
- * * `tertiary` - Applies coloring based on the tertiary theme color.
12
- * * `info` - Applies coloring based on the info theme color.
13
- * * `success` - Applies coloring based on the success theme color.
14
- * * `warning` - Applies coloring based on the warning theme color.
15
- * * `error` - Applies coloring based on the error theme color.
16
- * * `dark` - Applies coloring based on the dark theme color.
17
- * * `light` - Applies coloring based on the light theme color.
18
- * * `inverse` - Applies coloring based on the inverted theme color.
8
+ * The possible values are:
9
+ * * `primary`&mdash;Applies coloring based on the primary theme color.
10
+ * * `secondary`&mdash;Applies coloring based on the secondary theme color.
11
+ * * `tertiary`&mdash;Applies coloring based on the tertiary theme color.
12
+ * * `info`&mdash;Applies coloring based on the info theme color.
13
+ * * `success`&mdash;Applies coloring based on the success theme color.
14
+ * * `warning`&mdash;Applies coloring based on the warning theme color.
15
+ * * `error`&mdash;Applies coloring based on the error theme color.
16
+ * * `dark`&mdash;Applies coloring based on the dark theme color.
17
+ * * `light`&mdash;Applies coloring based on the light theme color.
18
+ * * `inverse`&mdash;Applies coloring based on the inverted theme color.
19
19
  */
20
20
  export type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
@@ -6,34 +6,22 @@ import * as i0 from "@angular/core";
6
6
  import * as i1 from "./bottomnavigation/bottomnavigation.component";
7
7
  import * as i2 from "./bottomnavigation/templates/item-template.directive";
8
8
  /**
9
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
9
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
10
10
  * definition for the BottomNavigation component.
11
- * @example
12
11
  *
13
- * ```ts-no-run
14
- * // Import the BottomNavigation module
12
+ * @example
13
+ * ```typescript
15
14
  * import { BottomNavigationModule } from '@progress/kendo-angular-navigation';
16
- *
17
- * // The browser platform with a compiler
18
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
19
15
  * import { BrowserModule } from '@angular/platform-browser';
20
- *
21
16
  * import { NgModule } from '@angular/core';
22
- *
23
- * // Import the app component
24
17
  * import { AppComponent } from './app.component';
25
18
  *
26
- * // Define the app module
27
- * _@NgModule({
28
- * declarations: [AppComponent], // declare app component
29
- * imports: [BrowserModule, BottomNavigationModule], // import BottomNavigation module
19
+ * @NgModule({
20
+ * declarations: [AppComponent],
21
+ * imports: [BrowserModule, BottomNavigationModule],
30
22
  * bootstrap: [AppComponent]
31
23
  * })
32
24
  * export class AppModule {}
33
- *
34
- * // Compile and launch the module
35
- * platformBrowserDynamic().bootstrapModule(AppModule);
36
- *
37
25
  * ```
38
26
  */
39
27
  export declare class BottomNavigationModule {
@@ -14,11 +14,14 @@ import { SVGIcon } from '@progress/kendo-angular-icons';
14
14
  import { BreadcrumbSize } from './models/breadcrumb-size';
15
15
  import * as i0 from "@angular/core";
16
16
  /**
17
- * Represents the [Kendo UI Breadcrumb component for Angular]({% slug overview_breadcrumb %}).
17
+ * Represents the [Kendo UI Breadcrumb component for Angular](slug:overview_breadcrumb).
18
+ *
19
+ * Use the Breadcrumb component to allow users to navigate through a hierarchical structure. The component automatically handles overflow
20
+ * scenarios and supports customizable separators, templates, and collapse modes.
18
21
  *
19
22
  * @example
20
- * ```ts-no-run
21
- * _@Component({
23
+ * ```typescript
24
+ * @Component({
22
25
  * selector: 'my-app',
23
26
  * template: `
24
27
  * <kendo-breadcrumb
@@ -49,12 +52,12 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
49
52
  private zone;
50
53
  private renderer;
51
54
  /**
52
- * The collection of items that will be rendered in the Breadcrumb.
55
+ * Configures the collection of items that will be rendered in the Breadcrumb.
53
56
  */
54
57
  set items(items: any[]);
55
58
  get items(): any[];
56
59
  /**
57
- * Defines a name of a [built-in icon]({% slug icons %}) in a Kendo UI theme.
60
+ * Specifies the name of a [built-in font icon](slug:icon_list) in a Kendo UI theme to be rendered as a separator.
58
61
  */
59
62
  separatorIcon: string;
60
63
  /**
@@ -62,30 +65,22 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
62
65
  */
63
66
  separatorSVGIcon: SVGIcon;
64
67
  /**
65
- * Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
66
- *
67
- * The possible values are:
68
- * - `auto` (default)&mdash;items are automatically collapsed based on the width of the Breadcrumb.
69
- * - `wrap`&mdash;items are wrapped on multiple rows.
70
- * - `none`&mdash;all items are expanded on the same row.
68
+ * Controls the collapse mode of the Breadcrumb.
69
+ * For more information and example, refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
71
70
  *
72
- * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
71
+ * @default `auto`
73
72
  */
74
73
  set collapseMode(mode: BreadCrumbCollapseMode);
75
74
  get collapseMode(): BreadCrumbCollapseMode;
76
75
  /**
77
- * Specifies the padding of all Breadcrumb elements.
76
+ * Determines the padding of all Breadcrumb elements.
78
77
  *
79
- * The possible values are:
80
- * * `small`
81
- * * `medium` (default)
82
- * * `large`
83
- * * `none`
78
+ * @default `medium`
84
79
  */
85
80
  set size(size: BreadcrumbSize);
86
81
  get size(): BreadcrumbSize;
87
82
  /**
88
- * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
83
+ * Fires when you click a Breadcrumb item. The event will not be fired by disabled items and the last item.
89
84
  */
90
85
  itemClick: EventEmitter<BreadCrumbItem>;
91
86
  /**
@@ -19,38 +19,37 @@ export interface BreadCrumbItemModel {
19
19
  data: BreadCrumbItem;
20
20
  }
21
21
  /**
22
- * An interface for the Breadcrumb items.
22
+ * Represents an interface that defines the structure of individual Breadcrumb items.
23
23
  */
24
24
  export interface BreadCrumbItem {
25
25
  /**
26
- * Specifies the text content rendered inside the item. The numeric item index is rendered by default.
26
+ * Sets the text content for the item. If not provided, the numeric item index appears by default.
27
27
  */
28
28
  text?: string;
29
29
  /**
30
- * Sets the title of the item ([see example]({% slug overview_breadcrumb %})). Rendered as a `title` attribute on the item.
30
+ * Provides a title for the item ([see example]({% slug overview_breadcrumb %})). The value appears as a `title` attribute on the element.
31
31
  */
32
32
  title?: string;
33
33
  /**
34
- * Specifies if the item is disabled ([see example]({% slug item_appearance_breadcrumb %})#toc-disabled-items). Rendered as an `aria-disabled` attribute on the item.
34
+ * Determines if the item is disabled ([see example]({% slug item_appearance_breadcrumb %})#toc-disabled-items). The value appears as an `aria-disabled` attribute on the element.
35
+ *
36
+ * @default false
35
37
  */
36
38
  disabled?: boolean;
37
39
  /**
38
- * Defines the name for a [built-in icon]({% slug icons %}) in a Kendo UI theme ([see example](slug:item_appearance_breadcrumb#toc-displaying-font-icons)).
39
- * The icon is rendered inside the item by a `span.k-icon element`.
40
+ * Specifies the name of a [built-in font icon](slug:icon_list) in a Kendo UI theme ([see example](slug:item_appearance_breadcrumb#toc-displaying-font-icons)). The icon appears inside the item in a `span.k-icon` element.
40
41
  */
41
42
  icon?: string;
42
43
  /**
43
- * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the BreadCrumb item ([see example](slug:item_appearance_breadcrumb#toc-displaying-svg-icons)).
44
+ * Sets an [`SVGIcon`](slug:api_icons_svgicon) to display inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-svg-icons)).
44
45
  */
45
46
  svgIcon?: SVGIcon;
46
47
  /**
47
- * Defines a CSS class—or multiple classes separated by spaces— which are applied to a `span` element inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-font-icons)).
48
- * Allows the usage of custom icons.
48
+ * Applies one or more CSS classes to a `span` element inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-font-icons)). Use this to show custom icons.
49
49
  */
50
50
  iconClass?: string;
51
51
  /**
52
- * Defines a URL which is used for an `img` element inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-item-images)).
53
- * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
52
+ * Provides a URL for an `img` element inside the item ([see example](slug:item_appearance_breadcrumb#toc-displaying-item-images)). The URL can be relative or absolute. If relative, it is resolved against the web page URL.
54
53
  */
55
54
  imageUrl?: string;
56
55
  }
@@ -3,7 +3,6 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Represents the possible size options of the Breadcrumb.
7
- * @default `medium`
6
+ * Represents the possible size options that control the padding of the Breadcrumb elements.
8
7
  */
9
8
  export type BreadcrumbSize = 'small' | 'medium' | 'large' | 'none';
@@ -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
- * Sets the Collapse mode of the Breadcrumb.
6
+ * Defines the collapse mode of the Breadcrumb. This type provides settings to control how the breadcrumb handles overflow scenarios when there is not
7
+ * enough space to display all items.
8
+ *
7
9
  * The available values are:
8
- * - `auto`(default)&mdash;Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
10
+ * - `auto`&mdash;Items are automatically collapsed based on the width of the Breadcrumb. First and last item always remain visible.
9
11
  * - `wrap`&mdash;Items are wrapped on multiple rows when their total width is bigger than the width of the BreadCrumb.
10
- * - `none`&mdash;All items are expanded on the same row. This scenario is useful when the Breadcrumb needs to be scrolled.
12
+ * - `none`&mdash;All items are expanded on the same row. This scenario is useful when you need to scroll the Breadcrumb.
11
13
  *
12
14
  * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
13
15
  */
@@ -5,10 +5,21 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Represents a template that defines the content of a Breadcrumb item.
8
+ * Represents a template that defines the content of a Breadcrumb item. This directive allows you to customize how each Breadcrumb item appears by providing
9
+ * your own template. You can access the item data and customize the display with icons, styling, or additional content beyond the default text representation.
10
+ *
9
11
  * To define the template, nest an `<ng-template>` tag with the `kendoBreadCrumbItemTemplate` directive inside the `<kendo-breadcrumb>` tag.
10
12
  *
11
13
  * For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
14
+ *
15
+ * @example
16
+ * ```html
17
+ * <kendo-breadcrumb [items]="items">
18
+ * <ng-template kendoBreadCrumbItemTemplate let-item="item">
19
+ * <span>{{ item.text }}</span>
20
+ * </ng-template>
21
+ * </kendo-breadcrumb>
22
+ * ```
12
23
  */
13
24
  export declare class BreadCrumbItemTemplateDirective {
14
25
  templateRef: TemplateRef<any>;