ng-cw-v12
Version:
Angular UI component library
111 lines (102 loc) • 6.51 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/pulsating', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].pulsating = {}), global.ng.core));
})(this, (function (exports, i0) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var PulsatingDirective = /** @class */ (function () {
function PulsatingDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncDuration = 1500; // ms
this.ncColor = '#0096ff'; // 默认浅蓝色光晕
this.ncSize = '8px'; // 最大光晕宽度
// 为每个实例生成唯一的动画名称
this.animationName = "ncPulse_" + Math.random().toString(36).substr(2, 9);
}
PulsatingDirective.prototype.ngOnInit = function () {
this.createPulsatingContainer();
};
PulsatingDirective.prototype.createPulsatingContainer = function () {
this.pulsatingContainer = this.renderer.createElement('div');
this.renderer.addClass(this.pulsatingContainer, 'pulsating-container');
// 设置基础样式
this.renderer.setStyle(this.pulsatingContainer, 'position', 'absolute');
this.renderer.setStyle(this.pulsatingContainer, 'inset', '0');
this.renderer.setStyle(this.pulsatingContainer, 'borderRadius', 'inherit');
this.renderer.setStyle(this.pulsatingContainer, 'pointerEvents', 'none');
this.renderer.setStyle(this.pulsatingContainer, 'zIndex', '-1');
this.renderer.setStyle(this.pulsatingContainer, 'animation', this.animationName + " " + this.ncDuration + "ms ease-in-out infinite");
var elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 添加关键帧动画样式
var style = this.renderer.createElement('style');
var keyframes = "\n @keyframes " + this.animationName + " {\n 0% {\n box-shadow: 0 0 0 0 " + this.ncColor + ";\n }\n 50% {\n box-shadow: 0 0 0 " + this.ncSize + " " + this.ncColor + ";\n opacity: 0.5;\n }\n 100% {\n box-shadow: 0 0 0 0 " + this.ncColor + ";\n }\n }\n ";
this.renderer.appendChild(style, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, style);
// 将容器添加到宿主元素中
this.renderer.appendChild(this.el.nativeElement, this.pulsatingContainer);
};
return PulsatingDirective;
}());
PulsatingDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: PulsatingDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
PulsatingDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: PulsatingDirective, selector: "[ncPulsating]", inputs: { ncDuration: "ncDuration", ncColor: "ncColor", ncSize: "ncSize" }, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: PulsatingDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncPulsating]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncDuration: [{
type: i0.Input
}], ncColor: [{
type: i0.Input
}], ncSize: [{
type: i0.Input
}] } });
var NcPulsatingModule = /** @class */ (function () {
function NcPulsatingModule() {
}
return NcPulsatingModule;
}());
NcPulsatingModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcPulsatingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, declarations: [PulsatingDirective], exports: [PulsatingDirective] });
NcPulsatingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
PulsatingDirective
],
imports: [],
exports: [
PulsatingDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcPulsatingModule = NcPulsatingModule;
exports.PulsatingDirective = PulsatingDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-pulsating.umd.js.map