@progress/kendo-angular-navigation 2.1.0-dev.202210170736 → 2.1.0-dev.202210241311

package/fesm2015/kendo-angular-navigation.js

@@ -8,7 +8,7 @@ import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, closestInScope as closestInScope$1, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { closestInScope as closestInScope$1, isDocumentAvailable, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
@@ -21,7 +21,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1665992185,
+    publishDate: 1666617075,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -273,20 +273,19 @@ const getId = (prefix) => {
 /**
  * @hidden
  */
-const getActionSheetItemIndex = (target) => {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    const allItemElements = document.querySelectorAll('.k-actionsheet-action');
-    const closestItem = closestInScope$1(target, el => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains('k-actionsheet-action'); }, this);
-    let idx = null;
-    allItemElements.forEach((i, index) => {
-        if (i === closestItem) {
-            idx = index;
-        }
-    });
-    return idx;
+const ACTIONSHEET_ITEM_INDEX_ATTRIBUTE = 'kendo-actionsheet-item-index';
+/**
+ * @hidden
+ */
+const getActionSheetItemIndex = (target, targetAttr, scope) => {
+    const item = closestItem$1(target, targetAttr, scope);
+    if (item) {
+        return itemIndex$1(item, targetAttr);
+    }
 };
+const itemIndex$1 = (item, indexAttr) => +item.getAttribute(indexAttr);
+const hasItemIndex$1 = (item, indexAttr) => isPresent(item.getAttribute(indexAttr));
+const closestItem$1 = (target, targetAttr, scope) => closestInScope$1(target, el => hasItemIndex$1(el, targetAttr), scope);
 
 /**
  * Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
@@ -1623,21 +1622,21 @@ class ActionSheetItemClickEvent {
 }
 
 /**
- * Represents a template that defines the title content of the ActionSheet. Utilizing the template overrides both the `title` and `subtitle` of the ActionSheet.
+ * Represents a template that defines the header content of the ActionSheet. Utilizing the template overrides both the `title` and `subtitle` of the ActionSheet.
  * To define the template, nest an `<ng-template>` tag
- * with the `kendoActionSheetTitleTemplate` directive inside the `<kendo-actionsheet>` tag.
+ * with the `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
  */
-class ActionSheetTitleTemplateDirective {
+class ActionSheetHeaderTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
 }
-ActionSheetTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ActionSheetTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetTitleTemplateDirective, selector: "[kendoActionSheetTitleTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetTitleTemplateDirective, decorators: [{
+ActionSheetHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoActionSheetTitleTemplate]'
+                    selector: '[kendoActionSheetHeaderTemplate]'
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
@@ -1664,6 +1663,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     type: Optional
                 }] }]; } });
 
+/**
+ * Represents a template that defines the items list content of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetContentTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetContentTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents a template that defines the footer of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetFooterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetFooterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
 /**
  * @hidden
  */
@@ -1701,17 +1742,14 @@ class ActionSheetItemComponent {
 }
 ActionSheetItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: { itemTemplate: "itemTemplate", item: "item" }, host: { properties: { "class.k-cursor-pointer": "this.pointerClass" } }, ngImport: i0, template: `
-        <span class="k-actionsheet-action"
-            tabindex="0"
-            role="button"
-            [attr.aria-disabled]="item.disabled">
-            <ng-template *ngIf="itemTemplate; else defaultTemplate"
-                [ngTemplateOutlet]="itemTemplate"
-                [ngTemplateOutletContext]="{
-                    $implicit: item
-                }">
-            </ng-template>
-            <ng-template #defaultTemplate>
+        <ng-template *ngIf="itemTemplate; else defaultTemplate"
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{
+                $implicit: item
+            }">
+        </ng-template>
+        <ng-template #defaultTemplate>
+            <span class="k-actionsheet-action">
                 <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
                     <span
                         [class]="manageIconClasses(item)"
@@ -1722,8 +1760,8 @@ ActionSheetItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                     <span *ngIf="item.title" class="k-actionsheet-item-title">{{item.title}}</span>
                     <span *ngIf="item.description" class="k-actionsheet-item-description">{{item.description}}</span>
                 </span>
-            </ng-template>
-        </span>
+            </span>
+        </ng-template>
     `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
             type: Component,
