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

package/esm2020/index.mjs

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

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1675328679,
-    version: '11.1.1-develop.1',
+    publishDate: 1675853580,
+    version: '11.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -12,10 +12,12 @@ import { closestInScope as closestInScope$1, isDocumentAvailable, Keys, ResizeSe
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
-import { filter, map, startWith, share } from 'rxjs/operators';
+import { filter, map, startWith, share, take } from 'rxjs/operators';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { chevronRightIcon, chevronLeftIcon } from '@progress/kendo-svg-icons';
+import * as i2$1 from '@angular/animations';
+import { style, animate } from '@angular/animations';
 
 /**
  * @hidden
@@ -24,8 +26,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1675328679,
-    version: '11.1.1-develop.1',
+    publishDate: 1675853580,
+    version: '11.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -809,6 +811,7 @@ const collapseFirst = toggleFirst(false);
  */
 const expandFirst = toggleFirst(true);
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Represents the [Kendo UI Breadcrumb component for Angular]({% slug overview_breadcrumb %}).
  *
@@ -839,11 +842,11 @@ const expandFirst = toggleFirst(true);
  * ```
  */
 class BreadCrumbComponent {
-    constructor(el, cdr, zone, localization) {
+    constructor(localization, el, cdr, zone) {
+        this.localization = localization;
         this.el = el;
         this.cdr = cdr;
         this.zone = zone;
-        this.localization = localization;
         /**
          * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
          */
@@ -975,8 +978,8 @@ class BreadCrumbComponent {
         }));
     }
 }
-BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.dir": "this.getDir" } }, providers: [
+BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.dir": "this.getDir" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -1049,7 +1052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
                 type: Input
             }], separatorIcon: [{
                 type: Input
@@ -1070,11 +1073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [BreadCrumbListComponent, { static: true }]
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [BreadCrumbItemTemplateDirective, { static: false }]
+                args: [BreadCrumbItemTemplateDirective]
             }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-breadcrumb']
             }], wrapMode: [{
@@ -1179,7 +1179,7 @@ class BottomNavigationItemComponent {
     }
 }
 BottomNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-hstack": "this.horizontalItemClass", "class.k-vstack": "this.verticalItemClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-selected": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
+BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-hstack": "this.horizontalItemClass", "class.k-vstack": "this.verticalItemClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-selected": "this.selectedClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!itemTemplate">
             <kendo-icon-wrapper *ngIf="itemIcon"
                 class="k-bottom-nav-item-icon"
@@ -1250,6 +1250,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], selectedClass: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-current']
             }, {
                 type: HostBinding,
                 args: ['class.k-selected']
@@ -1779,6 +1782,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     }] }];
     } });
 
+/**
+ * Represents a template that defines the content of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * @hidden
+ */
+function slideUp(duration, height) {
+    return [
+        style({ overflow: 'hidden', display: 'block', height: 0 }),
+        animate(`${duration}ms ease-in`, style({ height: `${height}` }))
+    ];
+}
+/**
+ * @hidden
+ */
+function slideDown(duration, height) {
+    return [
+        style({ overflow: 'hidden', height: `${height}` }),
+        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
+    ];
+}
+
 /**
  * @hidden
  */
@@ -1954,20 +1999,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }] } });
 
+const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
 /**
  * Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
  * Used to display a set of choices related to a task the user initiates.
  */
 class ActionSheetComponent {
-    constructor(element, ngZone, renderer, localizationService) {
+    constructor(element, ngZone, renderer, localizationService, builder, cdr) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.builder = builder;
+        this.cdr = cdr;
         /**
-         * @hidden
+         * 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
          */
-        this.hostClass = true;
+        this.animation = true;
+        /**
+         * Specifies the state of the ActionSheet.
+         *
+         * @default false
+         */
+        this.expanded = false;
+        /**
+         * Fires when the `expanded` property of the component is updated.
+         * Used to provide a two-way binding for the `expanded` property.
+         */
+        this.expandedChange = new EventEmitter();
+        /**
+         * Fires when the ActionSheet is expanded and its animation is complete.
+         */
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the ActionSheet is collapsed and its animation is complete.
+         */
+        this.collapse = new EventEmitter();
         /**
          * Fires when an ActionSheet item is clicked.
          */
@@ -1982,6 +2052,7 @@ class ActionSheetComponent {
         this.titleId = null;
         this.rtl = false;
         this.domSubs = new Subscription();
+        this.animationEnd = new EventEmitter();
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
@@ -1989,15 +2060,49 @@ class ActionSheetComponent {
         });
         this.titleId = getId('k-actionsheet-title');
     }
+    /**
+     * @hidden
+     */
+    get hostClass() {
+        return this.expanded;
+    }
+    ;
     ngAfterViewInit() {
-        this.handleInitialFocus();
         this.initDomEvents();
     }
+    ngOnChanges(changes) {
+        if (changes['expanded'] && this.expanded) {
+            this.setExpanded(true);
+        }
+    }
     ngOnDestroy() {
         this.domSubs.unsubscribe();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
+        if (this.player) {
+            this.player.destroy();
+        }
+    }
+    /**
+     * Toggles the visibility of the ActionSheet.
+     */
+    toggle() {
+        const current = !this.expanded;
+        if (current === true) {
+            this.setExpanded(true);
+        }
+        else if (current === false && !this.animation) {
+            this.setExpanded(false);
+        }
+        if (this.animation) {
+            this.animationEnd.pipe(take(1))
+                .subscribe(() => { this.onAnimationEnd(current); });
+            this.playAnimation(current);
+        }
+        else {
+            this[current ? 'expand' : 'collapse'].emit();
+        }
     }
     /**
      * @hidden
@@ -2088,136 +2193,188 @@ class ActionSheetComponent {
         }
         this.itemClick.emit({ item, originalEvent: event });
     }
+    setExpanded(value) {
+        this.expanded = value;
+        this.expandedChange.emit(value);
+        if (this.expanded) {
+            this.cdr.detectChanges();
+            this.handleInitialFocus();
+        }
+    }
+    onAnimationEnd(currentExpanded) {
+        if (currentExpanded) {
+            this.expand.emit();
+        }
+        else {
+            this.setExpanded(false);
+            this.collapse.emit();
+        }
+    }
+    playAnimation(expanded) {
+        const duration = typeof this.animation !== 'boolean' && this.animation.duration ? this.animation.duration : DEFAULT_ANIMATION_CONFIG.duration;
+        const contentHeight = getComputedStyle(this.childContainer.nativeElement).height;
+        const animation = expanded ? slideUp(duration, contentHeight) : slideDown(duration, contentHeight);
+        const factory = this.builder.build(animation);
+        this.player = factory.create(this.childContainer.nativeElement);
+        this.player.onDone(() => {
+            if (this.player) {
+                this.animationEnd.emit();
+                this.player.destroy();
+                this.player = null;
+            }
+        });
+        this.player.play();
+    }
 }
-ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items" }, outputs: { itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2$1.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded" }, outputs: { expandedChange: "expandedChange", 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: "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 }], exportAs: ["kendoActionSheet"], ngImport: i0, template: `
-        <div class="k-overlay" (click)="onOverlayClick()"></div>
-        <div class="k-animation-container">
-            <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                <div class="k-actionsheet k-actionsheet-bottom"
-                    [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
-                    role="dialog"
-                    aria-modal="true"
-                    [attr.aria-labelledby]="titleId">
+    ], 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: `
+        <ng-container *ngIf="expanded">
+            <div class="k-overlay" (click)="onOverlayClick()"></div>
+            <div class="k-animation-container">
+                <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
+                    <div class="k-actionsheet k-actionsheet-bottom"
+                        [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
+                        [ngClass]="cssClass"
+                        role="dialog"
+                        aria-modal="true"
+                        [attr.aria-labelledby]="titleId">
+
+                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
+                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
+                        </ng-template>
 
-                    <div *ngIf="title || headerTemplate" class="k-actionsheet-titlebar">
-                        <div class="k-actionsheet-titlebar-group k-hbox">
-                            <div class="k-actionsheet-title" [id]="titleId">
-                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                        <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" 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>
-                    </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 *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>
-    
-                            <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  *ngIf="footerTemplate" class="k-actionsheet-footer">
+                                <ng-template
+                                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                </ng-template>
                             </div>
                         </ng-template>
                     </div>
-                    <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
-                        <ng-template
-                            [ngTemplateOutlet]="footerTemplate?.templateRef">
-                        </ng-template>
-                    </div>
                 </div>
             </div>
-        </div>
-    `, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+        </ng-container>
+    `, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoActionSheet',
                     selector: 'kendo-actionsheet',
                     template: `
