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

package/esm2020/actionsheet/actionsheet.component.mjs

@@ -2,32 +2,61 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, Renderer2, ViewChild } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { Subscription } from 'rxjs';
-import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from './models';
+import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './models';
 import { Keys } from '@progress/kendo-angular-common';
 import { getId, getActionSheetItemIndex, getFirstAndLastFocusable, ACTIONSHEET_ITEM_INDEX_ATTRIBUTE } from '../common/util';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { AnimationBuilder } from '@angular/animations';
+import { slideDown, slideUp } from './animation/animations';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "./list.component";
-import * as i3 from "@angular/common";
+import * as i2 from "@angular/animations";
+import * as i3 from "./list.component";
+import * as i4 from "@angular/common";
+const DEFAULT_ANIMATION_CONFIG = { duration: 300 };
 /**
  * Represents the [Kendo UI ActionSheet component for Angular]({% slug overview_actionsheet %}).
  * Used to display a set of choices related to a task the user initiates.
  */
 export class ActionSheetComponent {
-    constructor(element, ngZone, renderer, localizationService) {
+    constructor(element, ngZone, renderer, localizationService, builder, cdr) {
         this.element = element;
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.localizationService = localizationService;
+        this.builder = builder;
+        this.cdr = cdr;
         /**
-         * @hidden
+         * Configures the ActionSheet opening and closing animations ([see example]({% slug animations_actionsheet %})).
+         * By default the animations are turned off. The default animations' duration is `300ms`.
+         *
+         * @default true
+         */
+        this.animation = true;
+        /**
+         * Specifies the state of the ActionSheet.
+         *
+         * @default false
+         */
+        this.expanded = false;
+        /**
+         * Fires when the `expanded` property of the component is updated.
+         * Used to provide a two-way binding for the `expanded` property.
+         */
+        this.expandedChange = new EventEmitter();
+        /**
+         * Fires when the ActionSheet is expanded and its animation is complete.
          */
-        this.hostClass = true;
+        this.expand = new EventEmitter();
+        /**
+         * Fires when the ActionSheet is collapsed and its animation is complete.
+         */
+        this.collapse = new EventEmitter();
         /**
          * Fires when an ActionSheet item is clicked.
          */
@@ -42,6 +71,7 @@ export class ActionSheetComponent {
         this.titleId = null;
         this.rtl = false;
         this.domSubs = new Subscription();
+        this.animationEnd = new EventEmitter();
         validatePackage(packageMetadata);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
@@ -49,15 +79,49 @@ export class ActionSheetComponent {
         });
         this.titleId = getId('k-actionsheet-title');
     }
+    /**
+     * @hidden
+     */
+    get hostClass() {
+        return this.expanded;
+    }
+    ;
     ngAfterViewInit() {
-        this.handleInitialFocus();
         this.initDomEvents();
     }
+    ngOnChanges(changes) {
+        if (changes['expanded'] && this.expanded) {
+            this.setExpanded(true);
+        }
+    }
     ngOnDestroy() {
         this.domSubs.unsubscribe();
         if (this.dynamicRTLSubscription) {
             this.dynamicRTLSubscription.unsubscribe();
         }
+        if (this.player) {
+            this.player.destroy();
+        }
+    }
+    /**
+     * Toggles the visibility of the ActionSheet.
+     */
+    toggle() {
+        const current = !this.expanded;
+        if (current === true) {
+            this.setExpanded(true);
+        }
+        else if (current === false && !this.animation) {
+            this.setExpanded(false);
+        }
+        if (this.animation) {
+            this.animationEnd.pipe(take(1))
+                .subscribe(() => { this.onAnimationEnd(current); });
+            this.playAnimation(current);
+        }
+        else {
+            this[current ? 'expand' : 'collapse'].emit();
+        }
     }
     /**
      * @hidden
@@ -145,136 +209,188 @@ export class ActionSheetComponent {
         }
         this.itemClick.emit({ item, originalEvent: event });
     }
+    setExpanded(value) {
+        this.expanded = value;
+        this.expandedChange.emit(value);
+        if (this.expanded) {
+            this.cdr.detectChanges();
+            this.handleInitialFocus();
+        }
+    }
+    onAnimationEnd(currentExpanded) {
+        if (currentExpanded) {
+            this.expand.emit();
+        }
+        else {
+            this.setExpanded(false);
+            this.collapse.emit();
+        }
+    }
+    playAnimation(expanded) {
+        const duration = typeof this.animation !== 'boolean' && this.animation.duration ? this.animation.duration : DEFAULT_ANIMATION_CONFIG.duration;
+        const contentHeight = getComputedStyle(this.childContainer.nativeElement).height;
+        const animation = expanded ? slideUp(duration, contentHeight) : slideDown(duration, contentHeight);
+        const factory = this.builder.build(animation);
+        this.player = factory.create(this.childContainer.nativeElement);
+        this.player.onDone(() => {
+            if (this.player) {
+                this.animationEnd.emit();
+                this.player.destroy();
+                this.player = null;
+            }
+        });
+        this.player.play();
+    }
 }
-ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items" }, outputs: { itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
+ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: { title: "title", subtitle: "subtitle", items: "items", cssClass: "cssClass", animation: "animation", expanded: "expanded" }, outputs: { expandedChange: "expandedChange", expand: "expand", collapse: "collapse", itemClick: "itemClick", overlayClick: "overlayClick" }, host: { properties: { "class.k-actionsheet-container": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.actionsheet.component'
         }
-    ], queries: [{ propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], exportAs: ["kendoActionSheet"], ngImport: i0, template: `
-        <div class="k-overlay" (click)="onOverlayClick()"></div>
-        <div class="k-animation-container">
-            <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                <div class="k-actionsheet k-actionsheet-bottom"
-                    [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
-                    role="dialog"
-                    aria-modal="true"
-                    [attr.aria-labelledby]="titleId">
+    ], queries: [{ propertyName: "actionSheetTemplate", first: true, predicate: ActionSheetTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ActionSheetHeaderTemplateDirective, descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ActionSheetContentTemplateDirective, descendants: true }, { propertyName: "itemTemplate", first: true, predicate: ActionSheetItemTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ActionSheetFooterTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], exportAs: ["kendoActionSheet"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container *ngIf="expanded">
+            <div class="k-overlay" (click)="onOverlayClick()"></div>
+            <div class="k-animation-container">
+                <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
+                    <div class="k-actionsheet k-actionsheet-bottom"
+                        [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
+                        [ngClass]="cssClass"
+                        role="dialog"
+                        aria-modal="true"
+                        [attr.aria-labelledby]="titleId">
+
+                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
+                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
+                        </ng-template>
 
-                    <div *ngIf="title || headerTemplate" class="k-actionsheet-titlebar">
-                        <div class="k-actionsheet-titlebar-group k-hbox">
-                            <div class="k-actionsheet-title" [id]="titleId">
-                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                        <ng-template #defaultTemplate>
+                            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
+                                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
                                     [ngTemplateOutlet]="headerTemplate?.templateRef">
                                 </ng-template>
-                                <ng-template #defaultTemplate>
-                                    <div *ngIf="title" class="k-text-center">{{title}}</div>
-                                    <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+
+                                <ng-template #defaultHeaderTemplate>
+                                    <div class="k-actionsheet-titlebar-group k-hbox">
+                                        <div class="k-actionsheet-title" [id]="titleId">
+                                            <div *ngIf="title" class="k-text-center">{{title}}</div>
+                                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                                        </div>
+                                    </div>
                                 </ng-template>
                             </div>
-                        </div>
-                    </div>
 
-                    <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
-                        <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
-                            [ngTemplateOutlet]="contentTemplate?.templateRef">
-                        </ng-template>
-                        <ng-template #defaultContentTemplate>
-                            <div *ngIf="topGroupItems" kendoActionSheetList
-                                class="k-list-ul"
-                                role="group"
-                                [groupItems]="topGroupItems"
-                                [allItems]="items"
-                                [itemTemplate]="itemTemplate?.templateRef"
-                                (itemClick)="onItemClick($event)">
+                            <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
+                                <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
+                                    [ngTemplateOutlet]="contentTemplate?.templateRef">
+                                </ng-template>
+                                <ng-template #defaultContentTemplate>
+                                    <div *ngIf="topGroupItems" kendoActionSheetList
+                                        class="k-list-ul"
+                                        role="group"
+                                        [groupItems]="topGroupItems"
+                                        [allItems]="items"
+                                        [itemTemplate]="itemTemplate?.templateRef"
+                                        (itemClick)="onItemClick($event)">
+                                    </div>
+            
+                                    <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
+            
+                                    <div *ngIf="bottomGroupItems" kendoActionSheetList
+                                        class="k-list-ul"
+                                        role="group"
+                                        [groupItems]="bottomGroupItems"
+                                        [allItems]="items"
+                                        [itemTemplate]="itemTemplate?.templateRef"
+                                        (itemClick)="onItemClick($event)">
+                                    </div>
+                                </ng-template>
                             </div>
-    
-                            <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
-    
-                            <div *ngIf="bottomGroupItems" kendoActionSheetList
-                                class="k-list-ul"
-                                role="group"
-                                [groupItems]="bottomGroupItems"
-                                [allItems]="items"
-                                [itemTemplate]="itemTemplate?.templateRef"
-                                (itemClick)="onItemClick($event)">
+                            <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
+                                <ng-template
+                                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                </ng-template>
                             </div>
                         </ng-template>
                     </div>
-                    <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
-                        <ng-template
-                            [ngTemplateOutlet]="footerTemplate?.templateRef">
-                        </ng-template>
-                    </div>
                 </div>
             </div>
-        </div>
-    `, isInline: true, components: [{ type: i2.ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+        </ng-container>
+    `, isInline: true, components: [{ type: i3.ActionSheetListComponent, selector: "[kendoActionSheetList]", inputs: ["groupItems", "allItems", "itemTemplate"], outputs: ["itemClick"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoActionSheet',
                     selector: 'kendo-actionsheet',
                     template: `
-        <div class="k-overlay" (click)="onOverlayClick()"></div>
-        <div class="k-animation-container">
-            <div class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
-                <div class="k-actionsheet k-actionsheet-bottom"
-                    [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
-                    role="dialog"
-                    aria-modal="true"
-                    [attr.aria-labelledby]="titleId">
+        <ng-container *ngIf="expanded">
+            <div class="k-overlay" (click)="onOverlayClick()"></div>
+            <div class="k-animation-container">
+                <div #childContainer class="k-child-animation-container" [style]="'bottom: 0px; width: 100%;'">
+                    <div class="k-actionsheet k-actionsheet-bottom"
+                        [style]="'--kendo-actionsheet-height: auto; --kendo-actionsheet-max-height: none;'"
+                        [ngClass]="cssClass"
+                        role="dialog"
+                        aria-modal="true"
+                        [attr.aria-labelledby]="titleId">
 
-                    <div *ngIf="title || headerTemplate" class="k-actionsheet-titlebar">
-                        <div class="k-actionsheet-titlebar-group k-hbox">
-                            <div class="k-actionsheet-title" [id]="titleId">
-                                <ng-template *ngIf="headerTemplate; else defaultTemplate"
+                        <ng-template *ngIf="actionSheetTemplate; else defaultTemplate"
+                            [ngTemplateOutlet]="actionSheetTemplate?.templateRef">
+                        </ng-template>
+
+                        <ng-template #defaultTemplate>
+                            <div *ngIf="title || subtitle || headerTemplate" class="k-actionsheet-titlebar">
+                                <ng-template *ngIf="headerTemplate; else defaultHeaderTemplate"
                                     [ngTemplateOutlet]="headerTemplate?.templateRef">
                                 </ng-template>
-                                <ng-template #defaultTemplate>
-                                    <div *ngIf="title" class="k-text-center">{{title}}</div>
-                                    <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+
+                                <ng-template #defaultHeaderTemplate>
+                                    <div class="k-actionsheet-titlebar-group k-hbox">
+                                        <div class="k-actionsheet-title" [id]="titleId">
+                                            <div *ngIf="title" class="k-text-center">{{title}}</div>
+                                            <div *ngIf="subtitle" class="k-actionsheet-subtitle k-text-center">{{subtitle}}</div>
+                                        </div>
+                                    </div>
                                 </ng-template>
                             </div>
-                        </div>
-                    </div>
 
-                    <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
-                        <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
-                            [ngTemplateOutlet]="contentTemplate?.templateRef">
-                        </ng-template>
-                        <ng-template #defaultContentTemplate>
-                            <div *ngIf="topGroupItems" kendoActionSheetList
-                                class="k-list-ul"
-                                role="group"
-                                [groupItems]="topGroupItems"
-                                [allItems]="items"
-                                [itemTemplate]="itemTemplate?.templateRef"
-                                (itemClick)="onItemClick($event)">
+                            <div *ngIf="items || contentTemplate" class="k-actionsheet-content">
+                                <ng-template *ngIf="contentTemplate; else defaultContentTemplate"
+                                    [ngTemplateOutlet]="contentTemplate?.templateRef">
+                                </ng-template>
+                                <ng-template #defaultContentTemplate>
+                                    <div *ngIf="topGroupItems" kendoActionSheetList
+                                        class="k-list-ul"
+                                        role="group"
+                                        [groupItems]="topGroupItems"
+                                        [allItems]="items"
+                                        [itemTemplate]="itemTemplate?.templateRef"
+                                        (itemClick)="onItemClick($event)">
+                                    </div>
+            
+                                    <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
+            
+                                    <div *ngIf="bottomGroupItems" kendoActionSheetList
+                                        class="k-list-ul"
+                                        role="group"
+                                        [groupItems]="bottomGroupItems"
+                                        [allItems]="items"
+                                        [itemTemplate]="itemTemplate?.templateRef"
+                                        (itemClick)="onItemClick($event)">
+                                    </div>
+                                </ng-template>
                             </div>
-    
-                            <hr *ngIf="shouldRenderSeparator" class="k-hr"/>
-    
-                            <div *ngIf="bottomGroupItems" kendoActionSheetList
-                                class="k-list-ul"
-                                role="group"
-                                [groupItems]="bottomGroupItems"
-                                [allItems]="items"
-                                [itemTemplate]="itemTemplate?.templateRef"
-                                (itemClick)="onItemClick($event)">
+                            <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
+                                <ng-template
+                                    [ngTemplateOutlet]="footerTemplate?.templateRef">
+                                </ng-template>
                             </div>
                         </ng-template>
                     </div>
-                    <div  *ngIf="footerTemplate" class="k-actionsheet-footer">
-                        <ng-template
-                            [ngTemplateOutlet]="footerTemplate?.templateRef">
-                        </ng-template>
-                    </div>
                 </div>
             </div>
-        </div>
+        </ng-container>
     `,
                     providers: [
                         LocalizationService,
@@ -284,7 +400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.AnimationBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-actionsheet-container']
             }], direction: [{
@@ -296,10 +412,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], items: [{
                 type: Input
+            }], cssClass: [{
+                type: Input
+            }], animation: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }], expand: [{
+                type: Output
+            }], collapse: [{
+                type: Output
             }], itemClick: [{
                 type: Output
             }], overlayClick: [{
                 type: Output
+            }], childContainer: [{
+                type: ViewChild,
+                args: ['childContainer']
+            }], actionSheetTemplate: [{
+                type: ContentChild,
+                args: [ActionSheetTemplateDirective]
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [ActionSheetHeaderTemplateDirective]

package/esm2020/actionsheet/animation/animations.mjs

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { animate, style } from '@angular/animations';
+/**
+ * @hidden
+ */
+export function slideUp(duration, height) {
+    return [
+        style({ overflow: 'hidden', display: 'block', height: 0 }),
+        animate(`${duration}ms ease-in`, style({ height: `${height}` }))
+    ];
+}
+/**
+ * @hidden
+ */
+export function slideDown(duration, height) {
+    return [
+        style({ overflow: 'hidden', height: `${height}` }),
+        animate(`${duration}ms ease-in`, style({ overflow: 'hidden', height: 0 }))
+    ];
+}

package/esm2020/actionsheet/models/animation.mjs

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

package/esm2020/actionsheet/models/index.mjs

@@ -7,3 +7,4 @@ export { ActionSheetHeaderTemplateDirective } from '../templates/header-template
 export { ActionSheetItemTemplateDirective } from '../templates/item-template.directive';
 export { ActionSheetContentTemplateDirective } from '../templates/content-template.directive';
 export { ActionSheetFooterTemplateDirective } from '../templates/footer-template.directive';
+export { ActionSheetTemplateDirective } from '../templates/actionsheet-template';

package/esm2020/actionsheet/templates/actionsheet-template.mjs

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

package/esm2020/actionsheet.module.mjs

@@ -6,7 +6,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { ActionSheetComponent } from './actionsheet/actionsheet.component';
-import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective } from './actionsheet/models';
+import { ActionSheetHeaderTemplateDirective, ActionSheetItemTemplateDirective, ActionSheetContentTemplateDirective, ActionSheetFooterTemplateDirective, ActionSheetTemplateDirective } from './actionsheet/models';
 import { ActionSheetItemComponent } from './actionsheet/item.component';
 import { ActionSheetListComponent } from './actionsheet/list.component';
 import * as i0 from "@angular/core";
@@ -14,7 +14,8 @@ const templateDirectives = [
     ActionSheetHeaderTemplateDirective,
     ActionSheetItemTemplateDirective,
     ActionSheetContentTemplateDirective,
-    ActionSheetFooterTemplateDirective
+    ActionSheetFooterTemplateDirective,
+    ActionSheetTemplateDirective
 ];
 const exportedModules = [
     ActionSheetComponent,
@@ -64,10 +65,12 @@ ActionSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         ActionSheetListComponent, ActionSheetComponent, ActionSheetHeaderTemplateDirective,
         ActionSheetItemTemplateDirective,
         ActionSheetContentTemplateDirective,
-        ActionSheetFooterTemplateDirective], imports: [CommonModule, IconsModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
+        ActionSheetFooterTemplateDirective,
+        ActionSheetTemplateDirective], imports: [CommonModule, IconsModule], exports: [ActionSheetComponent, ActionSheetHeaderTemplateDirective,
         ActionSheetItemTemplateDirective,
         ActionSheetContentTemplateDirective,
-        ActionSheetFooterTemplateDirective] });
+        ActionSheetFooterTemplateDirective,
+        ActionSheetTemplateDirective] });
 ActionSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSheetModule, decorators: [{
             type: NgModule,

package/esm2020/bottomnavigation/bottomnavigation-item.component.mjs

@@ -39,7 +39,7 @@ export class BottomNavigationItemComponent {
     }
 }
 BottomNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-hstack": "this.horizontalItemClass", "class.k-vstack": "this.verticalItemClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-selected": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
+BottomNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-hstack": "this.horizontalItemClass", "class.k-vstack": "this.verticalItemClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-selected": "this.selectedClass", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
         <ng-container *ngIf="!itemTemplate">
             <kendo-icon-wrapper *ngIf="itemIcon"
                 class="k-bottom-nav-item-icon"
@@ -110,6 +110,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], selectedClass: [{
                 type: HostBinding,
                 args: ['attr.aria-selected']
+            }, {
+                type: HostBinding,
+                args: ['attr.aria-current']
             }, {
                 type: HostBinding,
                 args: ['class.k-selected']

package/esm2020/breadcrumb/breadcrumb.component.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ContentChild, Input, Output, EventEmitter, ViewChild, HostBinding, ElementRef, ChangeDetectorRef, NgZone, ViewChildren, QueryList, isDevMode } from '@angular/core';
 import { Subscription, ReplaySubject, merge, Subject } from 'rxjs';
 import { filter, map, share, startWith } from 'rxjs/operators';
@@ -48,11 +49,11 @@ import * as i4 from "@angular/common";
  * ```
  */
 export class BreadCrumbComponent {
-    constructor(el, cdr, zone, localization) {
+    constructor(localization, el, cdr, zone) {
+        this.localization = localization;
         this.el = el;
         this.cdr = cdr;
         this.zone = zone;
-        this.localization = localization;
         /**
          * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
          */
@@ -184,8 +185,8 @@ export class BreadCrumbComponent {
         }));
     }
 }
-BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-widget": "this.hostClasses", "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.dir": "this.getDir" } }, providers: [
+BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.dir": "this.getDir" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -258,7 +259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { items: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
                 type: Input
             }], separatorIcon: [{
                 type: Input
@@ -279,11 +280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [BreadCrumbListComponent, { static: true }]
             }], itemTemplate: [{
                 type: ContentChild,
-                args: [BreadCrumbItemTemplateDirective, { static: false }]
+                args: [BreadCrumbItemTemplateDirective]
             }], hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-widget']
-            }, {
                 type: HostBinding,
                 args: ['class.k-breadcrumb']
             }], wrapMode: [{