@@ -1731,17 +1769,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoActionSheetItem]',
                     template: `
-        <span class="k-actionsheet-action"
-            tabindex="0"
-            role="button"
-            [attr.aria-disabled]="item.disabled">
-            <ng-template *ngIf="itemTemplate; else defaultTemplate"
-                [ngTemplateOutlet]="itemTemplate"
-                [ngTemplateOutletContext]="{
-                    $implicit: item
-                }">
-            </ng-template>
-            <ng-template #defaultTemplate>
+        <ng-template *ngIf="itemTemplate; else defaultTemplate"
+            [ngTemplateOutlet]="itemTemplate"
+            [ngTemplateOutletContext]="{
+                $implicit: item
+            }">
+        </ng-template>
+        <ng-template #defaultTemplate>
+            <span class="k-actionsheet-action">
                 <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
                     <span
                         [class]="manageIconClasses(item)"
@@ -1752,8 +1787,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     <span *ngIf="item.title" class="k-actionsheet-item-title">{{item.title}}</span>
                     <span *ngIf="item.description" class="k-actionsheet-item-description">{{item.description}}</span>
                 </span>
-            </ng-template>
-        </span>
+            </span>
+        </ng-template>
     `
                 }]
         }], propDecorators: { itemTemplate: [{
@@ -1794,7 +1829,7 @@ class ActionSheetListComponent {
         });
     }
     clickHandler(e) {
-        const itemIndex = getActionSheetItemIndex(e.target);
+        const itemIndex = getActionSheetItemIndex(e.target, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE, this.element.nativeElement);
         const item = this.allItems[itemIndex];
         if (!item) {
             return;
@@ -1807,34 +1842,30 @@ class ActionSheetListComponent {
             this.itemClick.emit({ item, originalEvent: e });
         });
     }
+    setAttrIndex(item) {
+        return this.allItems.indexOf(item);
+    }
 }
 ActionSheetListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
-            <li *ngFor="let item of groupItems" kendoActionSheetItem
-                role="none"
-                [class.k-actionsheet-item]="true"
-                [class.k-disabled]="item.disabled"
-                [ngClass]="item.cssClass"
-                [ngStyle]="item.cssStyle"
-                [itemTemplate]="itemTemplate"
-                [item]="item">
-            </li>
-    `, isInline: true, components: [{ type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+ActionSheetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: { groupItems: "groupItems", allItems: "allItems", itemTemplate: "itemTemplate" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "\n            <span *ngFor=\"let item of groupItems\" kendoActionSheetItem\n                tabindex=\"0\"\n                role=\"button\"\n                [attr.aria-disabled]=\"item.disabled\"\n                [class.k-actionsheet-item]=\"true\"\n                [attr.kendo-actionsheet-item-index]=\"setAttrIndex(item)\"\n                [class.k-disabled]=\"item.disabled\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [itemTemplate]=\"itemTemplate\"\n                [item]=\"item\">\n            </span>\n    ", isInline: true, components: [{ type: ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }], directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[kendoActionSheetList]',
                     template: `
-            <li *ngFor="let item of groupItems" kendoActionSheetItem
-                role="none"
+            <span *ngFor="let item of groupItems" kendoActionSheetItem
+                tabindex="0"
+                role="button"
+                [attr.aria-disabled]="item.disabled"
                 [class.k-actionsheet-item]="true"
+                [attr.${ACTIONSHEET_ITEM_INDEX_ATTRIBUTE}]="setAttrIndex(item)"
                 [class.k-disabled]="item.disabled"
                 [ngClass]="item.cssClass"
                 [ngStyle]="item.cssStyle"
                 [itemTemplate]="itemTemplate"
                 [item]="item">
-            </li>
+            </span>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { groupItems: [{
@@ -1974,7 +2005,7 @@ class ActionSheetComponent {
         }
     }
     triggerItemClick(target, event) {
-        const itemIndex = getActionSheetItemIndex(target);
+        const itemIndex = getActionSheetItemIndex(target, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE, this.element.nativeElement);
         const item = this.items[itemIndex];
         if (!item || item.disabled) {
             return;
@@ -1989,20 +2020,21 @@ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             provide: L10N_PREFIX,
             useValue: 'kendo.actionsheet.component'
         }
-    ], queries: [{ propertyName: "titleTemplate", first: true, predicate: ActionSheetTitleTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }], exportAs: ["kendoActionSheet"], ngImport: i0, template: `
+    ], 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">
+            <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">
 
-                    <div *ngIf="title || titleTemplate" class="k-actionsheet-titlebar">
+                    <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="titleTemplate; else defaultTemplate"
-                                    [ngTemplateOutlet]="titleTemplate?.templateRef">
+                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
                                 </ng-template>
                                 <ng-template #defaultTemplate>
                                     <div *ngIf="title" class="k-text-center">{{title}}</div>
@@ -2012,26 +2044,36 @@ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                         </div>
                     </div>
 
-                    <div *ngIf="topGroupItems || bottomGroupItems" class="k-actionsheet-content">
-                        <ul *ngIf="topGroupItems" kendoActionSheetList
-                            class="k-list-ul"
-                            role="group"
-                            [groupItems]="topGroupItems"
-                            [allItems]="items"
-                            [itemTemplate]="itemTemplate?.templateRef"
-                            (itemClick)="onItemClick($event)">
-                        </ul>
-
-                        <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
-
-                        <ul *ngIf="bottomGroupItems" kendoActionSheetList
-                            class="k-list-ul"
-                            role="group"
-                            [groupItems]="bottomGroupItems"
-                            [allItems]="items"
-                            [itemTemplate]="itemTemplate?.templateRef"
-                            (itemClick)="onItemClick($event)">
-                        </ul>
+                    <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>
                 </div>
             </div>
@@ -2045,17 +2087,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     template: `
         <div class="k-overlay" (click)="onOverlayClick()"></div>
         <div class="k-animation-container">
-            <div class="k-child-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">
 
-                    <div *ngIf="title || titleTemplate" class="k-actionsheet-titlebar">
+                    <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="titleTemplate; else defaultTemplate"
-                                    [ngTemplateOutlet]="titleTemplate?.templateRef">
+                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                                    [ngTemplateOutlet]="headerTemplate?.templateRef">
                                 </ng-template>
                                 <ng-template #defaultTemplate>
                                     <div *ngIf="title" class="k-text-center">{{title}}</div>
@@ -2065,26 +2108,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         </div>
                     </div>
 
-                    <div *ngIf="topGroupItems || bottomGroupItems" class="k-actionsheet-content">
-                        <ul *ngIf="topGroupItems" kendoActionSheetList
-                            class="k-list-ul"
-                            role="group"
-                            [groupItems]="topGroupItems"
-                            [allItems]="items"
-                            [itemTemplate]="itemTemplate?.templateRef"
-                            (itemClick)="onItemClick($event)">
-                        </ul>
-
-                        <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
-
-                        <ul *ngIf="bottomGroupItems" kendoActionSheetList
-                            class="k-list-ul"
-                            role="group"
-                            [groupItems]="bottomGroupItems"
-                            [allItems]="items"
-                            [itemTemplate]="itemTemplate?.templateRef"
-                            (itemClick)="onItemClick($event)">
-                        </ul>
+                    <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>
                 </div>
             </div>
@@ -2114,17 +2167,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], overlayClick: [{
                 type: Output
-            }], titleTemplate: [{
+            }], headerTemplate: [{
                 type: ContentChild,
-                args: [ActionSheetTitleTemplateDirective]
+                args: [ActionSheetHeaderTemplateDirective]
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetContentTemplateDirective]
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ActionSheetItemTemplateDirective]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetFooterTemplateDirective]
             }] } });
 
 const templateDirectives = [
-    ActionSheetTitleTemplateDirective,
-    ActionSheetItemTemplateDirective
+    ActionSheetHeaderTemplateDirective,
+    ActionSheetItemTemplateDirective,
+    ActionSheetContentTemplateDirective,
+    ActionSheetFooterTemplateDirective
 ];
 const exportedModules = [
     ActionSheetComponent,
@@ -2171,9 +2232,13 @@ class ActionSheetModule {
 }
 ActionSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetModule, declarations: [ActionSheetItemComponent,
-        ActionSheetListComponent, ActionSheetComponent, ActionSheetTitleTemplateDirective,
-        ActionSheetItemTemplateDirective], imports: [CommonModule], exports: [ActionSheetComponent, ActionSheetTitleTemplateDirective,
-        ActionSheetItemTemplateDirective] });
+        ActionSheetListComponent, ActionSheetComponent, ActionSheetHeaderTemplateDirective,
+        ActionSheetItemTemplateDirective,
+        ActionSheetContentTemplateDirective,
+        ActionSheetFooterTemplateDirective], imports: [CommonModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
+        ActionSheetItemTemplateDirective,
+        ActionSheetContentTemplateDirective,
+        ActionSheetFooterTemplateDirective] });
 ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetModule, decorators: [{
             type: NgModule,
@@ -2244,5 +2309,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionSheetComponent, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, ActionSheetTitleTemplateDirective, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };
+export { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetHeaderTemplateDirective, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };
 

package/main.d.ts

@@ -27,7 +27,5 @@ export { BottomNavigationModule } from './bottomnavigation.module';
 export { BreadCrumbItemComponent } from './breadcrumb/breadcrumb-item.component';
 export { BreadCrumbListComponent } from './breadcrumb/list.component';
 export { ActionSheetComponent } from './actionsheet/actionsheet.component';
-export { ActionSheetItem, ActionSheetItemGroup, ActionSheetItemClickEvent } from './actionsheet/models';
-export { ActionSheetTitleTemplateDirective } from './actionsheet/templates/title-template.directive';
-export { ActionSheetItemTemplateDirective } from './actionsheet/templates/item-template.directive';
+export { ActionSheetItem, ActionSheetItemGroup, ActionSheetItemClickEvent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from './actionsheet/models';
 export { ActionSheetModule } from './actionsheet.module';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-navigation",
-  "version": "2.1.0-dev.202210170736",
+  "version": "2.1.0-dev.202210241311",
   "description": "Kendo UI Navigation for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/esm2015/actionsheet/templates/title-template.directive.js

@@ -1,26 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Optional } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Represents a template that defines the title content of the ActionSheet. Utilizing the template overrides both the `title` and `subtitle` of the ActionSheet.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoActionSheetTitleTemplate` directive inside the `<kendo-actionsheet>` tag.
- */
-export class ActionSheetTitleTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-ActionSheetTitleTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetTitleTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ActionSheetTitleTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetTitleTemplateDirective, selector: "[kendoActionSheetTitleTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetTitleTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoActionSheetTitleTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });