@progress/kendo-angular-navigation 19.0.0-develop.2 → 19.0.0-develop.21

package/actionsheet/actionsheet-view.component.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { AfterViewInit, ElementRef, NgZone, Renderer2 } from '@angular/core';
 import { ActionSheetHeaderTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './models';
 import { ActionSheetComponent } from './actionsheet.component';
 import * as i0 from "@angular/core";
@@ -11,22 +12,25 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI ActionSheetView component for Angular].
  * Used to display multiple views.
  */
-export declare class ActionSheetViewComponent {
+export declare class ActionSheetViewComponent implements AfterViewInit {
     actionSheet: ActionSheetComponent;
+    private renderer;
+    private host;
+    private zone;
     title: string;
     subtitle: string;
     titleId: string;
     hostClass: boolean;
-    animated: boolean;
     transitionDuration: string;
     transitionProperty: string;
     headerTemplate: ActionSheetHeaderTemplateDirective;
     contentTemplate: ActionSheetContentTemplateDirective;
     footerTemplate: ActionSheetFooterTemplateDirective;
     actionSheetTemplate: ActionSheetTemplateDirective;
-    constructor(actionSheet: ActionSheetComponent);
+    ngAfterViewInit(): void;
+    constructor(actionSheet: ActionSheetComponent, renderer: Renderer2, host: ElementRef, zone: NgZone);
     get orientationClass(): string;
     get alignmentClass(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ActionSheetViewComponent, [{ optional: true; host: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionSheetViewComponent, [{ optional: true; host: true; }, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ActionSheetViewComponent, "kendo-actionsheet-view", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "titleId": { "alias": "titleId"; "required": false; }; }, {}, ["headerTemplate", "contentTemplate", "footerTemplate", "actionSheetTemplate"], never, true, never>;
 }

package/actionsheet/actionsheet.component.d.ts

@@ -12,7 +12,7 @@ import { ActionSheetActionsLayout } from './models/actionsheet-action-layout';
 import { ActionSheetViewComponent } from './actionsheet-view.component';
 import * as i0 from "@angular/core";
 /**
- * Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
+ * 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.
  */
 export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, OnChanges {
@@ -72,8 +72,8 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, O
      */
     cssStyle: any;
     /**
-     * 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 ActionSheet opening and closing animations ([see example](slug:animations_actionsheet)).
+     * By default, the animations are turned off. The default animations' duration is `300ms`.
      *
      * @default true
      */
@@ -86,11 +86,17 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, O
     expanded: boolean;
     /**
      * 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 %}).
+     * 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: string;
+    /**
+     * @hidden
+     *
+     * Determines if the ActionSheet should focus the first focusable element when opened.
+     */
+    initialFocus: boolean;
     /**
      * Fires when the `expanded` property of the component is updated.
      * Used to provide a two-way binding for the `expanded` property.
@@ -207,5 +213,5 @@ export declare class ActionSheetComponent implements AfterViewInit, OnDestroy, O
     private onAnimationEnd;
     private playAnimation;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActionSheetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActionSheetComponent, "kendo-actionsheet", ["kendoActionSheet"], { "actions": { "alias": "actions"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "overlayClickClose": { "alias": "overlayClickClose"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "items": { "alias": "items"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "cssStyle": { "alias": "cssStyle"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "titleId": { "alias": "titleId"; "required": false; }; }, { "expandedChange": "expandedChange"; "action": "action"; "expand": "expand"; "collapse": "collapse"; "itemClick": "itemClick"; "overlayClick": "overlayClick"; }, ["actionSheetTemplate", "headerTemplate", "contentTemplate", "itemTemplate", "footerTemplate", "actionSheetViews"], ["kendo-actionsheet-view"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionSheetComponent, "kendo-actionsheet", ["kendoActionSheet"], { "actions": { "alias": "actions"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "overlayClickClose": { "alias": "overlayClickClose"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "items": { "alias": "items"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; "cssStyle": { "alias": "cssStyle"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "titleId": { "alias": "titleId"; "required": false; }; "initialFocus": { "alias": "initialFocus"; "required": false; }; }, { "expandedChange": "expandedChange"; "action": "action"; "expand": "expand"; "collapse": "collapse"; "itemClick": "itemClick"; "overlayClick": "overlayClick"; }, ["actionSheetTemplate", "headerTemplate", "contentTemplate", "itemTemplate", "footerTemplate", "actionSheetViews"], ["kendo-actionsheet-view"], true, never>;
 }

package/actionsheet/models/actionsheet-action-layout.d.ts

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Defines the possible orientations for the ActionSheet actions.
+ * Defines the possible orientations for the ActionSheet action buttons.
  * - `horizontal`: The actions are laid out in a horizontal row.
  * - `vertical`: The actions are stacked vertically.
  */
 export type ActionSheetActionsOrientation = 'horizontal' | 'vertical';
 /**
- * Defines the possible alignments for the ActionSheet actions.
+ * Defines the possible alignments for the ActionSheet action buttons.
  * - `start`: Aligns the actions to the start of the container.
  * - `center`: Centers the actions within the container.
  * - `end`: Aligns the actions to the end of the container.
@@ -18,16 +18,16 @@ export type ActionSheetActionsOrientation = 'horizontal' | 'vertical';
  */
 export type ActionSheetActionsAlignment = 'start' | 'center' | 'end' | 'stretched' | 'justify';
 /**
- * Represents the layout configuration for the ActionSheet actions.
+ * Represents the layout configuration for the ActionSheet action buttons.
  */
 export interface ActionSheetActionsLayout {
     /**
-     * Specifies the orientation of the actions.
+     * The orientation of the actions.
      * Defaults to `horizontal` if not specified.
      */
     orientation?: ActionSheetActionsOrientation;
     /**
-     * Specifies the alignment of the actions within the container.
+     * The alignment of the actions within the container.
      * Defaults to `stretched` if not specified.
      */
     alignment?: ActionSheetActionsAlignment;

package/actionsheet/models/actionsheet-action.d.ts

@@ -5,7 +5,7 @@
 import { ButtonFillMode, ButtonSize, ButtonThemeColor } from "@progress/kendo-angular-buttons";
 import { SVGIcon } from "@progress/kendo-svg-icons";
 /**
- * The settings for the ActionSheet actions.
+ * The settings for the ActionSheet action buttons.
  */
 export interface ActionSheetAction {
     /**
@@ -25,19 +25,40 @@ export interface ActionSheetAction {
      */
     svgIcon?: SVGIcon;
     /**
-     * The title of the action button.
+     * The title of the action button. The title shows as the default tooltip for the action button.
      */
     title?: string;
     /**
-     * The size of the action button.
+     * The size of the action button. The supported values are:
+     * - `small`
+     * - `medium`
+     * - `large`
+     * - `none`
      */
     size?: ButtonSize;
     /**
-     * The fill mode of the action button.
+     * The fill mode of the action button. The supported values are:
+     * - `flat`
+     * - `outline`
+     * - `solid`
+     * - `link`
+     * - `clear`
+     * - `none`
      */
     fillMode?: ButtonFillMode;
     /**
-     * The theme color of the action button.
+     * The theme color of the action button. The possible values are:
+     * - `base`: Applies coloring based on the base theme color.
+     * - `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 inverse theme color.
      */
     themeColor?: ButtonThemeColor;
 }

package/esm2022/actionsheet/actionsheet-view.component.mjs

@@ -2,11 +2,12 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, Host, HostBinding, Input, Optional } from '@angular/core';
+import { Component, ContentChild, ElementRef, Host, HostBinding, Input, NgZone, Optional, Renderer2 } from '@angular/core';
 import { ActionSheetHeaderTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './models';
 import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { getId } from '../common/util';
 import { ActionSheetComponent } from './actionsheet.component';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "./actionsheet.component";
 /**
@@ -17,19 +18,31 @@ import * as i1 from "./actionsheet.component";
  */
 export class ActionSheetViewComponent {
     actionSheet;
+    renderer;
+    host;
+    zone;
     title;
     subtitle;
     titleId = getId('k-actionsheet-title');
     hostClass = true;
-    animated = true;
     transitionDuration = '500ms';
     transitionProperty = 'transform';
     headerTemplate;
     contentTemplate;
     footerTemplate;
     actionSheetTemplate;
-    constructor(actionSheet) {
+    ngAfterViewInit() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.actionSheet?.actionSheetViews?.length > 1) {
+                this.renderer.addClass(this.host.nativeElement, 'k-actionsheet-view-animated');
+            }
+        });
+    }
+    constructor(actionSheet, renderer, host, zone) {
         this.actionSheet = actionSheet;
+        this.renderer = renderer;
+        this.host = host;
+        this.zone = zone;
     }
     get orientationClass() {
         return this.actionSheet?.orientationClass;
@@ -37,8 +50,8 @@ export class ActionSheetViewComponent {
     get alignmentClass() {
         return this.actionSheet?.alignmentClass;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: i1.ActionSheetComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "class.k-actionsheet-view-animated": "this.animated", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: i1.ActionSheetComponent, host: true, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
         <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
             [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
         </ng-template>
@@ -112,7 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type: Optional
                 }, {
                     type: Host
-                }] }]; }, propDecorators: { title: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -121,9 +134,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-actionsheet-view']
-            }], animated: [{
-                type: HostBinding,
-                args: ['class.k-actionsheet-view-animated']
             }], transitionDuration: [{
                 type: HostBinding,
                 args: ['style.transition-duration']

package/esm2022/actionsheet/actionsheet.component.mjs

@@ -22,7 +22,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/animations";
 const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
 /**
- * Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
+ * 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.
  */
 export class ActionSheetComponent {
@@ -87,8 +87,8 @@ export class ActionSheetComponent {
      */
     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 ActionSheet opening and closing animations ([see example](slug:animations_actionsheet)).
+     * By default, the animations are turned off. The default animations' duration is `300ms`.
      *
      * @default true
      */
@@ -101,11 +101,17 @@ export class ActionSheetComponent {
     expanded = false;
     /**
      * 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 %}).
+     * 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');
+    /**
+     * @hidden
+     *
+     * Determines if the ActionSheet should focus the first focusable element when opened.
+     */
+    initialFocus = true;
     /**
      * Fires when the `expanded` property of the component is updated.
      * Used to provide a two-way binding for the `expanded` property.
@@ -322,7 +328,7 @@ export class ActionSheetComponent {
     }
     handleInitialFocus() {
         const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
-        if (firstFocusable) {
+        if (firstFocusable && this.initialFocus) {
             firstFocusable.focus();
         }
     }
@@ -381,7 +387,7 @@ export class ActionSheetComponent {
         this.player.play();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId", initialFocus: "initialFocus" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -619,6 +625,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], titleId: [{
                 type: Input
+            }], initialFocus: [{
+                type: Input
             }], expandedChange: [{
                 type: Output
             }], action: [{

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745321488,
-    version: '19.0.0-develop.2',
+    publishDate: 1747411659,
+    version: '19.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745321488,
-    version: '19.0.0-develop.2',
+    publishDate: 1747411659,
+    version: '19.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -687,7 +687,7 @@ 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 %}).
+ * 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.
  */
 class ActionSheetComponent {
@@ -752,8 +752,8 @@ class ActionSheetComponent {
      */
     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 ActionSheet opening and closing animations ([see example](slug:animations_actionsheet)).
+     * By default, the animations are turned off. The default animations' duration is `300ms`.
      *
      * @default true
      */
@@ -766,11 +766,17 @@ class ActionSheetComponent {
     expanded = false;
     /**
      * 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 %}).
+     * 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');
+    /**
+     * @hidden
+     *
+     * Determines if the ActionSheet should focus the first focusable element when opened.
+     */
+    initialFocus = true;
     /**
      * Fires when the `expanded` property of the component is updated.
      * Used to provide a two-way binding for the `expanded` property.
@@ -987,7 +993,7 @@ class ActionSheetComponent {
     }
     handleInitialFocus() {
         const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
-        if (firstFocusable) {
+        if (firstFocusable && this.initialFocus) {
             firstFocusable.focus();
         }
     }
@@ -1046,7 +1052,7 @@ class ActionSheetComponent {
         this.player.play();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetComponent, isStandalone: true, selector: "kendo-actionsheet", inputs: { actions: "actions", actionsLayout: "actionsLayout", overlayClickClose: "overlayClickClose", title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", cssStyle: "cssStyle", animation: "animation", expanded: "expanded", titleId: "titleId", initialFocus: "initialFocus" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -1284,6 +1290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], titleId: [{
                 type: Input
+            }], initialFocus: [{
+                type: Input
             }], expandedChange: [{
                 type: Output
             }], action: [{
@@ -1327,19 +1335,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ActionSheetViewComponent {
     actionSheet;
+    renderer;
+    host;
+    zone;
     title;
     subtitle;
     titleId = getId('k-actionsheet-title');
     hostClass = true;
-    animated = true;
     transitionDuration = '500ms';
     transitionProperty = 'transform';
     headerTemplate;
     contentTemplate;
     footerTemplate;
     actionSheetTemplate;
-    constructor(actionSheet) {
+    ngAfterViewInit() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.actionSheet?.actionSheetViews?.length > 1) {
+                this.renderer.addClass(this.host.nativeElement, 'k-actionsheet-view-animated');
+            }
+        });
+    }
+    constructor(actionSheet, renderer, host, zone) {
         this.actionSheet = actionSheet;
+        this.renderer = renderer;
+        this.host = host;
+        this.zone = zone;
     }
     get orientationClass() {
         return this.actionSheet?.orientationClass;
@@ -1347,8 +1367,8 @@ class ActionSheetViewComponent {
     get alignmentClass() {
         return this.actionSheet?.alignmentClass;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: ActionSheetComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "class.k-actionsheet-view-animated": "this.animated", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetViewComponent, deps: [{ token: ActionSheetComponent, host: true, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionSheetViewComponent, isStandalone: true, selector: "kendo-actionsheet-view", inputs: { title: "title", subtitle: "subtitle", titleId: "titleId" }, host: { properties: { "class.k-actionsheet-view": "this.hostClass", "style.transition-duration": "this.transitionDuration", "style.transition-property": "this.transitionProperty" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }], ngImport: i0, template: `
         <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
             [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
         </ng-template>
@@ -1422,7 +1442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type: Optional
                 }, {
                     type: Host
-                }] }]; }, propDecorators: { title: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
@@ -1431,9 +1451,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-actionsheet-view']
-            }], animated: [{
-                type: HostBinding,
-                args: ['class.k-actionsheet-view-animated']
             }], transitionDuration: [{
                 type: HostBinding,
                 args: ['style.transition-duration']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-navigation",
-  "version": "19.0.0-develop.2",
+  "version": "19.0.0-develop.21",
   "description": "Kendo UI Navigation for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -17,7 +17,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1745321488,
+      "publishDate": 1747411659,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -27,14 +27,14 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-common": "19.0.0-develop.2",
-    "@progress/kendo-angular-icons": "19.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "19.0.0-develop.2",
+    "@progress/kendo-angular-common": "19.0.0-develop.21",
+    "@progress/kendo-angular-icons": "19.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "19.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "19.0.0-develop.21"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-navigation.mjs",