@progress/kendo-angular-dialog 7.0.0 → 7.1.0-dev.202205311705

package/fesm2015/kendo-angular-dialog.js

@@ -4,15 +4,16 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { EventEmitter, TemplateRef, Component, Input, Output, HostBinding, InjectionToken, Injectable, Inject, Optional, Directive, forwardRef, ContentChildren, ViewChildren, ViewChild, isDevMode, Renderer2, Host, HostListener, ContentChild, NgModule } from '@angular/core';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i2 from '@angular/animations';
+import { style, animate, keyframes, trigger, state, transition } from '@angular/animations';
 import { of, Subscription, Subject, merge } from 'rxjs';
 import { delay, takeUntil, take, filter, map, share, tap, switchMap } from 'rxjs/operators';
-import * as i1 from '@angular/common';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$1 from '@progress/kendo-angular-l10n';
+import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i1$2 from '@progress/kendo-angular-common';
+import * as i1$1 from '@progress/kendo-angular-common';
 import { DraggableDirective, isChanged, isDocumentAvailable, DraggableModule } from '@progress/kendo-angular-common';
 import { offset, scrollPosition, positionWithScroll, getDocumentElement, getWindowViewPort } from '@progress/kendo-popup-common';
 import { Button } from '@progress/kendo-angular-buttons';
@@ -287,7 +288,7 @@ DialogActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             </button>
         </ng-container>
         <ng-template #actionTemplate [ngTemplateOutlet]="actionsTemplate"></ng-template>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -369,21 +370,21 @@ class TitleBarLocalizationService extends LocalizationService {
         return super.get(shortKey);
     }
 }
-TitleBarLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TitleBarLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1$1.MessageService, optional: true }, { token: RTL, optional: true }, { token: DIALOG_LOCALIZATION_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TitleBarLocalizationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TitleBarLocalizationService, deps: [{ token: L10N_PREFIX }, { token: i1.MessageService, optional: true }, { token: RTL, optional: true }, { token: DIALOG_LOCALIZATION_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 TitleBarLocalizationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TitleBarLocalizationService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TitleBarLocalizationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [L10N_PREFIX]
-                }] }, { type: i1$1.MessageService, decorators: [{
+                }] }, { type: i1.MessageService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [RTL]
-                }] }, { type: i1$1.LocalizationService, decorators: [{
+                }] }, { type: i1.LocalizationService, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -422,7 +423,7 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
 LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  ", providers: [
         {
             provide: Messages,
@@ -444,7 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     [kendoDialogTitleBarLocalizedMessages]
   `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
  * Represents the [Kendo UI DialogTitleBar component for Angular]({% slug api_dialog_dialogtitlebarcomponent %}).
@@ -482,7 +483,7 @@ class DialogTitleBarComponent {
         this.close.emit(eventArgs);
     }
 }
-DialogTitleBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1$1.LocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DialogTitleBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogTitleBarComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i1.LocalizationService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DialogTitleBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: { id: "id", closeTitle: "closeTitle" }, outputs: { close: "close" }, host: { properties: { "class.k-window-titlebar": "this.className", "class.k-dialog-titlebar": "this.className" } }, providers: [
         TitleBarLocalizationService,
         {
@@ -555,7 +556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1$1.LocalizationService, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i1.LocalizationService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { close: [{
                 type: Output
@@ -578,7 +579,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1650440923,
+    publishDate: 1654016727,
     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'
 };
@@ -591,15 +592,111 @@ const packageMetadata = {
 class DialogCloseResult {
 }
 
+/**
+ * @hidden
+ */
+function animations(duration, direction, animationType) {
+    switch (animationType) {
+        case 'slide':
+            const translate = direction === 'left' || direction === 'right' ? 'translateX' : 'translateY';
+            const start = direction === 'right' || direction === 'down' ? -100 : 100;
+            const end = 0;
+            return [
+                style({ transform: `${translate}(${start}%)` }),
+                animate(`${duration}ms ease-in`, style({ transform: `${translate}(${end}%)` }))
+            ];
+        case 'expand':
+            const scale = direction === 'up' || direction === 'down' ? 'scaleY' : 'scaleX';
+            const startScale = 0;
+            const endScale = 1;
+            let origin;
+            if (direction === 'down') {
+                origin = 'top';
+            }
+            else if (direction === 'left') {
+                origin = 'right';
+            }
+            else if (direction = 'right') {
+                origin = 'left';
+            }
+            else {
+                origin = 'bottom';
+            }
+            return [
+                style({ transform: `${scale}(${startScale})`, transformOrigin: origin }),
+                animate(`${duration}ms ease-in`, style({ transform: `${scale}(${endScale})` }))
+            ];
+        case 'zoom':
+            const startZoom = 0;
+            const endZoom = 1;
+            return [
+                animate(duration, keyframes([
+                    style({ transform: `scale(${startZoom})` }),
+                    style({ transform: `scale(${endZoom})` })
+                ]))
+            ];
+        case 'fade':
+            const startFade = 0;
+            const endFade = 1;
+            return [
+                animate(duration, keyframes([
+                    style({ opacity: `${startFade}` }),
+                    style({ opacity: `${endFade}` })
+                ]))
+            ];
+        case 'translate':
+            return [
+                style({ transform: 'translate(0, -10%)' }),
+                animate(`${duration}ms cubic-bezier(.2, 1, .2, 1)`)
+            ];
+        default:
+            return [
+                style({ transform: 'translate(0, -10%)' }),
+                animate(`${duration}ms cubic-bezier(.2, 1, .2, 1)`)
+            ];
+    }
+}
+
+/**
+ * @hidden
+ */
+const createPlayer = (builder, animation, animatedElement) => {
+    const factory = builder.build(animation);
+    let player = factory.create(animatedElement);
+    player.onDone(() => {
+        if (player) {
+            player.destroy();
+            player = null;
+        }
+    });
+    return player;
+};
+
+/**
+ * @hidden
+ */
+const animateContent = (animation, defAnimationConfig, animatedElement, builder) => {
+    let animationConfig = defAnimationConfig;
+    if (typeof animation !== 'boolean') {
+        animationConfig = animation;
+        animationConfig.duration = animationConfig.duration ? animationConfig.duration : defAnimationConfig.duration;
+    }
+    const animationSpecs = animations(animationConfig.duration, animationConfig.direction, animationConfig.type);
+    const player = createPlayer(builder, animationSpecs, animatedElement);
+    player.play();
+};
+
+const DEFAULT_ANIMATION_CONFIG = { duration: 300, type: 'translate' };
 /**
  * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
  */
 class DialogComponent {
-    constructor(wrapper, renderer, localization, cdr, ngZone) {
+    constructor(wrapper, renderer, localization, cdr, ngZone, builder) {
         this.wrapper = wrapper;
         this.renderer = renderer;
         this.cdr = cdr;
         this.ngZone = ngZone;
+        this.builder = builder;
         /**
          * Specifies the layout of the action buttons in the Dialog.
          * This option is only applicable if the action buttons are specified through the `actions` options.
@@ -607,6 +704,13 @@ class DialogComponent {
          * @default 'stretched'
          */
         this.actionsLayout = 'stretched';
+        /**
+         * Configures the Dialog opening animation ([see example]({% slug animations_dialog %})).
+         * By default the animation type is set to `translate` and its duration is `300ms`.
+         *
+         * @default true
+         */
+        this.animation = true;
         /**
          * @hidden
          */
@@ -705,6 +809,9 @@ class DialogComponent {
         this.initDomEvents();
     }
     ngOnInit() {
+        if (this.animation) {
+            animateContent(this.animation, DEFAULT_ANIMATION_CONFIG, this.dialog.nativeElement, this.builder);
+        }
         this.renderer.removeAttribute(this.wrapper.nativeElement, 'title');
         this.cdr.detectChanges();
     }
@@ -897,8 +1004,8 @@ class DialogComponent {
         }
     }
 }
-DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialogComponent, selector: "kendo-dialog", inputs: { actions: "actions", actionsLayout: "actionsLayout", autoFocusedElement: "autoFocusedElement", title: "title", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", height: "height", minHeight: "minHeight", maxHeight: "maxHeight" }, outputs: { action: "action", close: "close" }, host: { properties: { "attr.dir": "this.dir", "attr.tabIndex": "this.tabIndex", "class.k-dialog-wrapper": "this.wrapperClass" } }, providers: [
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialogComponent, selector: "kendo-dialog", inputs: { actions: "actions", actionsLayout: "actionsLayout", autoFocusedElement: "autoFocusedElement", title: "title", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", animation: "animation" }, outputs: { action: "action", close: "close" }, host: { properties: { "attr.dir": "this.dir", "attr.tabIndex": "this.tabIndex", "class.k-dialog-wrapper": "this.wrapperClass" } }, providers: [
         LocalizationService,
         {
             provide: DIALOG_LOCALIZATION_SERVICE,
@@ -908,7 +1015,7 @@ DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             provide: L10N_PREFIX,
             useValue: 'kendo.dialog'
         }
-    ], queries: [{ propertyName: "titlebarContent", predicate: DialogTitleBarComponent }], viewQueries: [{ propertyName: "actionsView", first: true, predicate: DialogActionsComponent, descendants: true }, { propertyName: "titlebarView", predicate: DialogTitleBarComponent, descendants: true }], exportAs: ["kendoDialog"], ngImport: i0, template: `
+    ], queries: [{ propertyName: "titlebarContent", predicate: DialogTitleBarComponent }], viewQueries: [{ propertyName: "actionsView", first: true, predicate: DialogActionsComponent, descendants: true }, { propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }, { propertyName: "titlebarView", predicate: DialogTitleBarComponent, descendants: true }], exportAs: ["kendoDialog"], ngImport: i0, template: `
         <ng-container
             kendoDialogLocalizedMessages
             i18n-closeTitle="kendo.dialog.closeTitle|The title of the close button"
@@ -916,7 +1023,7 @@ DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         >
         <div class="k-overlay" @overlayAppear></div>
 
-        <div class="k-window k-dialog" role="dialog" aria-modal="true" [ngStyle]="styles" @dialogSlideInAppear>
+        <div #dialog class="k-window k-dialog" role="dialog" aria-modal="true" [ngStyle]="styles">
             <kendo-dialog-titlebar *ngIf="title" [closeTitle]="closeTitle" [id]="titleId">{{ title }}</kendo-dialog-titlebar>
             <ng-content select="kendo-dialog-titlebar" *ngIf="!title"></ng-content>
 
@@ -929,14 +1036,10 @@ DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             <kendo-dialog-actions *ngIf="actions" [actions]="actions" [layout]="actionsLayout"> </kendo-dialog-actions>
         </div>
     </ng-container>
-    `, isInline: true, components: [{ type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('overlayAppear', [
             state('in', style({ opacity: 1 })),
             transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
-        ]),
-        trigger('dialogSlideInAppear', [
-            state('in', style({ transform: 'translate(0, 0)' })),
-            transition('void => *', [style({ transform: 'translate(0, -10%)' }), animate('.3s cubic-bezier(.2, 1, .2, 1)')])
         ])
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogComponent, decorators: [{
@@ -946,10 +1049,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         trigger('overlayAppear', [
                             state('in', style({ opacity: 1 })),
                             transition('void => *', [style({ opacity: 0.1 }), animate('.3s cubic-bezier(.2, .6, .4, 1)')])
-                        ]),
-                        trigger('dialogSlideInAppear', [
-                            state('in', style({ transform: 'translate(0, 0)' })),
-                            transition('void => *', [style({ transform: 'translate(0, -10%)' }), animate('.3s cubic-bezier(.2, 1, .2, 1)')])
                         ])
                     ],
                     exportAs: 'kendoDialog',
@@ -973,7 +1072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         >
         <div class="k-overlay" @overlayAppear></div>
 
-        <div class="k-window k-dialog" role="dialog" aria-modal="true" [ngStyle]="styles" @dialogSlideInAppear>
+        <div #dialog class="k-window k-dialog" role="dialog" aria-modal="true" [ngStyle]="styles">
             <kendo-dialog-titlebar *ngIf="title" [closeTitle]="closeTitle" [id]="titleId">{{ title }}</kendo-dialog-titlebar>
             <ng-content select="kendo-dialog-titlebar" *ngIf="!title"></ng-content>
 
@@ -988,7 +1087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { actions: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AnimationBuilder }]; }, propDecorators: { actions: [{
                 type: Input
             }], actionsLayout: [{
                 type: Input
@@ -1008,6 +1107,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], maxHeight: [{
                 type: Input
+            }], animation: [{
+                type: Input
             }], action: [{
                 type: Output
             }], close: [{
@@ -1027,6 +1128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], actionsView: [{
                 type: ViewChild,
                 args: [DialogActionsComponent, { static: false }]
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog', { static: true }]
             }], wrapperClass: [{
                 type: HostBinding,
                 args: ['class.k-dialog-wrapper']
@@ -1065,14 +1169,10 @@ class DialogContentBase {
         }
     }
 }
-DialogContentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContentBase, deps: [{ token: DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogContentBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialogContentBase, selector: "kendo-dialog-content-base", viewQueries: [{ propertyName: "dialogTitleBar", first: true, predicate: DialogTitleBarComponent, descendants: true }, { propertyName: "dialogActions", first: true, predicate: DialogActionsComponent, descendants: true }], ngImport: i0, template: ``, isInline: true });
+DialogContentBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContentBase, deps: [{ token: DialogRef }], target: i0.ɵɵFactoryTarget.Directive });
+DialogContentBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DialogContentBase, viewQueries: [{ propertyName: "dialogTitleBar", first: true, predicate: DialogTitleBarComponent, descendants: true }, { propertyName: "dialogActions", first: true, predicate: DialogActionsComponent, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialogContentBase, decorators: [{
-            type: Component,
-            args: [{
-                    template: ``,
-                    selector: 'kendo-dialog-content-base'
-                }]
+            type: Directive
         }], ctorParameters: function () { return [{ type: DialogRef }]; }, propDecorators: { dialogTitleBar: [{
                 type: ViewChild,
                 args: [DialogTitleBarComponent, { static: false }]
@@ -1280,6 +1380,7 @@ See https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/.
         instance.closeTitle = options.closeTitle;
         instance.cssClass = options.cssClass;
         instance.htmlAttributes = options.htmlAttributes;
+        instance.animation = options.animation !== undefined ? options.animation : true;
         if (options.content instanceof TemplateRef) {
             instance.contentTemplate = options.content;
         }
@@ -1682,14 +1783,14 @@ class ResizeHandleDirective {
         this.renderer.setStyle(this.el.nativeElement, 'display', this.service.options.state === 'default' ? value : 'none');
     }
 }
-ResizeHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeHandleDirective, deps: [{ token: i1$2.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }], target: i0.ɵɵFactoryTarget.Directive });
+ResizeHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeHandleDirective, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }], target: i0.ɵɵFactoryTarget.Directive });
 ResizeHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ResizeHandleDirective, selector: "[kendoWindowResizeHandle]", inputs: { direction: "direction" }, host: { properties: { "class.k-resize-handle": "this.hostClass" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoWindowResizeHandle]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.DraggableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective, decorators: [{
                     type: Host
                 }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService }]; }, propDecorators: { direction: [{
                 type: Input
@@ -1795,7 +1896,7 @@ WindowTitleBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
       [ngTemplateOutlet]="template"
       [ngTemplateOutletContext]="{'$implicit': service}" *ngIf="template">
     </ng-template>
-  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowTitleBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1988,7 +2089,7 @@ class WindowMinimizeActionDirective extends Button {
         return this.window.options.state === 'default' ? 'inline-flex' : 'none';
     }
 }
-WindowMinimizeActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowMinimizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+WindowMinimizeActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowMinimizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 WindowMinimizeActionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "style.display": "this.visible" } }, providers: [
         LocalizationService,
         {
@@ -2011,7 +2112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
-                }] }, { type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
+                }] }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
                 type: Input
             }], buttonType: [{
                 type: HostBinding,
@@ -2044,7 +2145,7 @@ class WindowMaximizeActionDirective extends Button {
         return this.window.options.state === 'default' ? 'inline-flex' : 'none';
     }
 }
-WindowMaximizeActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowMaximizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+WindowMaximizeActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowMaximizeActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 WindowMaximizeActionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "style.display": "this.visible" } }, providers: [
         LocalizationService,
         {
@@ -2067,7 +2168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
-                }] }, { type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
+                }] }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
                 type: Input
             }], buttonType: [{
                 type: HostBinding,
@@ -2100,7 +2201,7 @@ class WindowRestoreActionDirective extends Button {
         return this.window.options.state === 'default' ? 'none' : 'inline-flex';
     }
 }
-WindowRestoreActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowRestoreActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+WindowRestoreActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowRestoreActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 WindowRestoreActionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType", "style.display": "this.visible" } }, providers: [
         LocalizationService,
         {
@@ -2123,7 +2224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
-                }] }, { type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
+                }] }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
                 type: Input
             }], buttonType: [{
                 type: HostBinding,
@@ -2153,7 +2254,7 @@ class WindowCloseActionDirective extends Button {
         }
     }
 }
-WindowCloseActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowCloseActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+WindowCloseActionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowCloseActionDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 WindowCloseActionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: { window: "window" }, host: { listeners: { "click": "onClick()" }, properties: { "attr.type": "this.buttonType" } }, providers: [
         LocalizationService,
         {
@@ -2176,7 +2277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService, decorators: [{
                     type: Optional
-                }] }, { type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
+                }] }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { window: [{
                 type: Input
             }], buttonType: [{
                 type: HostBinding,
@@ -2685,7 +2786,7 @@ class WindowComponent {
         }
     }
 }
-WindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }, { token: NavigationService }, { token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+WindowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DragResizeService }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 WindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: WindowComponent, selector: "kendo-window", inputs: { autoFocusedElement: "autoFocusedElement", title: "title", draggable: "draggable", resizable: "resizable", keepContent: "keepContent", state: "state", minWidth: "minWidth", minHeight: "minHeight", width: "width", height: "height", top: "top", left: "left" }, outputs: { dragStart: "dragStart", dragEnd: "dragEnd", resizeStart: "resizeStart", resizeEnd: "resizeEnd", close: "close", widthChange: "widthChange", heightChange: "heightChange", topChange: "topChange", leftChange: "leftChange", stateChange: "stateChange" }, host: { listeners: { "focus": "onComponentFocus()", "blur": "onComponentBlur()" }, properties: { "attr.tabIndex": "this.tabIndex", "class.k-window": "this.hostClasses", "attr.dir": "this.dir", "style.minWidth": "this.styleMinWidth", "style.minHeight": "this.styleMinHeight", "style.position": "this.stylePosition", "class.k-window-maximized": "this.wrapperMaximizedClass", "class.k-window-minimized": "this.wrapperMinimizedClass" } }, providers: [
         DragResizeService,
         NavigationService,
@@ -2736,7 +2837,7 @@ WindowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 kendoDraggable>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: ["window"], exportAs: ["kendoWindowMinimizeAction"] }, { type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ResizeHandleDirective, selector: "[kendoWindowResizeHandle]", inputs: ["direction"] }, { type: i1$2.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+    `, isInline: true, components: [{ type: WindowTitleBarComponent, selector: "kendo-window-titlebar", inputs: ["template"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: WindowMinimizeActionDirective, selector: "button[kendoWindowMinimizeAction]", inputs: ["window"], exportAs: ["kendoWindowMinimizeAction"] }, { type: WindowMaximizeActionDirective, selector: "button[kendoWindowMaximizeAction]", inputs: ["window"], exportAs: ["kendoWindowMaximizeAction"] }, { type: WindowRestoreActionDirective, selector: "button[kendoWindowRestoreAction]", inputs: ["window"], exportAs: ["kendoWindowRestoreAction"] }, { type: WindowCloseActionDirective, selector: "button[kendoWindowCloseAction]", inputs: ["window"], exportAs: ["kendoWindowCloseAction"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ResizeHandleDirective, selector: "[kendoWindowResizeHandle]", inputs: ["direction"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: WindowComponent, decorators: [{
             type: Component,
             args: [{
@@ -2795,7 +2896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService }, { type: NavigationService }, { type: i0.NgZone }, { type: i1$1.LocalizationService }]; }, propDecorators: { autoFocusedElement: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DragResizeService }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { autoFocusedElement: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -3159,7 +3260,7 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
 CustomMessagesComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CustomMessagesComponent, selector: "kendo-dialog-messages, kendo-window-messages", providers: [
         {
             provide: Messages,
@@ -3178,7 +3279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendo-dialog-messages, kendo-window-messages'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
 /**
  * @hidden

package/main.d.ts

@@ -7,8 +7,10 @@ export { DialogTitleBarComponent } from './dialog/dialog-titlebar.component';
 export { DialogContentBase } from './dialog/dialog-content-base';
 export { DialogActionsComponent } from './dialog/dialog-actions.component';
 export { DialogService } from './dialog/dialog.service';
-export { DialogCloseResult, DialogRef, DialogSettings, DialogAction, DialogResult } from './dialog/models/';
+export { DialogCloseResult, DialogRef, DialogSettings, DialogAction, DialogResult, DialogAnimation } from './dialog/models/';
 export { ActionsLayout } from './common/actions-layout';
+export { DialogAnimationType } from './common/animation-types';
+export { AnimationDirection } from './common/dialog-animation-direction';
 export { WindowComponent } from './window/window.component';
 export { WindowTitleBarComponent } from './window/window-titlebar.component';
 export { WindowMaximizeActionDirective } from './window/actions/window-maximize-action.directive';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dialog",
-  "version": "7.0.0",
+  "version": "7.1.0-dev.202205311705",
   "description": "Dialog Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",

package/window/window.component.d.ts

@@ -22,7 +22,7 @@ export declare class WindowComponent implements OnInit, OnDestroy, OnChanges, Af
     private ngZone;
     private localization;
     /**
-     * Specifies the query selector used to set the initial focus.
+     * Specifies the query selector used to set the initial focus ([see examples]({% slug initial_focus_window %})).
      */
     autoFocusedElement: string;
     /**