-        <div class="k-overlay" (click)="onOverlayClick()"></div>
-        <div class="k-animation-container">
-            <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                <div class="k-actionsheet k-actionsheet-bottom"
-                    [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
-                    role="dialog"
-                    aria-modal="true"
-                    [attr.aria-labelledby]="titleId">
+        <ng-container *ngIf="expanded">
+            <div class="k-overlay" (click)="onOverlayClick()"></div>
+            <div class="k-animation-container">
+                <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
+                    <div class="k-actionsheet k-actionsheet-bottom"
+                        [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
+                        [ngClass]="cssClass"
+                        role="dialog"
+                        aria-modal="true"
+                        [attr.aria-labelledby]="titleId">
 
-                    <div *ngIf="title || headerTemplate" class="k-actionsheet-titlebar">
-                        <div class="k-actionsheet-titlebar-group k-hbox">
-                            <div class="k-actionsheet-title" [id]="titleId">
-                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                        <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" 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>
-                    </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 *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>
-    
-                            <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  *ngIf="footerTemplate" class="k-actionsheet-footer">
+                                <ng-template
+                                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                </ng-template>
                             </div>
                         </ng-template>
                     </div>
-                    <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
-                        <ng-template
-                            [ngTemplateOutlet]="footerTemplate?.templateRef">
-                        </ng-template>
-                    </div>
                 </div>
             </div>
-        </div>
+        </ng-container>
     `,
                     providers: [
                         LocalizationService,
@@ -2227,7 +2384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2$1.AnimationBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-actionsheet-container']
             }], direction: [{
@@ -2239,10 +2396,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], items: [{
                 type: Input
+            }], cssClass: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
             }], itemClick: [{
                 type: Output
             }], overlayClick: [{
                 type: Output
+            }], childContainer: [{
+                type: ViewChild,
+                args: ['childContainer']
+            }], actionSheetTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetTemplateDirective]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [ActionSheetHeaderTemplateDirective]
@@ -2261,7 +2436,8 @@ const templateDirectives = [
     ActionSheetHeaderTemplateDirective,
     ActionSheetItemTemplateDirective,
     ActionSheetContentTemplateDirective,
-    ActionSheetFooterTemplateDirective
+    ActionSheetFooterTemplateDirective,
+    ActionSheetTemplateDirective
 ];
 const exportedModules = [
     ActionSheetComponent,
@@ -2311,10 +2487,12 @@ ActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ActionSheetListComponent, ActionSheetComponent, ActionSheetHeaderTemplateDirective,
         ActionSheetItemTemplateDirective,
         ActionSheetContentTemplateDirective,
-        ActionSheetFooterTemplateDirective], imports: [CommonModule, IconsModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
+        ActionSheetFooterTemplateDirective,
+        ActionSheetTemplateDirective], imports: [CommonModule, IconsModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
         ActionSheetItemTemplateDirective,
         ActionSheetContentTemplateDirective,
-        ActionSheetFooterTemplateDirective] });
+        ActionSheetFooterTemplateDirective,
+        ActionSheetTemplateDirective] });
 ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, decorators: [{
             type: NgModule,
@@ -2385,5 +2563,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };
+export { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, ActionSheetTemplateDirective, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };