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

package/esm2022/bottomnavigation/bottomnavigation.component.mjs

@@ -19,9 +19,11 @@ import * as i1 from "@progress/kendo-angular-l10n";
 /**
  * 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>
@@ -32,7 +34,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  *          { text: 'Inbox', icon: 'envelop', selected: true },
  *          { text: 'Calendar', icon: 'calendar'},
  *          { text: 'Profile', icon: 'user'}
- *      ]
+ *      ];
  * }
  * ```
  */
@@ -43,27 +45,25 @@ export 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}`);
@@ -76,11 +76,9 @@ export 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}`);
@@ -91,11 +89,9 @@ export 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}`);
@@ -106,19 +102,9 @@ export 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);
@@ -132,7 +118,7 @@ export 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();
     /**

package/esm2022/bottomnavigation/events/select-event.mjs

@@ -4,23 +4,23 @@
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from '../../common/preventable-event';
 /**
- * Arguments for the `select` event of the BottomNavigation.
+ * Provides the arguments for the `select` event of the BottomNavigation.
  */
 export 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;
     /**

package/esm2022/bottomnavigation/templates/item-template.directive.mjs

@@ -5,9 +5,17 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
+ * ```
  */
 export class BottomNavigationItemTemplateDirective {
     templateRef;

package/esm2022/bottomnavigation/types/bottomnavigation-theme-color.mjs

@@ -3,18 +3,18 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
+ * Represents the possible theme colors 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.
+ * The possible values are:
+ * * `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.
  */
 export {};

package/esm2022/bottomnavigation.module.mjs

@@ -10,34 +10,22 @@ import * as i1 from "./bottomnavigation/bottomnavigation.component";
 import * as i2 from "./bottomnavigation/templates/item-template.directive";
 // 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);
- *
  * ```
  */
 export class BottomNavigationModule {

package/esm2022/breadcrumb/breadcrumb.component.mjs

@@ -20,11 +20,14 @@ import { NgIf, NgClass, AsyncPipe } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
- * 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
@@ -55,7 +58,7 @@ export 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 || [];
@@ -65,7 +68,7 @@ export 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;
     /**
@@ -73,14 +76,10 @@ export 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) {
@@ -93,13 +92,9 @@ export 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;
@@ -110,7 +105,7 @@ export 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();
     /**

package/esm2022/breadcrumb/template-directives/item-template.directive.mjs

@@ -5,10 +5,21 @@
 import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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>
+ * ```
  */
 export class BreadCrumbItemTemplateDirective {
     templateRef;

package/esm2022/breadcrumb.module.mjs

@@ -11,34 +11,22 @@ import * as i1 from "./breadcrumb/breadcrumb.component";
 import * as i2 from "./breadcrumb/template-directives/item-template.directive";
 // 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);
- *
  * ```
  */
 export class BreadCrumbModule {

package/esm2022/directives.mjs

@@ -13,7 +13,24 @@ import { BottomNavigationItemTemplateDirective } from "./bottomnavigation/templa
 import { BreadCrumbComponent } from "./breadcrumb/breadcrumb.component";
 import { BreadCrumbItemTemplateDirective } from "./breadcrumb/template-directives/item-template.directive";
 /**
-* 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 {}
+* ```
 */
 export const KENDO_ACTIONSHEET = [
     ActionSheetComponent,
@@ -25,7 +42,25 @@ export 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 {}
+* ```
 */
 export const KENDO_APPBAR = [
     AppBarComponent,
@@ -33,21 +68,75 @@ export 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 {}
+* ```
 */
 export 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 {}
+* ```
 */
 export 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 {}
+* ```
 */
 export const KENDO_NAVIGATION = [
     ...KENDO_ACTIONSHEET,

package/esm2022/navigation.module.mjs

@@ -23,34 +23,22 @@ import * as i13 from "./breadcrumb/breadcrumb.component";
 import * as i14 from "./breadcrumb/template-directives/item-template.directive";
 // 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);
- *
  * ```
  */
 export class NavigationModule {

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export 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/'
 };