@progress/kendo-angular-dialog 7.0.0-next.202204131319 → 7.1.0-dev.202205310852

package/dialog/models/dialog-settings.d.ts

@@ -5,6 +5,7 @@
 import { TemplateRef, ViewContainerRef } from "@angular/core";
 import { ActionsLayout } from "./../../common/actions-layout";
 import { DialogAction } from "./dialog-action";
+import { DialogAnimation } from "./dialog-animation";
 import { DialogRef } from "./dialog-ref";
 import { DialogResult } from "./dialog-result";
 /**
@@ -31,6 +32,11 @@ export declare class DialogSettings {
      * Supports the union type of values that NgClass accepts [ngClass]({{ site.data.urls.angular['ngclassapi'] }}).
      */
     cssClass?: any;
+    /**
+     * Configures the Dialog opening animation ([see example]({% slug animations_dialog %})).
+     * By default the animation type is set to `translate` and its duration is `300ms`.
+     */
+    animation?: boolean | DialogAnimation;
     /**
      * Sets the HTML attributes of the Dialog wrapper element.
      * The property accepts string key-value based pairs.

package/dialog/models/index.d.ts

@@ -7,3 +7,4 @@ export * from './dialog-close-result';
 export * from './dialog-ref';
 export * from './dialog-result';
 export * from './dialog-settings';
+export * from './dialog-animation';

package/esm2015/common/animation-types.js

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

package/esm2015/common/dialog-animation-direction.js

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

package/esm2015/common/preventable-event.js

@@ -2,10 +2,10 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
 export class PreventableEvent {
+    /**
+     * @hidden
+     */
     constructor() {
         this.prevented = false;
     }

package/esm2015/dialog/dialog-animations/animate-content.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { animations } from "./animations";
+import { createPlayer } from "./create-animation-player";
+/**
+ * @hidden
+ */
+export 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();
+};

package/esm2015/dialog/dialog-animations/animations.js

@@ -0,0 +1,69 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { animate, keyframes, style } from '@angular/animations';
+/**
+ * @hidden
+ */
+export 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)`)
+            ];
+    }
+}

package/esm2015/dialog/dialog-animations/create-animation-player.js

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export 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;
+};

package/esm2015/dialog/dialog.component.js

@@ -14,21 +14,25 @@ import { DialogCloseResult } from './models/dialog-close-result';
 import { DIALOG_LOCALIZATION_SERVICE } from './../localization/dialog-localization.service';
 import { take } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
+import { animateContent } from './dialog-animations/animate-content';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "./dialog-titlebar.component";
-import * as i3 from "./dialog-actions.component";
-import * as i4 from "../localization/localized-messages.directive";
-import * as i5 from "@angular/common";
+import * as i2 from "@angular/animations";
+import * as i3 from "./dialog-titlebar.component";
+import * as i4 from "./dialog-actions.component";
+import * as i5 from "../localization/localized-messages.directive";
+import * as i6 from "@angular/common";
+const DEFAULT_ANIMATION_CONFIG = { duration: 300, type: 'translate' };
 /**
  * Represents the [Kendo UI Dialog component for Angular]({% slug overview_dialog_dialogs %}).
  */
 export 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.
@@ -36,6 +40,13 @@ export 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
          */
@@ -134,6 +145,9 @@ export 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();
     }
@@ -326,8 +340,8 @@ export 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.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,
@@ -337,7 +351,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"
@@ -345,7 +359,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>
 
@@ -358,14 +372,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: i2.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i3.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i4.LocalizedMessagesDirective, selector: "\n    [kendoDialogLocalizedMessages],\n    [kendoWindowLocalizedMessages],\n    [kendoDialogTitleBarLocalizedMessages]\n  " }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i3.DialogTitleBarComponent, selector: "kendo-dialog-titlebar", inputs: ["id", "closeTitle"], outputs: ["close"] }, { type: i4.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }], directives: [{ type: i5.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: [{
@@ -375,10 +385,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',
@@ -402,7 +408,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>
 
@@ -417,7 +423,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.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
@@ -437,6 +443,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], maxHeight: [{
                 type: Input
+            }], animation: [{
+                type: Input
             }], action: [{
                 type: Output
             }], close: [{
@@ -456,6 +464,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']

package/esm2015/dialog/dialog.service.js

@@ -181,6 +181,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;
         }

package/esm2015/dialog/models/dialog-animation.js

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

package/esm2015/dialog/models/index.js

@@ -7,3 +7,4 @@ export * from './dialog-close-result';
 export * from './dialog-ref';
 export * from './dialog-result';
 export * from './dialog-settings';
+export * from './dialog-animation';

package/esm2015/main.js

@@ -25,3 +25,4 @@ export { Messages } from './localization/messages';
 export { LocalizedMessagesDirective } from './localization/localized-messages.directive';
 export { CustomMessagesComponent } from './localization/custom-messages.component';
 export { WindowContainerDirective } from './window/window-container.directive';
+export { PreventableEvent } from './common/preventable-event';

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-dialog',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1649855913,
+    publishDate: 1653987141,
     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'
 };