@progress/kendo-angular-popup
Version:
Kendo UI Angular Popup component - an easily customized popup from the most trusted provider of professional Angular components.
139 lines (138 loc) • 4.77 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Injectable, isDevMode, EventEmitter } from '@angular/core';
import { animate, style, AnimationBuilder } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "@angular/animations";
const LEFT = 'left';
const RIGHT = 'right';
const DOWN = 'down';
const UP = 'up';
const DEFAULT_TYPE = 'slide';
const DEFAULT_DURATION = 100;
const animationTypes = {};
animationTypes.expand = (direction) => {
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 {
start: { transform: `${scale}(${startScale})`, transformOrigin: origin },
end: { transform: `${scale}(${endScale})` }
};
};
animationTypes.slide = (direction) => {
const translate = direction === LEFT || direction === RIGHT ? 'translateX' : 'translateY';
const start = direction === RIGHT || direction === DOWN ? -100 : 100;
const end = 0;
return {
start: { transform: `${translate}(${start}%)` },
end: { transform: `${translate}(${end}%)` }
};
};
animationTypes.fade = () => {
return {
start: { opacity: 0 },
end: { opacity: 1 }
};
};
animationTypes.zoom = () => {
const start = 0;
const end = 1;
return {
start: { transform: `scale(${start})` },
end: { transform: `scale(${end})` }
};
};
/**
* @hidden
*/
export class AnimationService {
animationBuilder;
start = new EventEmitter();
end = new EventEmitter();
flip;
player;
constructor(animationBuilder) {
this.animationBuilder = animationBuilder;
}
play(element, options, flip) {
if (!this.flip || this.flip.horizontal !== flip.horizontal ||
this.flip.vertical !== flip.vertical) {
this.flip = flip;
const type = options.type || DEFAULT_TYPE;
const statesFn = animationTypes[type];
if (statesFn) {
const direction = this.getDirection(flip, options);
const states = statesFn(direction);
this.playStates(element, states, options);
}
else if (isDevMode()) {
throw new Error(`Unsupported animation type: "${type}". The supported types are slide, expand, fade and zoom.`);
}
}
}
ngOnDestroy() {
this.stopPlayer();
}
playStates(element, states, options) {
this.stopPlayer();
const duration = options.duration || DEFAULT_DURATION;
const factory = this.animationBuilder.build([
style(states.start),
animate(`${duration}ms ease-in`, style(states.end))
]);
const player = this.player = factory.create(element);
player.onDone(() => {
this.end.emit();
this.stopPlayer();
});
this.start.emit();
player.play();
}
getDirection(flip, options) {
let direction = options.direction || DOWN;
if (flip.horizontal) {
if (direction === LEFT) {
direction = RIGHT;
}
else if (direction === RIGHT) {
direction = LEFT;
}
}
if (flip.vertical) {
if (direction === DOWN) {
direction = UP;
}
else if (direction === UP) {
direction = DOWN;
}
}
return direction;
}
stopPlayer() {
if (this.player) {
this.player.destroy();
this.player = null;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnimationService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnimationService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i1.AnimationBuilder }]; } });