@progress/kendo-angular-navigation 19.0.0-develop.1 → 19.0.0-develop.10

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Component, HostBinding, Input, Directive, Optional, EventEmitter, Output, ViewChild, ContentChild, ViewChildren, isDevMode, ElementRef, NgModule } from '@angular/core';
+import { Component, HostBinding, Input, Directive, Optional, EventEmitter, Output, ViewChild, ContentChildren, forwardRef, ContentChild, Host, ViewChildren, isDevMode, ElementRef, NgModule } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -14,6 +14,7 @@ import * as i2 from '@angular/animations';
 import { style, animate } from '@angular/animations';
 import { take, filter, map, startWith, share } from 'rxjs/operators';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
+import { ButtonDirective } from '@progress/kendo-angular-buttons';
 import { chevronRightIcon, chevronLeftIcon } from '@progress/kendo-svg-icons';
 
 /**
@@ -24,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1745317279,
-    version: '19.0.0-develop.1',
+    publishDate: 1746794940,
+    version: '19.0.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -686,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 {
@@ -696,6 +697,10 @@ class ActionSheetComponent {
     localizationService;
     builder;
     cdr;
+    /**
+     * @hidden
+     */
+    currentView = 1;
     /**
      * @hidden
      */
@@ -706,6 +711,24 @@ class ActionSheetComponent {
      * @hidden
      */
     direction;
+    /**
+     * Specifies the ActionSheet action buttons.
+     */
+    actions;
+    /**
+     * Specifies the layout of the action buttons.
+     * By default, the action buttons are rendered horizontally and stretched.
+     */
+    actionsLayout = {
+        orientation: 'horizontal',
+        alignment: 'stretched'
+    };
+    /**
+     * Specifies if the ActionSheet is closed on overlay click.
+     *
+     * @default false
+     */
+    overlayClickClose = false;
     /**
      * Specifies the text that is rendered as title.
      */
@@ -724,8 +747,13 @@ class ActionSheetComponent {
      */
     cssClass;
     /**
-     * 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`.
+     * 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']).
+     */
+    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`.
      *
      * @default true
      */
@@ -738,16 +766,26 @@ 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.
      */
     expandedChange = new EventEmitter();
+    /**
+     * Fires when any of the ActionSheet action buttons is clicked.
+     */
+    action = new EventEmitter();
     /**
      * Fires when the ActionSheet is expanded and its animation is complete.
      */
@@ -768,6 +806,10 @@ class ActionSheetComponent {
      * @hidden
      */
     childContainer;
+    /**
+     * @hidden
+     */
+    actionSheetViews;
     /**
      * @hidden
      */
@@ -824,6 +866,24 @@ class ActionSheetComponent {
             this.player.destroy();
         }
     }
+    /**
+     * @hidden
+     * Navigates to the next view.
+     */
+    nextView() {
+        if (this.currentView < this.actionSheetViews.length) {
+            this.currentView += 1;
+        }
+    }
+    /**
+     * @hidden
+     * Navigates to the previous view.
+     */
+    prevView() {
+        if (this.currentView > 1) {
+            this.currentView -= 1;
+        }
+    }
     /**
      * Toggles the visibility of the ActionSheet.
      *
@@ -850,6 +910,18 @@ class ActionSheetComponent {
             this[current ? 'expand' : 'collapse'].emit();
         }
     }
+    /**
+     * @hidden
+     */
+    get orientationClass() {
+        return this.actionsLayout.orientation ? `k-actions-${this.actionsLayout.orientation}` : '';
+    }
+    /**
+     * @hidden
+     */
+    get alignmentClass() {
+        return this.actionsLayout.alignment ? `k-actions-${this.actionsLayout.alignment}` : '';
+    }
     /**
      * @hidden
      */
@@ -873,6 +945,9 @@ class ActionSheetComponent {
      */
     onOverlayClick() {
         this.overlayClick.emit();
+        if (this.overlayClickClose) {
+            this.toggle(false);
+        }
     }
     /**
      * @hidden
@@ -918,7 +993,7 @@ class ActionSheetComponent {
     }
     handleInitialFocus() {
         const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
-        if (firstFocusable) {
+        if (firstFocusable && this.initialFocus) {
             firstFocusable.focus();
         }
     }
@@ -977,80 +1052,106 @@ 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: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded", titleId: "titleId" }, outputs: { expandedChange: "expandedChange", 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,
                 useValue: 'kendo.actionsheet.component'
             }
-        ], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }, { propertyName: "actionSheetViews", predicate: i0.forwardRef(function () { return ActionSheetViewComponent; }) }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container *ngIf="expanded">
             <div class="k-overlay" (click)="onOverlayClick()"></div>
             <div class="k-animation-container k-animation-container-shown">
                 <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                    <div class="k-actionsheet k-actionsheet-bottom"
+                    <div
+                        class="k-actionsheet k-actionsheet-bottom"
                         [ngClass]="cssClass"
+                        [ngStyle]="cssStyle"
                         role="dialog"
                         aria-modal="true"
-                        [attr.aria-labelledby]="titleId">
-
-                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
-                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
-                        </ng-template>
-
-                        <ng-template #defaultTemplate>
-                            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
-                                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
-                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
-                                </ng-template>
-
-                                <ng-template #defaultHeaderTemplate>
-                                    <div class="k-actionsheet-titlebar-group k-hbox">
-                                        <div class="k-actionsheet-title" [id]="titleId">
-                                            <div *ngIf="title" class="k-text-center">{{title}}</div>
-                                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                        [attr.aria-labelledby]="titleId"
+                        [style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
+                    >
+                        <ng-content *ngIf="actionSheetViews?.length > 0" select="kendo-actionsheet-view"></ng-content>
+
+                        <div *ngIf="actionSheetViews?.length === 0" class="k-actionsheet-view">
+                            <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
+                                [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
+                            </ng-template>
+
+                            <ng-template #defaultTemplate>
+                                <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
+                                    <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
+                                        [ngTemplateOutlet]="headerTemplate?.templateRef">
+                                    </ng-template>
+
+                                    <ng-template #defaultHeaderTemplate>
+                                        <div class="k-actionsheet-titlebar-group k-hbox">
+                                            <div class="k-actionsheet-title" [id]="titleId">
+                                                <div *ngIf="title" class="k-text-center">{{title}}</div>
+                                                <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                                            </div>
+                                        </div>
+                                    </ng-template>
+                                </div>
+
+                                <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
+                                    <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
+                                        [ngTemplateOutlet]="contentTemplate?.templateRef">
+                                    </ng-template>
+                                    <ng-template #defaultContentTemplate>
+                                        <div *ngIf="topGroupItems" kendoActionSheetList
+                                            class="k-list-ul"
+                                            role="group"
+                                            [groupItems]="topGroupItems"
+                                            [allItems]="items"
+                                            [itemTemplate]="itemTemplate?.templateRef"
+                                            (itemClick)="onItemClick($event)">
+                                        </div>
+                
+                                        <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
+                
+                                        <div *ngIf="bottomGroupItems" kendoActionSheetList
+                                            class="k-list-ul"
+                                            role="group"
+                                            [groupItems]="bottomGroupItems"
+                                            [allItems]="items"
+                                            [itemTemplate]="itemTemplate?.templateRef"
+                                            (itemClick)="onItemClick($event)">
                                         </div>
-                                    </div>
-                                </ng-template>
-                            </div>
-
-                            <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
-                                <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
-                                    [ngTemplateOutlet]="contentTemplate?.templateRef">
-                                </ng-template>
-                                <ng-template #defaultContentTemplate>
-                                    <div *ngIf="topGroupItems" kendoActionSheetList
-                                        class="k-list-ul"
-                                        role="group"
-                                        [groupItems]="topGroupItems"
-                                        [allItems]="items"
-                                        [itemTemplate]="itemTemplate?.templateRef"
-                                        (itemClick)="onItemClick($event)">
-                                    </div>
-            
-                                    <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
-            
-                                    <div *ngIf="bottomGroupItems" kendoActionSheetList
-                                        class="k-list-ul"
-                                        role="group"
-                                        [groupItems]="bottomGroupItems"
-                                        [allItems]="items"
-                                        [itemTemplate]="itemTemplate?.templateRef"
-                                        (itemClick)="onItemClick($event)">
-                                    </div>
-                                </ng-template>
-                            </div>
-                            <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
-                                <ng-template
-                                    [ngTemplateOutlet]="footerTemplate?.templateRef">
-                                </ng-template>
-                            </div>
-                        </ng-template>
+                                    </ng-template>
+                                </div>
+                                <div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
+                                    <ng-template
+                                        *ngIf="footerTemplate"
+                                        [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                    </ng-template>
+
+                                    <ng-container *ngIf="!footerTemplate && actions">
+                                        <button
+                                            *ngFor="let actionButton of actions"
+                                            kendoButton
+                                            type="button"
+                                            [icon]="actionButton.icon"
+                                            [title]="actionButton.title"
+                                            [svgIcon]="actionButton.svgIcon"
+                                            [themeColor]="actionButton.themeColor"
+                                            [fillMode]="actionButton.fillMode"
+                                            [size]="actionButton.size"
+                                            [attr.aria-label]="actionButton.text"
+                                            (click)="action.emit(actionButton)"
+                                        >
+                                            {{ actionButton.text }}
+                                        </button>
+                                    </ng-container>
+                                </div>
+                            </ng-template>
+                        </div>
                     </div>
                 </div>
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
@@ -1062,64 +1163,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <div class="k-overlay" (click)="onOverlayClick()"></div>
             <div class="k-animation-container k-animation-container-shown">
                 <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                    <div class="k-actionsheet k-actionsheet-bottom"
+                    <div
+                        class="k-actionsheet k-actionsheet-bottom"
                         [ngClass]="cssClass"
+                        [ngStyle]="cssStyle"
                         role="dialog"
                         aria-modal="true"
-                        [attr.aria-labelledby]="titleId">
-
-                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
-                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
-                        </ng-template>
-
-                        <ng-template #defaultTemplate>
-                            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
-                                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
-                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
-                                </ng-template>
-
-                                <ng-template #defaultHeaderTemplate>
-                                    <div class="k-actionsheet-titlebar-group k-hbox">
-                                        <div class="k-actionsheet-title" [id]="titleId">
-                                            <div *ngIf="title" class="k-text-center">{{title}}</div>
-                                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                        [attr.aria-labelledby]="titleId"
+                        [style.--kendo-actionsheet-view-current]="actionSheetViews?.length > 0 ? currentView : null"
+                    >
+                        <ng-content *ngIf="actionSheetViews?.length > 0" select="kendo-actionsheet-view"></ng-content>
+
+                        <div *ngIf="actionSheetViews?.length === 0" class="k-actionsheet-view">
+                            <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
+                                [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
+                            </ng-template>
+
+                            <ng-template #defaultTemplate>
+                                <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
+                                    <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
+                                        [ngTemplateOutlet]="headerTemplate?.templateRef">
+                                    </ng-template>
+
+                                    <ng-template #defaultHeaderTemplate>
+                                        <div class="k-actionsheet-titlebar-group k-hbox">
+                                            <div class="k-actionsheet-title" [id]="titleId">
+                                                <div *ngIf="title" class="k-text-center">{{title}}</div>
+                                                <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                                            </div>
+                                        </div>
+                                    </ng-template>
+                                </div>
+
+                                <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
+                                    <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
+                                        [ngTemplateOutlet]="contentTemplate?.templateRef">
+                                    </ng-template>
+                                    <ng-template #defaultContentTemplate>
+                                        <div *ngIf="topGroupItems" kendoActionSheetList
+                                            class="k-list-ul"
+                                            role="group"
+                                            [groupItems]="topGroupItems"
+                                            [allItems]="items"
+                                            [itemTemplate]="itemTemplate?.templateRef"
+                                            (itemClick)="onItemClick($event)">
+                                        </div>
+                
+                                        <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
+                
+                                        <div *ngIf="bottomGroupItems" kendoActionSheetList
+                                            class="k-list-ul"
+                                            role="group"
+                                            [groupItems]="bottomGroupItems"
+                                            [allItems]="items"
+                                            [itemTemplate]="itemTemplate?.templateRef"
+                                            (itemClick)="onItemClick($event)">
                                         </div>
-                                    </div>
-                                </ng-template>
-                            </div>
-
-                            <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
-                                <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
-                                    [ngTemplateOutlet]="contentTemplate?.templateRef">
-                                </ng-template>
-                                <ng-template #defaultContentTemplate>
-                                    <div *ngIf="topGroupItems" kendoActionSheetList
-                                        class="k-list-ul"
-                                        role="group"
-                                        [groupItems]="topGroupItems"
-                                        [allItems]="items"
-                                        [itemTemplate]="itemTemplate?.templateRef"
-                                        (itemClick)="onItemClick($event)">
-                                    </div>
-            
-                                    <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
-            
-                                    <div *ngIf="bottomGroupItems" kendoActionSheetList
-                                        class="k-list-ul"
-                                        role="group"
-                                        [groupItems]="bottomGroupItems"
-                                        [allItems]="items"
-                                        [itemTemplate]="itemTemplate?.templateRef"
-                                        (itemClick)="onItemClick($event)">
-                                    </div>
-                                </ng-template>
-                            </div>
-                            <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
-                                <ng-template
-                                    [ngTemplateOutlet]="footerTemplate?.templateRef">
-                                </ng-template>
-                            </div>
-                        </ng-template>
+                                    </ng-template>
+                                </div>
+                                <div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
+                                    <ng-template
+                                        *ngIf="footerTemplate"
+                                        [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                    </ng-template>
+
+                                    <ng-container *ngIf="!footerTemplate && actions">
+                                        <button
+                                            *ngFor="let actionButton of actions"
+                                            kendoButton
+                                            type="button"
+                                            [icon]="actionButton.icon"
+                                            [title]="actionButton.title"
+                                            [svgIcon]="actionButton.svgIcon"
+                                            [themeColor]="actionButton.themeColor"
+                                            [fillMode]="actionButton.fillMode"
+                                            [size]="actionButton.size"
+                                            [attr.aria-label]="actionButton.text"
+                                            (click)="action.emit(actionButton)"
+                                        >
+                                            {{ actionButton.text }}
+                                        </button>
+                                    </ng-container>
+                                </div>
+                            </ng-template>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1133,7 +1260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         }
                     ],
                     standalone: true,
-                    imports: [NgIf, NgClass, NgTemplateOutlet, ActionSheetListComponent]
+                    imports: [NgIf, NgFor, NgStyle, NgClass, NgTemplateOutlet, ActionSheetListComponent, ButtonDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -1141,6 +1268,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], actions: [{
+                type: Input
+            }], actionsLayout: [{
+                type: Input
+            }], overlayClickClose: [{
+                type: Input
             }], title: [{
                 type: Input
             }], subtitle: [{
@@ -1149,14 +1282,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], cssClass: [{
                 type: Input
+            }], cssStyle: [{
+                type: Input
             }], animation: [{
                 type: Input
             }], expanded: [{
                 type: Input
             }], titleId: [{
                 type: Input
+            }], initialFocus: [{
+                type: Input
             }], expandedChange: [{
                 type: Output
+            }], action: [{
+                type: Output
             }], expand: [{
                 type: Output
             }], collapse: [{
@@ -1168,6 +1307,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], childContainer: [{
                 type: ViewChild,
                 args: ['childContainer']
+            }], actionSheetViews: [{
+                type: ContentChildren,
+                args: [forwardRef(() => ActionSheetViewComponent)]
             }], actionSheetTemplate: [{
                 type: ContentChild,
                 args: [ActionSheetTemplateDirective]
@@ -1185,6 +1327,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [ActionSheetFooterTemplateDirective]
             }] } });
 
+/**
+ * @hidden
+ *
+ * Represents the [Kendo UI ActionSheetView component for Angular].
+ * Used to display multiple views.
+ */
+class ActionSheetViewComponent {
+    actionSheet;
+    title;
+    subtitle;
+    titleId = getId('k-actionsheet-title');
+    hostClass = true;
+    animated = true;
+    transitionDuration = '500ms';
+    transitionProperty = 'transform';
+    headerTemplate;
+    contentTemplate;
+    footerTemplate;
+    actionSheetTemplate;
+    constructor(actionSheet) {
+        this.actionSheet = actionSheet;
+    }
+    get orientationClass() {
+        return this.actionSheet?.orientationClass;
+    }
+    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: `
+        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
+            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
+        </ng-template>
+
+        <ng-template #defaultTemplate>
+            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
+                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate" [ngTemplateOutlet]="headerTemplate.templateRef">
+                </ng-template>
+
+                <ng-template #defaultHeaderTemplate>
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title" [id]="titleId">
+                            <div *ngIf="title" class="k-text-center">{{title}}</div>
+                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                        </div>
+                    </div>
+                </ng-template>
+            </div>
+
+            <div *ngIf="contentTemplate" class="k-actionsheet-content">
+                <ng-template [ngTemplateOutlet]="contentTemplate.templateRef">
+                </ng-template>
+            </div>
+
+            <div *ngIf="footerTemplate" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
+                <ng-template [ngTemplateOutlet]="footerTemplate.templateRef">
+                </ng-template>
+            </div>
+        </ng-template>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-actionsheet-view',
+                    template: `
+        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
+            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
+        </ng-template>
+
+        <ng-template #defaultTemplate>
+            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
+                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate" [ngTemplateOutlet]="headerTemplate.templateRef">
+                </ng-template>
+
+                <ng-template #defaultHeaderTemplate>
+                    <div class="k-actionsheet-titlebar-group k-hbox">
+                        <div class="k-actionsheet-title" [id]="titleId">
+                            <div *ngIf="title" class="k-text-center">{{title}}</div>
+                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                        </div>
+                    </div>
+                </ng-template>
+            </div>
+
+            <div *ngIf="contentTemplate" class="k-actionsheet-content">
+                <ng-template [ngTemplateOutlet]="contentTemplate.templateRef">
+                </ng-template>
+            </div>
+
+            <div *ngIf="footerTemplate" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
+                <ng-template [ngTemplateOutlet]="footerTemplate.templateRef">
+                </ng-template>
+            </div>
+        </ng-template>
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgClass, NgTemplateOutlet]
+                }]
+        }], ctorParameters: function () { return [{ type: ActionSheetComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }]; }, propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], titleId: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-actionsheet-view']
+            }], animated: [{
+                type: HostBinding,
+                args: ['class.k-actionsheet-view-animated']
+            }], transitionDuration: [{
+                type: HostBinding,
+                args: ['style.transition-duration']
+            }], transitionProperty: [{
+                type: HostBinding,
+                args: ['style.transition-property']
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetHeaderTemplateDirective]
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetContentTemplateDirective]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetFooterTemplateDirective]
+            }], actionSheetTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetTemplateDirective]
+            }] } });
+
 /**
  * @hidden
  */
@@ -2505,6 +2782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 */
 const KENDO_ACTIONSHEET = [
     ActionSheetComponent,
+    ActionSheetViewComponent,
     ActionSheetHeaderTemplateDirective,
     ActionSheetItemTemplateDirective,
     ActionSheetContentTemplateDirective,
@@ -2623,7 +2901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class NavigationModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, imports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective], exports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BreadCrumbComponent, BreadCrumbItemTemplateDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, providers: [IconsService, ResizeBatchService], imports: [ActionSheetComponent, BottomNavigationComponent, BreadCrumbComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationModule, decorators: [{
@@ -2762,7 +3040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ActionSheetModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, imports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective], exports: [ActionSheetComponent, ActionSheetViewComponent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [ActionSheetComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, decorators: [{
@@ -2780,5 +3058,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, ActionSheetTemplateDirective, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, KENDO_ACTIONSHEET, KENDO_APPBAR, KENDO_BOTTOMNAVIGATION, KENDO_BREADCRUMB, KENDO_NAVIGATION, NavigationModule };
+export { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, ActionSheetTemplateDirective, ActionSheetViewComponent, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, KENDO_ACTIONSHEET, KENDO_APPBAR, KENDO_BOTTOMNAVIGATION, KENDO_BREADCRUMB, KENDO_NAVIGATION, NavigationModule };