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

package/fesm2015/kendo-angular-navigation.js

@@ -7,10 +7,10 @@ import { Component, HostBinding, Input, NgModule, Directive, Optional, EventEmit
 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 * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
 import { filter, map, startWith, share } from 'rxjs/operators';
 
@@ -21,7 +21,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-navigation',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1662551228,
+    publishDate: 1665992185,
     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'
 };
@@ -225,6 +225,68 @@ const outerWidth = (element) => {
     width += (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0);
     return width;
 };
+/**
+ * @hidden
+ */
+const getFirstAndLastFocusable = (parent) => {
+    const all = getAllFocusableChildren(parent);
+    const firstFocusable = all.length > 0 ? all[0] : parent;
+    const lastFocusable = all.length > 0 ? all[all.length - 1] : parent;
+    return [firstFocusable, lastFocusable];
+};
+/**
+ * @hidden
+ */
+const getAllFocusableChildren = (parent) => {
+    return parent.querySelectorAll(focusableSelector);
+};
+/**
+ * @hidden
+ */
+const focusableSelector = [
+    'a[href]',
+    'area[href]',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    'iframe',
+    'object',
+    'embed',
+    '*[tabindex]',
+    '*[contenteditable]'
+].join(',');
+/**
+ * @hidden
+ */
+let idx = 0;
+/**
+ * @hidden
+ */
+const hexColorRegex = /^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
+/**
+ * @hidden
+ */
+const getId = (prefix) => {
+    return `${prefix}${++idx}`;
+};
+/**
+ * @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;
+};
 
 /**
  * Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
@@ -288,13 +350,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-const exportedModules$1 = [
+const exportedModules$2 = [
     AppBarComponent,
     AppBarSectionComponent,
     AppBarSpacerComponent
 ];
-const declarations$2 = [
-    ...exportedModules$1
+const declarations$3 = [
+    ...exportedModules$2
 ];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
@@ -340,8 +402,8 @@ AppBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AppBarModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$2],
-                    exports: [exportedModules$1],
+                    declarations: [declarations$3],
+                    exports: [exportedModules$2],
                     imports: [CommonModule]
                 }]
         }] });
@@ -972,17 +1034,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['attr.dir']
             }] } });
 
-const templateDirectives$1 = [
+const templateDirectives$2 = [
     BreadCrumbItemTemplateDirective
 ];
-const exportedModules = [
+const exportedModules$1 = [
     BreadCrumbComponent,
     BreadCrumbItemComponent,
     BreadCrumbListComponent,
-    ...templateDirectives$1
+    ...templateDirectives$2
 ];
-const declarations$1 = [
-    ...exportedModules,
+const declarations$2 = [
+    ...exportedModules$1,
     BreadCrumbSeparatorDirective
 ];
 /**
@@ -1028,8 +1090,8 @@ BreadCrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BreadCrumbModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations$1],
-                    exports: [exportedModules],
+                    declarations: [declarations$2],
+                    exports: [exportedModules$1],
                     imports: [CommonModule, ResizeSensorModule]
                 }]
         }] });
@@ -1506,9 +1568,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [BottomNavigationItemTemplateDirective, { static: false }]
             }] } });
 
-const templateDirectives = [BottomNavigationItemTemplateDirective];
-const exportedComponents = [BottomNavigationComponent, ...templateDirectives];
-const declarations = [BottomNavigationItemComponent, ...exportedComponents];
+const templateDirectives$1 = [BottomNavigationItemTemplateDirective];
+const exportedComponents = [BottomNavigationComponent, ...templateDirectives$1];
+const declarations$1 = [BottomNavigationItemComponent, ...exportedComponents];
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the BottomNavigation component.
@@ -1548,12 +1610,580 @@ BottomNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BottomNavigationModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [declarations],
+                    declarations: [declarations$1],
                     exports: [exportedComponents],
                     imports: [CommonModule]
                 }]
         }] });
 
+/**
+ * Arguments for the `itemClick` event of the ActionSheet.
+ */
+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.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetTitleTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+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
+                }] }]; } });
+
+/**
+ * Represents a template that defines the item content of the ActionSheet.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoActionSheetItemTemplate` directive inside the `<kendo-actionsheet>` tag.
+ */
+class ActionSheetItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ActionSheetItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ActionSheetItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ActionSheetItemTemplateDirective, selector: "[kendoActionSheetItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ActionSheetItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoActionSheetItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+class ActionSheetItemComponent {
+    constructor() {
+        this.pointerClass = true;
+    }
+    manageIconClasses(item) {
+        let classes = ['k-actionsheet-item-icon'];
+        if (item.icon) {
+            classes.push(`k-icon k-i-${item.icon}`);
+        }
+        if (item.iconClass) {
+            classes.push(`${item.iconClass}`);
+        }
+        const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
+        const isThemeColor = isPresent(item.iconColor) && item.iconColor !== '' && !isHexColor;
+        if (isThemeColor) {
+            classes.push(`k-text-${item.iconColor}`);
+        }
+        return classes.join(' ');
+    }
+    manageIconStyles(item) {
+        const isHexColor = isPresent(item.iconColor) && hexColorRegex.test(item.iconColor);
+        const isSizeSet = isPresent(item.iconSize) && item.iconSize !== '';
+        const styles = {};
+        if (isHexColor) {
+            styles.color = item.iconColor;
+        }
+        if (isSizeSet) {
+            styles.fontSize = item.iconSize;
+        }
+        return styles;
+    }
+}
+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>
+                <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
+                    <span
+                        [class]="manageIconClasses(item)"
+                        [style]="manageIconStyles(item)">
+                    </span>
+                </span>
+                <span *ngIf="item.title || item.description" class="k-actionsheet-item-text">
+                    <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>
+    `, 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,
+            args: [{
+                    // 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>
+                <span *ngIf="item.icon || item.iconClass" class="k-icon-wrap">
+                    <span
+                        [class]="manageIconClasses(item)"
+                        [style]="manageIconStyles(item)">
+                    </span>
+                </span>
+                <span *ngIf="item.title || item.description" class="k-actionsheet-item-text">
+                    <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>
+    `
+                }]
+        }], propDecorators: { itemTemplate: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], pointerClass: [{
+                type: HostBinding,
+                args: ['class.k-cursor-pointer']
+            }] } });
+
+/**
+ * @hidden
+ */
+class ActionSheetListComponent {
+    constructor(renderer, ngZone, element) {
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.element = element;
+        this.groupItems = [];
+        this.allItems = [];
+        this.itemClick = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        this.initDomEvents();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    initDomEvents() {
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            const nativeElement = this.element.nativeElement;
+            this.subscriptions.add(this.renderer.listen(nativeElement, 'click', this.clickHandler.bind(this)));
+        });
+    }
+    clickHandler(e) {
+        const itemIndex = getActionSheetItemIndex(e.target);
+        const item = this.allItems[itemIndex];
+        if (!item) {
+            return;
+        }
+        if (item.disabled) {
+            e.preventDefault();
+            return;
+        }
+        this.ngZone.run(() => {
+            this.itemClick.emit({ item, originalEvent: e });
+        });
+    }
+}
+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"] }] });
+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"
+                [class.k-actionsheet-item]="true"
+                [class.k-disabled]="item.disabled"
+                [ngClass]="item.cssClass"
+                [ngStyle]="item.cssStyle"
+                [itemTemplate]="itemTemplate"
+                [item]="item">
+            </li>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { groupItems: [{
+                type: Input
+            }], allItems: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }] } });
+
+/**
+ * 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) {
+        this.element = element;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        /**
+         * @hidden
+         */
+        this.hostClass = true;
+        /**
+         * Fires when an ActionSheet item is clicked.
+         */
+        this.itemClick = new EventEmitter();
+        /**
+         * Fires when the modal overlay is clicked.
+         */
+        this.overlayClick = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.titleId = null;
+        this.rtl = false;
+        this.domSubs = new Subscription();
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        });
+        this.titleId = getId('k-actionsheet-title');
+    }
+    ngAfterViewInit() {
+        this.handleInitialFocus();
+        this.initDomEvents();
+    }
+    ngOnDestroy() {
+        this.domSubs.unsubscribe();
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    get topGroupItems() {
+        var _a;
+        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => !item.group || item.group === 'top');
+    }
+    /**
+     * @hidden
+     */
+    get bottomGroupItems() {
+        var _a;
+        return (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter(item => item.group === 'bottom');
+    }
+    /**
+     * @hidden
+     */
+    onItemClick(ev) {
+        this.itemClick.emit(ev);
+    }
+    /**
+     * @hidden
+     */
+    onOverlayClick() {
+        this.overlayClick.emit();
+    }
+    /**
+     * @hidden
+     */
+    get shouldRenderSeparator() {
+        var _a, _b;
+        return ((_a = this.topGroupItems) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.bottomGroupItems) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    }
+    initDomEvents() {
+        if (!this.element) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            this.domSubs.add(this.renderer.listen(this.element.nativeElement, 'keydown', (ev) => {
+                this.onKeyDown(ev);
+            }));
+        });
+    }
+    onKeyDown(event) {
+        const target = event.target;
+        if (event.keyCode === Keys.Tab) {
+            this.ngZone.run(() => {
+                this.keepFocusWithinComponent(target, event);
+            });
+        }
+        if (event.keyCode === Keys.Escape) {
+            this.ngZone.run(() => {
+                this.overlayClick.emit();
+            });
+        }
+        if (event.keyCode === Keys.Enter) {
+            this.ngZone.run(() => {
+                this.triggerItemClick(target, event);
+            });
+        }
+    }
+    handleInitialFocus() {
+        const [firstFocusable] = getFirstAndLastFocusable(this.element.nativeElement);
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
+    keepFocusWithinComponent(target, event) {
+        const wrapper = this.element.nativeElement;
+        const [firstFocusable, lastFocusable] = getFirstAndLastFocusable(wrapper);
+        const tabAfterLastFocusable = !event.shiftKey && target === lastFocusable;
+        const shiftTabAfterFirstFocusable = event.shiftKey && target === firstFocusable;
+        if (tabAfterLastFocusable) {
+            event.preventDefault();
+            firstFocusable.focus();
+        }
+        if (shiftTabAfterFirstFocusable) {
+            event.preventDefault();
+            lastFocusable.focus();
+        }
+    }
+    triggerItemClick(target, event) {
+        const itemIndex = getActionSheetItemIndex(target);
+        const item = this.items[itemIndex];
+        if (!item || item.disabled) {
+            return;
+        }
+        this.itemClick.emit({ item, originalEvent: event });
+    }
+}
+ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", 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: [
+        LocalizationService,
+        {
+            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: `
+        <div class="k-overlay" (click)="onOverlayClick()"></div>
+        <div class="k-animation-container">
+            <div class="k-child-animation-container">
+                <div class="k-actionsheet k-actionsheet-bottom"
+                    role="dialog"
+                    aria-modal="true"
+                    [attr.aria-labelledby]="titleId">
+
+                    <div *ngIf="title || titleTemplate" 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>
+                                <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>
+                            </div>
+                        </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>
+                </div>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], 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: 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">
+                <div class="k-actionsheet k-actionsheet-bottom"
+                    role="dialog"
+                    aria-modal="true"
+                    [attr.aria-labelledby]="titleId">
+
+                    <div *ngIf="title || titleTemplate" 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>
+                                <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>
+                            </div>
+                        </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>
+                </div>
+            </div>
+        </div>
+    `,
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.actionsheet.component'
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class.k-actionsheet-container']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], overlayClick: [{
+                type: Output
+            }], titleTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetTitleTemplateDirective]
+            }], itemTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetItemTemplateDirective]
+            }] } });
+
+const templateDirectives = [
+    ActionSheetTitleTemplateDirective,
+    ActionSheetItemTemplateDirective
+];
+const exportedModules = [
+    ActionSheetComponent,
+    ...templateDirectives
+];
+const declarations = [
+    ActionSheetItemComponent,
+    ActionSheetListComponent,
+    ...exportedModules
+];
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the ActionSheet component.
+ *
+ * * @example
+ *
+ * ```ts-no-run
+ * // Import the ActionSheet module
+ * import { ActionSheetModule } from '@progress/kendo-angular-navigation';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { BrowserModule } from '@angular/platform-browser';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, ActionSheetModule], // import ActionSheet module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+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] });
+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,
+            args: [{
+                    declarations: [declarations],
+                    exports: [exportedModules],
+                    imports: [CommonModule]
+                }]
+        }] });
+
 /**
  * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
  * definition for the Navigation components.
@@ -1590,17 +2220,20 @@ class NavigationModule {
 NavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 NavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, exports: [AppBarModule,
         BreadCrumbModule,
-        BottomNavigationModule] });
+        BottomNavigationModule,
+        ActionSheetModule] });
 NavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, imports: [AppBarModule,
         BreadCrumbModule,
-        BottomNavigationModule] });
+        BottomNavigationModule,
+        ActionSheetModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
                         AppBarModule,
                         BreadCrumbModule,
-                        BottomNavigationModule
+                        BottomNavigationModule,
+                        ActionSheetModule
                     ]
                 }]
         }] });
@@ -1611,5 +2244,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };
+export { ActionSheetComponent, ActionSheetItemClickEvent, ActionSheetItemTemplateDirective, ActionSheetModule, ActionSheetTitleTemplateDirective, AppBarComponent, AppBarModule, AppBarSectionComponent, AppBarSpacerComponent, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationModule, BottomNavigationSelectEvent, BreadCrumbComponent, BreadCrumbItemComponent, BreadCrumbItemTemplateDirective, BreadCrumbListComponent, BreadCrumbModule, NavigationModule };