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

package/esm2015/actionsheet/actionsheet.component.js

@@ -6,9 +6,9 @@ import { Component, ContentChild, EventEmitter, HostBinding, Input, Output } fro
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { Subscription } from 'rxjs';
-import { ActionSheetTitleTemplateDirective, ActionSheetItemTemplateDirective } from './models';
+import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from './models';
 import { Keys } from '@progress/kendo-angular-common';
-import { getId, getActionSheetItemIndex, getFirstAndLastFocusable } from '../common/util';
+import { getId, getActionSheetItemIndex, getFirstAndLastFocusable, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE } from '../common/util';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
@@ -141,7 +141,7 @@ export 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;
@@ -156,20 +156,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>
@@ -179,26 +180,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>
@@ -212,17 +223,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>
@@ -232,26 +244,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>
@@ -281,10 +303,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], overlayClick: [{
                 type: Output
-            }], titleTemplate: [{
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetHeaderTemplateDirective]
+            }], contentTemplate: [{
                 type: ContentChild,
-                args: [ActionSheetTitleTemplateDirective]
+                args: [ActionSheetContentTemplateDirective]
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ActionSheetItemTemplateDirective]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetFooterTemplateDirective]
             }] } });

package/esm2015/actionsheet/item.component.js

@@ -43,17 +43,14 @@ export 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)"
@@ -64,8 +61,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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetItemComponent, decorators: [{
             type: Component,
@@ -73,17 +70,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)"
@@ -94,8 +88,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: [{

package/esm2015/actionsheet/list.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { Subscription } from "rxjs";
-import { getActionSheetItemIndex } from "../common/util";
+import { getActionSheetItemIndex, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE } from "../common/util";
 import * as i0 from "@angular/core";
 import * as i1 from "./item.component";
 import * as i2 from "@angular/common";
@@ -37,7 +37,7 @@ export 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;
@@ -50,34 +50,30 @@ export 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: i1.ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.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: i1.ActionSheetItemComponent, selector: "[kendoActionSheetItem]", inputs: ["itemTemplate", "item"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.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: [{

package/esm2015/actionsheet/models/index.js

@@ -3,5 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 export { ActionSheetItemClickEvent } from './item-click.event';
-export { ActionSheetTitleTemplateDirective } from '../templates/title-template.directive';
+export { ActionSheetHeaderTemplateDirective } from '../templates/header-template.directive';
 export { ActionSheetItemTemplateDirective } from '../templates/item-template.directive';
+export { ActionSheetContentTemplateDirective } from '../templates/content-template.directive';
+export { ActionSheetFooterTemplateDirective } from '../templates/footer-template.directive';

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

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* 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 items list content of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetContentTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+export 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
+                }] }]; } });

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

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* 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 footer of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetFooterTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+export 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
+                }] }]; } });

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

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* 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 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 `kendoActionSheetHeaderTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+export class ActionSheetHeaderTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+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: '[kendoActionSheetHeaderTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/actionsheet.module.js

@@ -5,13 +5,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActionSheetComponent } from './actionsheet/actionsheet.component';
-import { ActionSheetTitleTemplateDirective, ActionSheetItemTemplateDirective } from './actionsheet/models';
+import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from './actionsheet/models';
 import { ActionSheetItemComponent } from './actionsheet/item.component';
 import { ActionSheetListComponent } from './actionsheet/list.component';
 import * as i0 from "@angular/core";
 const templateDirectives = [
-    ActionSheetTitleTemplateDirective,
-    ActionSheetItemTemplateDirective
+    ActionSheetHeaderTemplateDirective,
+    ActionSheetItemTemplateDirective,
+    ActionSheetContentTemplateDirective,
+    ActionSheetFooterTemplateDirective
 ];
 const exportedModules = [
     ActionSheetComponent,
@@ -58,9 +60,13 @@ export 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,

package/esm2015/common/util.js

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { closestInScope, isDocumentAvailable } from "@progress/kendo-angular-common";
+import { closestInScope } from "@progress/kendo-angular-common";
 /**
  * @hidden
  */
@@ -64,17 +64,16 @@ export const getId = (prefix) => {
 /**
  * @hidden
  */
-export const getActionSheetItemIndex = (target) => {
-    if (!isDocumentAvailable()) {
-        return;
+export const ACTIONSHEET_ITEM_INDEX_ATTRIBUTE = 'kendo-actionsheet-item-index';
+/**
+ * @hidden
+ */
+export const getActionSheetItemIndex = (target, targetAttr, scope) => {
+    const item = closestItem(target, targetAttr, scope);
+    if (item) {
+        return itemIndex(item, targetAttr);
     }
-    const allItemElements = document.querySelectorAll('.k-actionsheet-action');
-    const closestItem = closestInScope(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 itemIndex = (item, indexAttr) => +item.getAttribute(indexAttr);
+const hasItemIndex = (item, indexAttr) => isPresent(item.getAttribute(indexAttr));
+const closestItem = (target, targetAttr, scope) => closestInScope(target, el => hasItemIndex(el, targetAttr), scope);

package/esm2015/main.js

@@ -21,7 +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 } from './actionsheet/models';
-export { ActionSheetTitleTemplateDirective } from './actionsheet/templates/title-template.directive';
-export { ActionSheetItemTemplateDirective } from './actionsheet/templates/item-template.directive';
+export { ActionSheetItemClickEvent, ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from './actionsheet/models';
 export { ActionSheetModule } from './actionsheet.module';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };