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

package/esm2022/actionsheet/actionsheet.component.mjs

@@ -2,8 +2,8 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
-import { NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild, QueryList, forwardRef } from '@angular/core';
+import { NgIf, NgClass, NgTemplateOutlet, NgFor, NgStyle } from '@angular/common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { Subscription } from 'rxjs';
@@ -15,12 +15,14 @@ import { AnimationBuilder } from '@angular/animations';
 import { slideDown, slideUp } from './animation/animations';
 import { take } from 'rxjs/operators';
 import { ActionSheetListComponent } from './list.component';
+import { ButtonDirective } from '@progress/kendo-angular-buttons';
+import { ActionSheetViewComponent } from './actionsheet-view.component';
 import * as i0 from "@angular/core";
 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 {
@@ -30,6 +32,10 @@ export class ActionSheetComponent {
     localizationService;
     builder;
     cdr;
+    /**
+     * @hidden
+     */
+    currentView = 1;
     /**
      * @hidden
      */
@@ -40,6 +46,24 @@ export 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.
      */
@@ -58,8 +82,13 @@ export 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
      */
@@ -72,16 +101,26 @@ 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.
      */
     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.
      */
@@ -102,6 +141,10 @@ export class ActionSheetComponent {
      * @hidden
      */
     childContainer;
+    /**
+     * @hidden
+     */
+    actionSheetViews;
     /**
      * @hidden
      */
@@ -158,6 +201,24 @@ export 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.
      *
@@ -184,6 +245,18 @@ export 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
      */
@@ -207,6 +280,9 @@ export class ActionSheetComponent {
      */
     onOverlayClick() {
         this.overlayClick.emit();
+        if (this.overlayClickClose) {
+            this.toggle(false);
+        }
     }
     /**
      * @hidden
@@ -252,7 +328,7 @@ export class ActionSheetComponent {
     }
     handleInitialFocus() {
         const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
-        if (firstFocusable) {
+        if (firstFocusable && this.initialFocus) {
             firstFocusable.focus();
         }
     }
@@ -311,80 +387,106 @@ 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: { 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">
+                        [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 *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 #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>
 
-                                <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 *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>
+                                    </ng-template>
+                                </div>
+                                <div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
+                                    <ng-template
+                                        *ngIf="footerTemplate"
+                                        [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                    </ng-template>
 
-                            <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-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,
@@ -396,64 +498,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">
+                        [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>
 
-                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
-                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
-                        </ng-template>
+                        <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 #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>
+                                    <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>
+                                    </ng-template>
+                                </div>
+                                <div *ngIf="footerTemplate || actions" [ngClass]="[orientationClass, alignmentClass, 'k-actions', 'k-actionsheet-footer']">
+                                    <ng-template
+                                        *ngIf="footerTemplate"
+                                        [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                    </ng-template>
 
-                            <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-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>
@@ -467,7 +595,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,
@@ -475,6 +603,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: [{
@@ -483,14 +617,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: [{
@@ -502,6 +642,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]

package/esm2022/actionsheet/models/actionsheet-action-layout.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/actionsheet/models/actionsheet-action.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/actionsheet.module.mjs

@@ -7,11 +7,12 @@ import { IconsService } from '@progress/kendo-angular-icons';
 import { KENDO_ACTIONSHEET } from './directives';
 import * as i0 from "@angular/core";
 import * as i1 from "./actionsheet/actionsheet.component";
-import * as i2 from "./actionsheet/templates/header-template.directive";
-import * as i3 from "./actionsheet/templates/item-template.directive";
-import * as i4 from "./actionsheet/templates/content-template.directive";
-import * as i5 from "./actionsheet/templates/footer-template.directive";
-import * as i6 from "./actionsheet/templates/actionsheet-template";
+import * as i2 from "./actionsheet/actionsheet-view.component";
+import * as i3 from "./actionsheet/templates/header-template.directive";
+import * as i4 from "./actionsheet/templates/item-template.directive";
+import * as i5 from "./actionsheet/templates/content-template.directive";
+import * as i6 from "./actionsheet/templates/footer-template.directive";
+import * as i7 from "./actionsheet/templates/actionsheet-template";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -47,7 +48,7 @@ import * as i6 from "./actionsheet/templates/actionsheet-template";
  */
 export 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: [i1.ActionSheetComponent, i2.ActionSheetHeaderTemplateDirective, i3.ActionSheetItemTemplateDirective, i4.ActionSheetContentTemplateDirective, i5.ActionSheetFooterTemplateDirective, i6.ActionSheetTemplateDirective], exports: [i1.ActionSheetComponent, i2.ActionSheetHeaderTemplateDirective, i3.ActionSheetItemTemplateDirective, i4.ActionSheetContentTemplateDirective, i5.ActionSheetFooterTemplateDirective, i6.ActionSheetTemplateDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, imports: [i1.ActionSheetComponent, i2.ActionSheetViewComponent, i3.ActionSheetHeaderTemplateDirective, i4.ActionSheetItemTemplateDirective, i5.ActionSheetContentTemplateDirective, i6.ActionSheetFooterTemplateDirective, i7.ActionSheetTemplateDirective], exports: [i1.ActionSheetComponent, i2.ActionSheetViewComponent, i3.ActionSheetHeaderTemplateDirective, i4.ActionSheetItemTemplateDirective, i5.ActionSheetContentTemplateDirective, i6.ActionSheetFooterTemplateDirective, i7.ActionSheetTemplateDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, providers: [IconsService], imports: [i1.ActionSheetComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionSheetModule, decorators: [{

package/esm2022/directives.mjs

@@ -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 { ActionSheetViewComponent } from "./actionsheet/actionsheet-view.component";
 import { ActionSheetComponent } from "./actionsheet/actionsheet.component";
 import { ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetTemplateDirective } from "./actionsheet/models";
 import { AppBarSectionComponent } from "./appbar/appbar-section.component";
@@ -16,6 +17,7 @@ import { BreadCrumbItemTemplateDirective } from "./breadcrumb/template-directive
 */
 export const KENDO_ACTIONSHEET = [
     ActionSheetComponent,
+    ActionSheetViewComponent,
     ActionSheetHeaderTemplateDirective,
     ActionSheetItemTemplateDirective,
     ActionSheetContentTemplateDirective,

package/esm2022/index.mjs

@@ -21,6 +21,7 @@ export { BreadCrumbItemComponent } from './breadcrumb/breadcrumb-item.component'
 export { BreadCrumbListComponent } from './breadcrumb/list.component';
 //ActionSheet exports
 export { ActionSheetComponent } from './actionsheet/actionsheet.component';
+export { ActionSheetViewComponent } from './actionsheet/actionsheet-view.component';
 export { ActionSheetItemClickEvent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './actionsheet/models';
 export { ActionSheetModule } from './actionsheet.module';
 export * from './directives';