@progress/kendo-angular-navigation 19.1.2-develop.4 → 19.1.2-develop.5

package/fesm2022/progress-kendo-angular-navigation.mjs

@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1750156829,
-    version: '19.1.2-develop.4',
+    publishDate: 1750430744,
+    version: '19.1.2-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -35,7 +35,20 @@ const DEFAULT_POSITION = 'top';
 const DEFAULT_POSITION_MODE = 'static';
 /**
  * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
- * Used to display information, actions, branding titles and additional navigation on the current screen.
+ *
+ * Use the AppBar component to display information, actions, brand titles, and additional navigation on the current screen.
+ *
+ * @example
+ * ```html
+ * <kendo-appbar>
+ *    <kendo-appbar-section>
+ *        <h2>Page Title</h2>
+ *    </kendo-appbar-section>
+ * </kendo-appbar>
+ * ```
+ *
+ * @remarks
+ * Supported children components are: {@link AppBarSectionComponent}, {@link AppBarSpacerComponent}
  */
 class AppBarComponent {
     localizationService;
@@ -50,15 +63,7 @@ class AppBarComponent {
      * Specifies the position of the AppBar
      * ([see example]({% slug positioning_appbar %}#toc-position)).
      *
-     * * The possible values are:
-     * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
-     *    Setting the `position` property to `top` requires adding the Appbar component before the page content.
-     *    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.
-     *
-     * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
-     *    Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
-     *   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.
-     *
+     * @default 'top'
      */
     set position(position) {
         const newPosition = position ? position : DEFAULT_POSITION;
@@ -69,13 +74,9 @@ class AppBarComponent {
         return this._position;
     }
     /**
-     * Specifies the positionMode of the AppBar
-     * ([see example](slug:positioning_appbar#toc-position-mode)).
+     * Sets the position mode of the AppBar ([see example](slug:positioning_appbar#toc-position-mode)).
      *
-     * * The possible values are:
-     * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
-     * * `sticky`&mdash;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.
-     * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
+     * @default 'static'
      */
     set positionMode(positionMode) {
         const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
@@ -86,16 +87,9 @@ class AppBarComponent {
         return this._positionMode;
     }
     /**
-     * Specifies the theme color of the AppBar.
-     * The theme color will be applied as background color of the component.
-     *
-     *
-     * * The possible values are:
-     * * `light` (Default)&mdash;Applies coloring based on light theme color.
-     * * `dark`&mdash;Applies coloring based on dark theme color.
-     * * `inherit`&mdash; Applies inherited coloring value.
-     * * `primary`&mdash; Applies primary coloring value.
+     * Sets the theme color of the AppBar. The theme color is applied as the background color of the component.
      *
+     * @default 'light'
      */
     set themeColor(themeColor) {
         const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
@@ -188,20 +182,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Represents the [Kendo UI AppBarSection component for Angular]({% slug contentarrangement_appbar %}#toc-sections).
  *
- * @example
+ * Use the AppBarSection component to group content, actions, or navigation items within the AppBar.
  *
- * ```ts-no-run
- *  * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-appbar>
- *            <kendo-appbar-section>
- *                <h2>Page Title</h2>
- *            </kendo-appbar-section>
- *        </kendo-appbar>
- *    `
- * })
- * class AppComponent {}
+ * @example
+ * ```html
+ * <kendo-appbar>
+ *    <kendo-appbar-section>
+ *         <h2>Page Title</h2>
+ *     </kendo-appbar-section>
+ * </kendo-appbar>
+ * ```
  */
 class AppBarSectionComponent {
     hostClass = true;
@@ -285,30 +275,22 @@ const closestItem$1 = (target, targetAttr, scope) => closestInScope$1(target, el
 
 /**
  * Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
- * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
  *
- * @example
+ * Use the AppBarSpacer component to add white space between AppBar sections and customize its width.
  *
- * ```ts-no-run
- *  * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-appbar>
- *            <kendo-appbar-section>
- *                 <button kendoButton fillMode="flat">
- *                     <kendo-icon name="menu"></kendo-icon>
- *                 </button>
- *            </kendo-appbar-section>
+ * @example
+ * ```html
+ * <kendo-appbar>
+ *    <kendo-appbar-section>
+ *        <button kendoButton fillMode="flat" [svgIcon]="menuIcon"></button>
+ *    </kendo-appbar-section>
  *
- *            <kendo-appbar-spacer></kendo-appbar-spacer>
+ *    <kendo-appbar-spacer></kendo-appbar-spacer>
  *
- *            <kendo-appbar-section>
- *                <h2>Page Title</h2>
- *            </kendo-appbar-section>
- *        </kendo-appbar>
- *    `
- * })
- * class AppComponent {}
+ *     <kendo-appbar-section>
+ *          <h2>Page Title</h2>
+ *     </kendo-appbar-section>
+ * </kendo-appbar>
  * ```
  */
 class AppBarSpacerComponent {
@@ -321,7 +303,7 @@ class AppBarSpacerComponent {
     /**
      * Specifies the width of the AppBarSpacer.
      *
-     * If not set, the AppBarSpacer will take all the available space.
+     * If not set, the AppBarSpacer will take all of the available space.
      */
     width;
     constructor(renderer, element) {
@@ -355,23 +337,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Arguments for the `itemClick` event of the ActionSheet.
+ * Provides the event data for the `itemClick` event of the ActionSheet component.
+ *
+ * Use this event to access the clicked item and the original DOM event.
  */
 class ActionSheetItemClickEvent {
     /**
-     * The ActionSheet item that was clicked.
+     * Provides the ActionSheet item that was clicked.
      */
     item;
     /**
-     * The DOM event that triggered the `itemClick` event.
+     * Represents the original DOM event that triggered the `itemClick` event.
      */
     originalEvent;
 }
 
 /**
- * Represents a template that defines the header content of the ActionSheet. Utilizing the template overrides both the `title` and `subtitle` of the ActionSheet.
+ * 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.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet>
+ *   <ng-template kendoActionSheetHeaderTemplate>
+ *     <h3>Custom Header</h3>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 class ActionSheetHeaderTemplateDirective {
     templateRef;
@@ -392,9 +385,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the item content of the ActionSheet.
+ * Represents a template for customizing the content of each ActionSheet item.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetItemTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet [items]="items">
+ *   <ng-template kendoActionSheetItemTemplate let-item>
+ *     <span>{{ item.title }} (custom)</span>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 class ActionSheetItemTemplateDirective {
     templateRef;
@@ -415,9 +417,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the items list content of the ActionSheet.
+ * Represents a template for customizing the list content of the ActionSheet items.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet [items]="items">
+ *   <ng-template kendoActionSheetContentTemplate>
+ *     <div>Custom content here</div>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 class ActionSheetContentTemplateDirective {
     templateRef;
@@ -438,9 +449,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the footer of the ActionSheet.
+ * Represents a template for customizing the footer of the ActionSheet.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet>
+ *   <ng-template kendoActionSheetFooterTemplate>
+ *     <button kendoButton>Custom Footer Button</button>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 class ActionSheetFooterTemplateDirective {
     templateRef;
@@ -461,9 +481,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents a template that defines the content of the ActionSheet.
+ * Represents a template for customizing the overall content of the ActionSheet.
  * To define the template, nest an `<ng-template>` tag
  * with the `kendoActionSheetTemplate` directive inside the `<kendo-actionsheet>` tag.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet>
+ *   <ng-template kendoActionSheetTemplate>
+ *     <div>Custom ActionSheet content</div>
+ *   </ng-template>
+ * </kendo-actionsheet>
+ * ```
  */
 class ActionSheetTemplateDirective {
     templateRef;
@@ -688,7 +717,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
 /**
  * Represents the [Kendo UI ActionSheet component for Angular](slug:overview_actionsheet).
- * Used to display a set of choices related to a task the user initiates.
+ * 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.
+ *
+ * @example
+ * ```html
+ * <kendo-actionsheet [items]="actionItems" [expanded]="true">
+ * </kendo-actionsheet>
+ * ```
  */
 class ActionSheetComponent {
     element;
@@ -712,54 +747,50 @@ class ActionSheetComponent {
      */
     direction;
     /**
-     * Specifies the ActionSheet action buttons.
+     * Specifies the action buttons displayed in the ActionSheet footer.
      */
     actions;
     /**
-     * Specifies the layout of the action buttons.
-     * By default, the action buttons are rendered horizontally and stretched.
+     * Configures the layout of the action buttons in the footer. By default, actions are arranged horizontally and stretched to fill the container.
      */
     actionsLayout = {
         orientation: 'horizontal',
         alignment: 'stretched'
     };
     /**
-     * Specifies if the ActionSheet is closed on overlay click.
+     * Determines whether the ActionSheet closes when the overlay is clicked.
      *
      * @default false
      */
     overlayClickClose = false;
     /**
-     * Specifies the text that is rendered as title.
+     * Sets the title text displayed in the ActionSheet header.
      */
     title;
     /**
-     * Specifies the text that is rendered under the title.
+     * Sets the subtitle text displayed below the title in the header.
      */
     subtitle;
     /**
-     * The collection of items that will be rendered in the ActionSheet.
+     * Provides the collection of items rendered in the ActionSheet content area.
      */
     items;
     /**
-     * The CSS classes that will be rendered on the inner ActionSheet element.
-     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']).
+     * Applies CSS classes to the inner ActionSheet element. Accepts any value supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
      */
     cssClass;
     /**
-     * The inline styles that will be rendered on the inner ActionSheet element.
-     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']).
+     * Applies inline styles to the inner ActionSheet element. Accepts any value supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
      */
     cssStyle;
     /**
-     * Configures the ActionSheet opening and closing animations ([see example](slug:animations_actionsheet)).
-     * By default, the animations are turned off. The default animations' duration is `300ms`.
+     * Configures the opening and closing animations for the ActionSheet ([see example](slug:animations_actionsheet)).
      *
      * @default true
      */
     animation = true;
     /**
-     * Specifies the state of the ActionSheet.
+     * Controls whether the ActionSheet is expanded or collapsed.
      *
      * @default false
      */
@@ -768,7 +799,6 @@ class ActionSheetComponent {
      * Sets the `aria-labelledby` attribute of the ActionSheet wrapper element.
      * Use this option when the built-in header element is replaced through the [`ActionSheetHeaderTemplate`](slug:api_navigation_actionsheetheadertemplatedirective)
      * or [`ActionSheetContentTemplate`](slug:api_navigation_actionsheetcontenttemplatedirective).
-     *
      */
     titleId = getId('k-actionsheet-title');
     /**
@@ -779,7 +809,7 @@ class ActionSheetComponent {
     initialFocus = true;
     /**
      * Fires when the `expanded` property of the component is updated.
-     * Used to provide a two-way binding for the `expanded` property.
+     * You can use this event to provide two-way binding for the `expanded` property.
      */
     expandedChange = new EventEmitter();
     /**
@@ -1503,23 +1533,23 @@ class PreventableEvent {
 }
 
 /**
- * Arguments for the `select` event of the BottomNavigation.
+ * Provides the arguments for the `select` event of the BottomNavigation.
  */
 class BottomNavigationSelectEvent extends PreventableEvent {
     /**
-     * The index of the selected item in the `items` collection.
+     * Represents the index of the selected item in the `items` collection.
      */
     index;
     /**
-     * The selected BottomNavigation item.
+     * Represents the selected BottomNavigation item.
      */
     item;
     /**
-     * The DOM event that triggered the selection.
+     * Provides the DOM event that triggered the selection.
      */
     originalEvent;
     /**
-     * The BottomNavigation that triggered the event.
+     * Provides a reference to the BottomNavigation instance that triggered the event.
      */
     sender;
     /**
@@ -1532,9 +1562,17 @@ class BottomNavigationSelectEvent extends PreventableEvent {
 }
 
 /**
- * Represents a template that defines the item content of the BottomNavigation.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
+ * Represents a template that defines the content of the BottomNavigation items. Use this directive to customize the appearance of each navigation item.
+ * To define the template, nest an `<ng-template>` tag with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
+ *
+ * @example
+ * ```html
+ * <kendo-bottomnavigation [items]="items">
+ *    <ng-template kendoBottomNavigationItemTemplate let-item="item">
+ *       <span>{{ item.text }}</span>
+ *    </ng-template>
+ * </kendo-bottomnavigation>
+ * ```
  */
 class BottomNavigationItemTemplateDirective {
     templateRef;
@@ -1686,9 +1724,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
  *
+ * Use the BottomNavigation component to let users quickly switch between primary views in your app.
+ *
  * @example
- * ```ts-no-run
- * _@Component({
+ * ```typescript
+ * @Component({
  *      selector: 'my-app',
  *      template: `
  *          <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
@@ -1699,7 +1739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *          { text: 'Inbox', icon: 'envelop', selected: true },
  *          { text: 'Calendar', icon: 'calendar'},
  *          { text: 'Profile', icon: 'user'}
- *      ]
+ *      ];
  * }
  * ```
  */
@@ -1710,27 +1750,25 @@ class BottomNavigationComponent {
     changeDetector;
     renderer;
     /**
-     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
+     * Provides the collection of items rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
      */
     items;
     /**
-     * Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+     * Shows a top border on the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
      *
      * @default false
      */
     border = false;
     /**
-     * Disables the whole BottomNavigation.
+     * Disables the entire BottomNavigation.
      *
      * @default false
      */
     disabled = false;
     /**
-     * The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+     * Sets the fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
      *
-     * * The possible values are:
-     * * (Default) `flat`
-     * * `solid`
+     * @default 'flat'
      */
     set fill(fill) {
         this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.fill}`);
@@ -1743,11 +1781,9 @@ class BottomNavigationComponent {
         return this._fill;
     }
     /**
-     * Specifies how the icon and text label are positioned in the BottomNavigation items.
+     * Controls how the icon and text label are positioned in the BottomNavigation items.
      *
-     * The possible values are:
-     * * (Default) `vertical` - Renders the text below the icon.
-     * * `horizontal` - Renders the icon and the text on the same line.
+     * @default 'vertical'
      */
     set itemFlow(itemFlow) {
         this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-item-flow-${this.itemFlow}`);
@@ -1758,11 +1794,9 @@ class BottomNavigationComponent {
         return this._itemFlow;
     }
     /**
-     * Specifies the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
+     * Sets the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
      *
-     * The possible values are:
-     * * (Default) `fixed` - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
-     * * `sticky` - Positions the BottomNavigation at the end of the scrollable container.
+     * @default 'fixed'
      */
     set positionMode(positionMode) {
         this.renderer.removeClass(this._nativeHostElement, `k-pos-${this.positionMode}`);
@@ -1773,19 +1807,9 @@ class BottomNavigationComponent {
         return this._positionMode;
     }
     /**
-     * Specifies the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+     * Sets the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
      *
-     * * The possible values are:
-     * * (Default) `primary` - Applies coloring based on the primary theme color.
-     * * `secondary` - Applies coloring based on the secondary theme color.
-     * * `tertiary` - Applies coloring based on the tertiary theme color.
-     * * `info` - Applies coloring based on the info theme color.
-     * * `success` - Applies coloring based on the success theme color.
-     * * `warning` - Applies coloring based on the warning theme color.
-     * * `error` - Applies coloring based on the error theme color.
-     * * `dark` - Applies coloring based on the dark theme color.
-     * * `light` - Applies coloring based on the light theme color.
-     * * `inverse` - Applies coloring based on the inverted theme color.
+     * @default 'primary'
      */
     set themeColor(themeColor) {
         const newColor = colors.find(color => color === themeColor);
@@ -1799,7 +1823,7 @@ class BottomNavigationComponent {
         return this._themeColor;
     }
     /**
-     * Fires each time an item is selected. This event is preventable.
+     * Fires when a user selects an item. This event is preventable.
      */
     select = new EventEmitter();
     /**
@@ -2014,10 +2038,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents a template that defines the content of a Breadcrumb item.
+ * Represents a template that defines the content of a Breadcrumb item. This directive allows you to customize how each Breadcrumb item appears by providing
+ * your own template. You can access the item data and customize the display with icons, styling, or additional content beyond the default text representation.
+ *
  * To define the template, nest an `<ng-template>` tag with the `kendoBreadCrumbItemTemplate` directive inside the `<kendo-breadcrumb>` tag.
  *
  * For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
+ *
+ * @example
+ * ```html
+ * <kendo-breadcrumb [items]="items">
+ *    <ng-template kendoBreadCrumbItemTemplate let-item="item">
+ *       <span>{{ item.text }}</span>
+ *    </ng-template>
+ * </kendo-breadcrumb>
+ * ```
  */
 class BreadCrumbItemTemplateDirective {
     templateRef;
@@ -2442,11 +2477,14 @@ const expandFirst = toggleFirst(true);
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Represents the [Kendo UI Breadcrumb component for Angular]({% slug overview_breadcrumb %}).
+ * Represents the [Kendo UI Breadcrumb component for Angular](slug:overview_breadcrumb).
+ *
+ * Use the Breadcrumb component to allow users to navigate through a hierarchical structure. The component automatically handles overflow
+ * scenarios and supports customizable separators, templates, and collapse modes.
  *
  * @example
- * ```ts-no-run
- * _@Component({
+ * ```typescript
+ * @Component({
  *      selector: 'my-app',
  *      template: `
  *          <kendo-breadcrumb
@@ -2477,7 +2515,7 @@ class BreadCrumbComponent {
     zone;
     renderer;
     /**
-     * The collection of items that will be rendered in the Breadcrumb.
+     * Configures the collection of items that will be rendered in the Breadcrumb.
      */
     set items(items) {
         this._items = items || [];
@@ -2487,7 +2525,7 @@ class BreadCrumbComponent {
         return this._items;
     }
     /**
-     * Defines a name of a [built-in icon]({% slug icons %}) in a Kendo UI theme.
+     * Specifies the name of a [built-in font icon](slug:icon_list) in a Kendo UI theme to be rendered as a separator.
      */
     separatorIcon;
     /**
@@ -2495,14 +2533,10 @@ class BreadCrumbComponent {
      */
     separatorSVGIcon;
     /**
-     * Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
-     *
-     * The possible values are:
-     * - `auto` (default)&mdash;items are automatically collapsed based on the width of the Breadcrumb.
-     * - `wrap`&mdash;items are wrapped on multiple rows.
-     * - `none`&mdash;all items are expanded on the same row.
+     * Controls the collapse mode of the Breadcrumb.
+     * For more information and example, refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
      *
-     * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
+     * @default `auto`
      */
     set collapseMode(mode) {
         if (isDevMode() && ['auto', 'wrap', 'none'].indexOf(mode) < 0) {
@@ -2515,13 +2549,9 @@ class BreadCrumbComponent {
         return this._collapseMode;
     }
     /**
-     * Specifies the padding of all Breadcrumb elements.
+     * Determines the padding of all Breadcrumb elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default `medium`
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -2532,7 +2562,7 @@ class BreadCrumbComponent {
         return this._size;
     }
     /**
-     * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
+     * Fires when you click a Breadcrumb item. The event will not be fired by disabled items and the last item.
      */
     itemClick = new EventEmitter();
     /**
@@ -2787,7 +2817,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
-* Utility array that contains all `ActionSheet` related components and directives.
+* Use this utility array to access all ActionSheet-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_ACTIONSHEET } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_ACTIONSHEET],
+*   template: `
+*     <kendo-actionsheet [items]="items">
+*     </kendo-actionsheet>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 const KENDO_ACTIONSHEET = [
     ActionSheetComponent,
@@ -2799,7 +2846,25 @@ const KENDO_ACTIONSHEET = [
     ActionSheetTemplateDirective
 ];
 /**
-* Utility array that contains all `AppBar` related components and directives.
+* Use this utility array to access all AppBar-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_APPBAR } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_APPBAR],
+*   template: `
+*     <kendo-appbar>
+*       <!-- AppBar content -->
+*     </kendo-appbar>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 const KENDO_APPBAR = [
     AppBarComponent,
@@ -2807,21 +2872,75 @@ const KENDO_APPBAR = [
     AppBarSpacerComponent
 ];
 /**
-* Utility array that contains all `BottomNavigation` related components and directives.
+* Use this utility array to access all BottomNavigation-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_BOTTOMNAVIGATION } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_BOTTOMNAVIGATION],
+*   template: `
+*     <kendo-bottomnavigation [items]="items">
+*     </kendo-bottomnavigation>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 const KENDO_BOTTOMNAVIGATION = [
     BottomNavigationComponent,
     BottomNavigationItemTemplateDirective
 ];
 /**
-* Utility array that contains all `BreadCrumb` related components and directives.
+* Use this utility array to access all BreadCrumb-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_BREADCRUMB } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_BREADCRUMB],
+*   template: `
+*     <kendo-breadcrumb [items]="items">
+*     </kendo-breadcrumb>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 const KENDO_BREADCRUMB = [
     BreadCrumbComponent,
     BreadCrumbItemTemplateDirective
 ];
 /**
-* Utility array that contains all `@progress/kendo-angular-navigation` related components and directives.
+* Use this utility array to access all `@progress/kendo-angular-navigation`-related components and directives in a standalone Angular component.
+*
+* @example
+* ```typescript
+* import { Component } from '@angular/core';
+* import { KENDO_NAVIGATION } from '@progress/kendo-angular-navigation';
+*
+* @Component({
+*   selector: 'my-app',
+*   standalone: true,
+*   imports: [KENDO_NAVIGATION],
+*   template: `
+*     <kendo-appbar>
+*        <!-- AppBar content -->
+*     </kendo-appbar>
+*     <kendo-breadcrumb [items]="breadcrumbItems">
+*     </kendo-breadcrumb>
+*   `
+* })
+* export class AppComponent {}
+* ```
 */
 const KENDO_NAVIGATION = [
     ...KENDO_ACTIONSHEET,
@@ -2832,35 +2951,22 @@ const KENDO_NAVIGATION = [
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the AppBar component.
  *
  * @example
- *
- * ```ts-no-run
- * // Import the AppBar module
+ * ```typescript
  * import { AppBarModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, AppBarModule], // import AppBar module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, AppBarModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class AppBarModule {
@@ -2878,34 +2984,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Navigation components.
  *
  * @example
- *
- * ```ts-no-run
- * // Import the Navigation module
+ * ```typescript
  * import { NavigationModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * import { BrowserModule } from '@angular/platform-browser';
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, NavigationModule], // import Navigation module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, NavigationModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class NavigationModule {
@@ -2924,34 +3018,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the BreadCrumb component.
- * @example
  *
- * ```ts-no-run
- * // Import the BreadCrumb module
+ * @example
+ * ```typescript
  * import { BreadCrumbModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BreadCrumbModule], // import BreadCrumb module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, BreadCrumbModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class BreadCrumbModule {
@@ -2970,34 +3052,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the BottomNavigation component.
- * @example
  *
- * ```ts-no-run
- * // Import the BottomNavigation module
+ * @example
+ * ```typescript
  * import { BottomNavigationModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BottomNavigationModule], // import BottomNavigation module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, BottomNavigationModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class BottomNavigationModule {
@@ -3016,35 +3086,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the ActionSheet component.
  *
  * @example
- *
- * ```ts-no-run
- * // Import the ActionSheet module
+ * ```typescript
  * import { ActionSheetModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  * import { BrowserModule } from '@angular/platform-browser';
- *
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, ActionSheetModule], // import ActionSheet module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, ActionSheetModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class ActionSheetModule {